@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.10

package/README.md

@@ -1,5 +1,4 @@
-Koobiq
-=======
+# Koobiq
 
 The sources for this package are in the main [Koobiq](#) repo.
 

package/alert/_alert-theme.scss

@@ -2,60 +2,84 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-alert-style($component, $type, $style-name) {
+    $style: map.get($component, $type, $style-name);
 
-@mixin kbq-alert-theme($alert) {
-    background-color: map.get($alert, background);
-    border-color: map.get($alert, border);
+    background: kbq-css-variable(alert-#{$type}-#{$style-name}-background, map.get($style, background));
 
-    .kbq-icon.kbq-alert__icon {
-        color: map.get($alert, icon);
+    .kbq-alert__title {
+        color: kbq-css-variable(alert-#{$type}-#{$style-name}-title, map.get($style, title));
+    }
+
+    .kbq-alert__text {
+        color: kbq-css-variable(alert-#{$type}-#{$style-name}-text, map.get($style, text));
     }
 }
 
 @mixin kbq-alert-theme($theme) {
     $alert: map.get(map.get($theme, components), alert);
 
-    $alert-contrast: map.get($alert, contrast);
-    $alert-error: map.get($alert, error);
-
     .kbq-alert__close:focus {
         outline: none;
     }
 
-    .kbq-alert {
-        background: map.get($alert-contrast, background);
+    .kbq-alert.kbq-alert_default {
+        &.kbq-alert_contrast {
+            @include kbq-alert-style($alert, default, contrast);
+        }
+
+        &.kbq-alert_error {
+            @include kbq-alert-style($alert, default, error);
+        }
+
+        &.kbq-alert_warning {
+            @include kbq-alert-style($alert, default, warning);
+        }
 
-        & .kbq-alert__title {
-            color: map.get($alert-contrast, title);
+        &.kbq-alert_success {
+            @include kbq-alert-style($alert, default, success);
         }
 
-        & .kbq-alert__text {
-            color: map.get($alert-contrast, text);
+        &.kbq-alert_theme {
+            @include kbq-alert-style($alert, default, theme);
         }
     }
 
-    .kbq-alert.kbq-alert_error {
-        background: map.get($alert-error, background);
+    .kbq-alert.kbq-alert_colored {
+        &.kbq-alert_contrast {
+            @include kbq-alert-style($alert, colored, contrast);
+        }
+
+        &.kbq-alert_error {
+            @include kbq-alert-style($alert, colored, error);
+        }
+
+        &.kbq-alert_warning {
+            @include kbq-alert-style($alert, colored, warning);
+        }
 
-        & .kbq-alert__title {
-            color: map.get($alert-error, title);
+        &.kbq-alert_success {
+            @include kbq-alert-style($alert, colored, success);
         }
 
-        & .kbq-alert__text {
-            color: map.get($alert-error, text);
+        &.kbq-alert_theme {
+            @include kbq-alert-style($alert, colored, theme);
         }
     }
 }
 
 @mixin kbq-alert-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-alert {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, alert-font-text));
+        @include kbq-typography-css-variables(alert, text);
 
         .kbq-alert__title {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, alert-font-title));
+            @include kbq-typography-css-variables(alert, title);
+        }
+
+        &.kbq-alert_compact .kbq-alert__title {
+            @include kbq-typography-css-variables(alert, title-compact);
         }
     }
 }

package/alert/alert.component.d.ts

@@ -1,5 +1,17 @@
-import { KbqIconItem } from '@koobiq/components/icon';
+import { AfterContentInit } from '@angular/core';
+import { KbqIcon, KbqIconItem } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
+export declare enum KbqAlertStyles {
+    Default = "default",
+    Colored = "colored"
+}
+export declare enum KbqAlertColors {
+    Contrast = "contrast",
+    Error = "error",
+    Warning = "warning",
+    Success = "success",
+    Theme = "theme"
+}
 export declare class KbqAlertTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlertTitle, "[kbq-alert-title]", never, {}, {}, never, never, false, never>;
@@ -12,11 +24,19 @@ export declare class KbqAlertControl {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertControl, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlertControl, "[kbq-alert-control]", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqAlert {
+export declare class KbqAlert implements AfterContentInit {
     iconItem: KbqIconItem;
+    icon: KbqIcon;
     title: KbqAlertTitle;
     control: KbqAlertControl;
     closeButton: KbqAlertCloseButton;
+    compact: boolean;
+    alertStyle: KbqAlertStyles | string;
+    get alertColor(): string;
+    set alertColor(value: string | KbqAlertColors);
+    private _alertColor;
+    get isColored(): boolean;
+    ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlert, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAlert, "kbq-alert", never, {}, {}, ["iconItem", "title", "control", "closeButton"], ["[kbq-icon-item]", "[kbq-alert-title]", "*", "[kbq-alert-control]", "[kbq-alert-close-button]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAlert, "kbq-alert", never, { "compact": { "alias": "compact"; "required": false; }; "alertStyle": { "alias": "alertStyle"; "required": false; }; "alertColor": { "alias": "alertColor"; "required": false; }; }, {}, ["iconItem", "icon", "title", "control", "closeButton"], ["[kbq-icon-item],[kbq-icon]", "[kbq-alert-title]", "*", "[kbq-alert-control]", "[kbq-alert-close-button]"], false, never>;
 }

package/alert/alert.component.scss

@@ -1,61 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-alert {
     display: flex;
 
-    border-radius: var(--kbq-alert-size-container-border-radius, map.get($tokens, alert-size-container-border-radius));
-
-    min-width: var(--kbq-alert-size-container-min-width, map.get($tokens, alert-size-container-min-width));
-    min-height: calc(
-        var(--kbq-alert-size-container-min-height, map.get($tokens, alert-size-container-min-height)) -
-        (var(--kbq-alert-size-container-padding-vertical, map.get($tokens, alert-size-container-padding-vertical)) * 2)
-    );
-
-    padding:
-        var(--kbq-alert-size-container-padding-vertical, map.get($tokens, alert-size-container-padding-vertical))
-        var(--kbq-alert-size-container-padding-horizontal, map.get($tokens, alert-size-container-padding-horizontal));
-}
-
-.kbq-alert__icon {
-    margin-right: var(
-        --kbq-alert-size-container-content-gap-horizontal,
-        map.get($tokens, alert-size-container-content-gap-horizontal)
-    );
-}
-
-.kbq-alert__title {
-    margin-bottom: var(
-        --kbq-alert-size-container-content-gap-vertical,
-        map.get($tokens, alert-size-container-content-gap-vertical)
-    );
-}
-
-.kbq-alert__controls {
-    margin-top: var(
-        --kbq-alert-size-container-content-gap-vertical,
-        map.get($tokens, alert-size-container-content-gap-vertical)
-    );
-
-    padding-top: var(
-        --kbq-alert-size-button-stack-content-padding-top,
-        map.get($tokens, alert-size-button-stack-padding-top)
-    );
-
-    & .kbq-button {
-        margin-right: var(
-            --kbq-alert-size-button-stack-content-content-gap-horizontal,
-            map.get($tokens, alert-size-button-stack-content-gap-horizontal)
-        );
-    }
+    box-sizing: border-box;
 
-    & .kbq-link {
-        margin-right: 16px;
+    & .kbq-alert__content_title {
+        margin-bottom: kbq-css-variable(size-xxs);
     }
 }
 
@@ -67,15 +21,93 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
 }
 
-.kbq-alert__close-button {
-    margin-left: var(
-        --kbq-alert-size-container-content-gap-horizontal,
-        map.get($tokens, alert-size-container-content-gap-horizontal)
-    );
+.kbq-alert.kbq-alert_normal {
+    border-radius: kbq-css-variable(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);
+
+    & .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);
+
+        &.kbq-alert__icon_title {
+            margin-top: kbq-css-variable(alert-size-normal-icon-margin-top);
+
+            padding-top: kbq-css-variable(alert-size-normal-no-title-icon-padding-top);
+        }
+
+        display: inline-flex;
+        align-items: flex-start;
+    }
+
+    & .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);
+    }
+
+    & .kbq-alert__title {
+        margin-bottom: kbq-css-variable(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);
+    }
+
+    & .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);
+    }
 }
 
-.kbq-alert_dismissible .kbq-alert__close-button {
-    margin-top: var(--kbq-alert-size-close-button-margin-top, map.get($tokens, alert-size-close-button-margin-top));
-    margin-right:
-        var(--kbq-alert-size-close-button-margin-right, map.get($tokens, alert-size-close-button-margin-right));
+.kbq-alert.kbq-alert_compact {
+    border-radius: kbq-css-variable(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);
+
+    & .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);
+
+        padding-top: kbq-css-variable(alert-size-compact-no-title-icon-padding-top);
+
+        &.kbq-alert__icon_title {
+            margin-top: kbq-css-variable(alert-size-compact-icon-margin-top);
+
+            padding-top: kbq-css-variable(alert-size-compact-icon-padding-top);
+        }
+
+        display: inline-flex;
+        align-items: flex-start;
+    }
+
+    & .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);
+    }
+
+    & .kbq-alert__title {
+        margin-bottom: kbq-css-variable(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);
+    }
+
+    & .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);
+    }
 }

