@koobiq/components 17.0.0-rc.6 → 17.0.0-rc.8

package/alert/_alert-theme.scss

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

package/alert/alert.component.scss

@@ -1,18 +1,16 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-alert {
     display: flex;
 
     box-sizing: border-box;
 
     & .kbq-alert__content_title {
-        margin-bottom: map.get($tokens, size-xxs);
+        margin-bottom: kbq-css-variable(size-xxs);
     }
 }
 
@@ -25,41 +23,25 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-alert.kbq-alert_normal {
-    border-radius: var(
-        --kbq-alert-size-normal-container-border-radius,
-        map.get($tokens, alert-size-normal-container-border-radius)
-    );
+    border-radius: kbq-css-variable(alert-size-normal-container-border-radius);
 
     padding:
-        var(
-            --kbq-alert-size-normal-container-padding-top,
-            map.get($tokens, alert-size-normal-container-padding-top)
-        )
-        var(
-            --kbq-alert-size-normal-container-padding-right,
-            map.get($tokens, alert-size-normal-container-padding-right)
-        )
-        var(
-            --kbq-alert-size-normal-container-padding-bottom,
-            map.get($tokens, alert-size-normal-container-padding-bottom)
-        )
-        var(
-            --kbq-alert-size-normal-container-padding-left,
-            map.get($tokens, alert-size-normal-container-padding-left)
-        );
+        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:
-            var(--kbq-alert-size-normal-icon-margin-top, map.get($tokens, alert-size-normal-icon-margin-top))
-            var(--kbq-alert-size-normal-icon-margin-right, map.get($tokens, alert-size-normal-icon-margin-right))
-            var(--kbq-alert-size-normal-icon-margin-bottom, map.get($tokens, alert-size-normal-icon-margin-bottom))
-            var(--kbq-alert-size-normal-icon-margin-left, map.get($tokens, alert-size-normal-icon-margin-left));
-
-        &.kbq-alert__icon_title .kbq-icon {
-            margin-top: var(
-                --kbq-alert-size-normal-icon-margin-addon-title,
-                map.get($tokens, alert-size-normal-icon-margin-addon-title)
-            );
+            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;
@@ -68,92 +50,47 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .kbq-alert__content {
         padding:
-            var(
-                --kbq-alert-size-normal-content-padding-top,
-                map.get($tokens, alert-size-normal-content-padding-top)
-            )
-            var(
-                --kbq-alert-size-normal-content-padding-right,
-                map.get($tokens, alert-size-normal-content-padding-right)
-            )
-            var(
-                --kbq-alert-size-normal-content-padding-bottom,
-                map.get($tokens, alert-size-normal-content-padding-bottom)
-            )
-            var(
-                --kbq-alert-size-normal-content-padding-left,
-                map.get($tokens, alert-size-normal-content-padding-left)
-            );
+            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: var(
-            --kbq-alert-size-normal-title-margin-bottom,
-            map.get($tokens, alert-size-normal-title-margin-bottom)
-        );
+        margin-bottom: kbq-css-variable(alert-size-normal-title-margin-bottom);
     }
 
     & .kbq-alert__button-stack {
-        padding-top: var(
-            --kbq-alert-size-normal-button-stack-padding-top,
-            map.get($tokens, alert-size-normal-button-stack-padding-top)
-        );
-
-        padding-bottom: var(
-            --kbq-alert-size-normal-button-stack-padding-bottom,
-            map.get($tokens, alert-size-normal-button-stack-padding-bottom)
-        );
+        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: var(
-            --kbq-alert-size-normal-close-button-margin-top,
-            map.get($tokens, alert-size-normal-close-button-margin-top)
-        );
-        margin-left: var(
-            --kbq-alert-size-normal-close-button-margin-left,
-            map.get($tokens, alert-size-normal-close-button-margin-left)
-        );
+        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.kbq-alert_compact {
-    border-radius: var(
-        --kbq-alert-size-compact-container-border-radius,
-        map.get($tokens, alert-size-compact-container-border-radius)
-    );
+    border-radius: kbq-css-variable(alert-size-compact-container-border-radius);
 
     padding:
-        var(
-            --kbq-alert-size-compact-container-padding-top,
-            map.get($tokens, alert-size-compact-container-padding-top)
-        )
-        var(
-            --kbq-alert-size-compact-container-padding-right,
-            map.get($tokens, alert-size-compact-container-padding-right)
-        )
-        var(
-            --kbq-alert-size-compact-container-padding-bottom,
-            map.get($tokens, alert-size-compact-container-padding-bottom)
-        )
-        var(
-            --kbq-alert-size-compact-container-padding-left,
-            map.get($tokens, alert-size-compact-container-padding-left)
-        );
+        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: var(--kbq-alert-size-compact-icon-margin-top, map.get($tokens, alert-size-compact-icon-margin-top));
-
-        margin-right: var(
-            --kbq-alert-size-compact-icon-margin-right,
-            map.get($tokens, alert-size-compact-icon-margin-right)
-        );
-
-        &.kbq-alert__icon_title .kbq-icon {
-            margin-top: var(
-                --kbq-alert-size-compact-icon-margin-addon-title,
-                map.get($tokens, alert-size-compact-icon-margin-addon-title)
-            );
+
+        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;
@@ -162,52 +99,23 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .kbq-alert__content {
         padding:
-            var(
-                --kbq-alert-size-compact-content-padding-top,
-                map.get($tokens, alert-size-compact-content-padding-top)
-            )
-            var(
-                --kbq-alert-size-compact-content-padding-right,
-                map.get($tokens, alert-size-compact-content-padding-right)
-            )
-            var(
-                --kbq-alert-size-compact-content-padding-bottom,
-                map.get($tokens, alert-size-compact-content-padding-bottom)
-            )
-            var(
-                --kbq-alert-size-compact-content-padding-left,
-                map.get($tokens, alert-size-compact-content-padding-left)
-            );
+            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: var(
-            --kbq-alert-size-compact-title-margin-bottom,
-            map.get($tokens, alert-size-compact-title-margin-bottom)
-        );
+        margin-bottom: kbq-css-variable(alert-size-compact-title-margin-bottom);
     }
 
     & .kbq-alert__button-stack {
-        padding-top: var(
-            --kbq-alert-size-compact-button-stack-padding-top,
-            map.get($tokens, alert-size-compact-button-stack-padding-top)
-        );
-
-        padding-bottom: var(
-            --kbq-alert-size-compact-button-stack-padding-bottom,
-            map.get($tokens, alert-size-compact-button-stack-padding-bottom)
-        );
+        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: var(
-            --kbq-alert-size-compact-close-button-margin-top,
-            map.get($tokens, alert-size-compact-close-button-margin-top)
-        );
-
-        margin-left: var(
-            --kbq-alert-size-compact-close-button-margin-left,
-            map.get($tokens, alert-size-compact-close-button-margin-left)
-        );
+        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,14 @@
 
 @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,10 +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 {
@@ -21,16 +18,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;
@@ -42,8 +35,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))
+            kbq-css-variable(autocomplete-size-panel-border-radius)
+            kbq-css-variable(autocomplete-size-panel-border-radius)
             0 0;
     }
 

package/badge/_badge-theme.scss

@@ -2,122 +2,108 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-badge-style($badge) {
-    color: map.get($badge, color);
-    background: map.get($badge, background);
+@mixin kbq-badge-style($component, $type, $sub-type, $style-name) {
+    $style: map.get($component, $type, $sub-type, $style-name);
+
+    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: map.get($component, 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);
         }
     }
 }