package/autocomplete/_autocomplete-theme.scss

@@ -2,13 +2,13 @@
 
 @use '../core/styles/common/popup';
 @use '../core/styles/theming/theming';
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-autocomplete-theme($theme) {
     $select-panel: map.get(map.get($theme, components), select-panel);
 
     .kbq-autocomplete-panel {
-        box-shadow: map.get($select-panel, shadow);
-        background: map.get($select-panel, background);
+        box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
+        background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
     }
 }

package/autocomplete/autocomplete.scss

@@ -1,11 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-autocomplete-panel {
     visibility: hidden;
@@ -13,7 +9,7 @@ $tokens: meta.module-variables(tokens) !default;
     position: relative;
 
     overflow: hidden auto;
-    -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
+    -webkit-overflow-scrolling: touch; // for momentum scroll on mobile
 
     margin-top: -1px;
 
@@ -21,16 +17,12 @@ $tokens: meta.module-variables(tokens) !default;
     width: 100%;
     max-width: none;
 
-    max-height: var(--kbq-autocomplete-size-panel-max-height, map.get($tokens, autocomplete-size-panel-max-height));
+    max-height: kbq-css-variable(autocomplete-size-panel-max-height);
 
-    border-bottom-left-radius: var(
-        --kbq-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius)
-    );
-    border-bottom-right-radius: var(
-        --kbq-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius)
-    );
+    border-bottom-left-radius: kbq-css-variable(autocomplete-size-panel-border-radius);
+    border-bottom-right-radius: kbq-css-variable(autocomplete-size-panel-border-radius);
 
-    padding: var(--kbq-autocomplete-size-panel-padding, map.get($tokens, autocomplete-size-panel-padding));
+    padding: kbq-css-variable(autocomplete-size-panel-padding);
 
     &.kbq-autocomplete_visible {
         visibility: visible;
@@ -41,10 +33,8 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-autocomplete-panel-above & {
-        border-radius:
-            var(--kbq-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius))
-            var(--kbq-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius))
-            0 0;
+        border-radius: kbq-css-variable(autocomplete-size-panel-border-radius)
+            kbq-css-variable(autocomplete-size-panel-border-radius) 0 0;
     }
 
     // We need to offset horizontal dividers by their height, because

package/badge/_badge-theme.scss

@@ -2,122 +2,107 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-badge-style($component, $type, $sub-type, $style-name) {
+    $style: map.get($component, $type, $sub-type, $style-name);
 
-@mixin kbq-badge-style($badge) {
-    color: map.get($badge, color);
-    background: map.get($badge, background);
+    color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-color, map.get($style, color));
+    background: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-background, map.get($style, background));
 
     & .kbq-badge-caption {
-        color: map.get($badge, caption);
+        color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-caption, map.get($style, caption));
     }
 
     & .kbq-icon {
-        color: map.get($badge, icon) !important;
+        color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-icon, map.get($style, icon)) !important;
     }
-}
-
-@mixin kbq-badge-filled-color($badge) {
-    @include kbq-badge-style($badge);
-
-    border: transparent;
-}
-
-@mixin kbq-badge-outline-color($badge) {
-    @include kbq-badge-style($badge);
 
-    border-color: map.get($badge, border);
+    @if $type == filled {
+        border: transparent;
+    } @else {
+        border-color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-border, map.get($style, border));
+    }
 }
 
 @mixin kbq-badge-theme($theme) {
     $badge: map.get(map.get($theme, components), badge);
 
-    $filled: map.get($badge, filled);
-    $outline: map.get($badge, outline);
-
     .kbq-badge-filled {
-        $fade-on: map.get($filled, fade-on);
-
         &.kbq-badge_fade-contrast {
-            @include kbq-badge-filled-color(map.get($fade-on, contrast));
+            @include kbq-badge-style($badge, filled, fade-on, contrast);
         }
 
         &.kbq-badge_fade-theme {
-            @include kbq-badge-filled-color(map.get($fade-on, theme));
+            @include kbq-badge-style($badge, filled, fade-on, theme);
         }
 
         &.kbq-badge_fade-success {
-            @include kbq-badge-filled-color(map.get($fade-on, success));
+            @include kbq-badge-style($badge, filled, fade-on, success);
         }
 
         &.kbq-badge_fade-warning {
-            @include kbq-badge-filled-color(map.get($fade-on, warning));
+            @include kbq-badge-style($badge, filled, fade-on, warning);
         }
 
         &.kbq-badge_fade-error {
-            @include kbq-badge-filled-color(map.get($fade-on, error));
+            @include kbq-badge-style($badge, filled, fade-on, error);
         }
 
-        $fade-off: map.get($filled, fade-off);
-
         &.kbq-badge_theme {
-            @include kbq-badge-filled-color(map.get($fade-off, theme));
+            @include kbq-badge-style($badge, filled, fade-off, theme);
         }
 
         &.kbq-badge_success {
-            @include kbq-badge-filled-color(map.get($fade-off, success));
+            @include kbq-badge-style($badge, filled, fade-off, success);
         }
 
         &.kbq-badge_warning {
-            @include kbq-badge-filled-color(map.get($fade-off, warning));
+            @include kbq-badge-style($badge, filled, fade-off, warning);
         }
 
         &.kbq-badge_error {
-            @include kbq-badge-filled-color(map.get($fade-off, error));
+            @include kbq-badge-style($badge, filled, fade-off, error);
         }
     }
 
     .kbq-badge-outline {
-        $fade-on: map.get($outline, fade-on);
-
         &.kbq-badge_fade-contrast {
-            @include kbq-badge-outline-color(map.get($fade-on, contrast));
+            @include kbq-badge-style($badge, outline, fade-on, contrast);
         }
 
         &.kbq-badge_fade-theme {
-            @include kbq-badge-outline-color(map.get($fade-on, theme));
+            @include kbq-badge-style($badge, outline, fade-on, theme);
         }
 
         &.kbq-badge_fade-success {
-            @include kbq-badge-outline-color(map.get($fade-on, success));
+            @include kbq-badge-style($badge, outline, fade-on, success);
         }
 
         &.kbq-badge_fade-warning {
-            @include kbq-badge-outline-color(map.get($fade-on, warning));
+            @include kbq-badge-style($badge, outline, fade-on, warning);
         }
 
         &.kbq-badge_fade-error {
-            @include kbq-badge-outline-color(map.get($fade-on, error));
+            @include kbq-badge-style($badge, outline, fade-on, error);
         }
     }
 }
 
 @mixin kbq-badge-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-badge {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, badge-font-normal-default));
+        @include kbq-typography-css-variables(badge, normal-default);
 
         & .kbq-badge-caption {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, badge-font-normal-caption));
+            @include kbq-typography-css-variables(badge, normal-caption);
         }
     }
 
     .kbq-badge_compact {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, badge-font-compact-default));
+        @include kbq-typography-css-variables(badge, compact-default);
 
         & .kbq-badge-caption {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, badge-font-compact-caption));
+            @include kbq-typography-css-variables(badge, compact-caption);
         }
     }
 }

package/badge/badge.component.scss

@@ -1,18 +1,14 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-badge {
     display: inline-flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-
+    height: var(--kbq-badge-size-normal-height, map.get($tokens, badge-size-normal-height));
     text-align: center;
     white-space: nowrap;
 
@@ -20,64 +16,47 @@ $tokens: meta.module-variables(tokens) !default;
 
     box-sizing: border-box;
 
-    padding:
-        var(--kbq-badge-size-normal-vertical-padding, map.get($tokens, badge-size-normal-vertical-padding))
-        var(--kbq-badge-size-normal-horizontal-padding, map.get($tokens, badge-size-normal-horizontal-padding));
+    padding-right: kbq-css-variable(badge-size-normal-horizontal-padding);
+    padding-left: kbq-css-variable(badge-size-normal-horizontal-padding);
 
     border: {
-        width: var(--kbq-badge-size-normal-border-width, map.get($tokens, badge-size-normal-border-width));
-        radius: var(--kbq-badge-size-normal-border-radius, map.get($tokens, badge-size-normal-border-radius));
+        width: kbq-css-variable(badge-size-normal-border-width);
+        radius: kbq-css-variable(badge-size-normal-border-radius);
     }
 
     & .kbq-badge-caption {
-        padding-left:
-            var(--kbq-badge-size-normal-content-padding, map.get($tokens, badge-size-normal-content-padding));
+        padding-left: kbq-css-variable(badge-size-normal-content-padding);
     }
 
     & .kbq-icon_left {
-        margin-right: var(
-            --kbq-badge-size-normal-icon-left-margin-right,
-            map.get($tokens, badge-size-normal-icon-left-margin-right)
-        );
+        margin-right: kbq-css-variable(badge-size-normal-icon-left-margin-right);
     }
 
     & .kbq-icon_right {
-        margin-left: var(
-            --kbq-badge-size-normal-icon-right-margin-left,
-            map.get($tokens, badge-size-normal-icon-right-margin-left)
-        );
+        margin-left: kbq-css-variable(badge-size-normal-icon-right-margin-left);
     }
 
     &.kbq-badge_compact {
-        padding:
-            var(--kbq-badge-size-compact-vertical-padding, map.get($tokens, badge-size-compact-vertical-padding))
-            var(
-                --kbq-badge-size-compact-horizontal-padding,
-                map.get($tokens, badge-size-compact-horizontal-padding)
-            );
+        height: var(--kbq-badge-size-compact-height, map.get($tokens, badge-size-compact-height));
+
+        padding-right: kbq-css-variable(badge-size-compact-horizontal-padding);
+        padding-left: kbq-css-variable(badge-size-compact-horizontal-padding);
 
         border: {
-            width: var(--kbq-badge-size-compact-border-width, map.get($tokens, badge-size-compact-border-width));
-            radius: var(--kbq-badge-size-compact-border-radius, map.get($tokens, badge-size-compact-border-radius));
+            width: kbq-css-variable(badge-size-compact-border-width);
+            radius: kbq-css-variable(badge-size-compact-border-radius);
         }
 
         & .kbq-badge-caption {
-            padding-left:
-                var(--kbq-badge-size-compact-content-padding, map.get($tokens, badge-size-compact-content-padding));
+            padding-left: kbq-css-variable(badge-size-compact-content-padding);
         }
 
         & .kbq-icon_left {
-            margin-right: var(
-                --kbq-badge-size-compact-icon-left-margin-right,
-                map.get($tokens, badge-size-compact-icon-left-margin-right)
-            );
+            margin-right: kbq-css-variable(badge-size-compact-icon-left-margin-right);
         }
 
         & .kbq-icon_right {
-            margin-left: var(
-                --kbq-badge-size-compact-icon-right-margin-left,
-                map.get($tokens, badge-size-compact-icon-right-margin-left)
-            );
+            margin-left: kbq-css-variable(badge-size-compact-icon-right-margin-left);
         }
     }
 }