@koobiq/components 17.0.0-rc.5 → 17.0.0-rc.7

package/alert/_alert-theme.scss

@@ -1,21 +1,21 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/common/tokens' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-alert($component, $style-name, $color-name) {
-    $style: map.get($component, $style-name);
+@mixin kbq-alert-style($component, $type, $style-name) {
+    $style: map.get($component, $type, $style-name);
 
-    background: cssVar('alert-light-#{$style-name}-#{$color-name}-container-background');
+    background: kbq-css-variable(alert-#{$type}-#{$style-name}-background, map.get($style, background));
 
     .kbq-alert__title {
-        color: cssVar('alert-light-#{$style-name}-#{$color-name}-container-title');
+        color: kbq-css-variable(alert-#{$type}-#{$style-name}-title, map.get($style, title));
     }
 
     .kbq-alert__text {
-        color: cssVar('alert-light-#{$style-name}-#{$color-name}-container-text');
+        color: kbq-css-variable(alert-#{$type}-#{$style-name}-text, map.get($style, text));
     }
 }
 
@@ -28,61 +28,59 @@
 
     .kbq-alert.kbq-alert_default {
         &.kbq-alert_contrast {
-            @include kbq-alert($alert, default, contrast);
+            @include kbq-alert-style($alert, default, contrast);
         }
 
         &.kbq-alert_error {
-            @include kbq-alert($alert, default, error);
+            @include kbq-alert-style($alert, default, error);
         }
 
         &.kbq-alert_warning {
-            @include kbq-alert($alert, default, warning);
+            @include kbq-alert-style($alert, default, warning);
         }
 
         &.kbq-alert_success {
-            @include kbq-alert($alert, default, success);
+            @include kbq-alert-style($alert, default, success);
         }
 
         &.kbq-alert_theme {
-            @include kbq-alert($alert, default, theme);
+            @include kbq-alert-style($alert, default, theme);
         }
     }
 
     .kbq-alert.kbq-alert_colored {
         &.kbq-alert_contrast {
-            @include kbq-alert($alert, colored, contrast);
+            @include kbq-alert-style($alert, colored, contrast);
         }
 
         &.kbq-alert_error {
-            @include kbq-alert($alert, colored, error);
+            @include kbq-alert-style($alert, colored, error);
         }
 
         &.kbq-alert_warning {
-            @include kbq-alert($alert, colored, warning);
+            @include kbq-alert-style($alert, colored, warning);
         }
 
         &.kbq-alert_success {
-            @include kbq-alert($alert, colored, success);
+            @include kbq-alert-style($alert, colored, success);
         }
 
         &.kbq-alert_theme {
-            @include kbq-alert($alert, 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

@@ -4,15 +4,13 @@
 @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: cssVar(size-xxs);
+        margin-bottom: kbq-css-variable(size-xxs);
     }
 }
 
@@ -25,96 +23,96 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-alert.kbq-alert_normal {
-    border-radius: cssVar(alert-size-normal-container-border-radius);
+    border-radius: kbq-css-variable(alert-size-normal-container-border-radius);
 
     padding:
-        cssVar(alert-size-normal-container-padding-top)
-        cssVar(alert-size-normal-container-padding-right)
-        cssVar(alert-size-normal-container-padding-bottom)
-        cssVar(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:
-            cssVar(alert-size-normal-icon-margin-top)
-            cssVar(alert-size-normal-icon-margin-right)
-            cssVar(alert-size-normal-icon-margin-bottom)
-            cssVar(alert-size-normal-icon-margin-left);
+            kbq-css-variable(alert-size-normal-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 .kbq-icon {
-            margin-top: cssVar(alert-size-normal-icon-margin-addon-title);
+            margin-top: kbq-css-variable(alert-size-normal-icon-margin-addon-title);
         }
 
         display: inline-flex;
-        align-self: flex-start;
+        align-items: flex-start;
     }
 
     & .kbq-alert__content {
         padding:
-            cssVar(alert-size-normal-content-padding-top)
-            cssVar(alert-size-normal-content-padding-right)
-            cssVar(alert-size-normal-content-padding-bottom)
-            cssVar(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: cssVar(alert-size-normal-title-margin-bottom);
+        margin-bottom: kbq-css-variable(alert-size-normal-title-margin-bottom);
     }
 
     & .kbq-alert__button-stack {
-        padding-top: cssVar(alert-size-normal-button-stack-padding-top);
+        padding-top: kbq-css-variable(alert-size-normal-button-stack-padding-top);
 
-        padding-bottom: cssVar(alert-size-normal-button-stack-padding-bottom);
+        padding-bottom: kbq-css-variable(alert-size-normal-button-stack-padding-bottom);
     }
 
     & .kbq-alert__close-button {
-        margin-top: cssVar(alert-size-normal-close-button-margin-top);
-        margin-left: cssVar(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: cssVar(alert-size-compact-container-border-radius);
+    border-radius: kbq-css-variable(alert-size-compact-container-border-radius);
 
     padding:
-        cssVar(alert-size-compact-container-padding-top)
-        cssVar(alert-size-compact-container-padding-right)
-        cssVar(alert-size-compact-container-padding-bottom)
-        cssVar(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: cssVar(alert-size-compact-icon-margin-top);
+        margin-top: kbq-css-variable(alert-size-compact-icon-margin-top);
 
-        margin-right: cssVar(alert-size-compact-icon-margin-right);
+        margin-right: kbq-css-variable(alert-size-compact-icon-margin-right);
 
         &.kbq-alert__icon_title .kbq-icon {
-            margin-top: cssVar(alert-size-compact-icon-margin-addon-title);
+            margin-top: kbq-css-variable(alert-size-compact-icon-margin-addon-title);
         }
 
         display: inline-flex;
-        align-self: flex-start;
+        align-items: flex-start;
     }
 
     & .kbq-alert__content {
         padding:
-            cssVar(alert-size-compact-content-padding-top)
-            cssVar(alert-size-compact-content-padding-right)
-            cssVar(alert-size-compact-content-padding-bottom)
-            cssVar(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: cssVar(alert-size-compact-title-margin-bottom);
+        margin-bottom: kbq-css-variable(alert-size-compact-title-margin-bottom);
     }
 
     & .kbq-alert__button-stack {
-        padding-top: cssVar(alert-size-compact-button-stack-padding-top);
+        padding-top: kbq-css-variable(alert-size-compact-button-stack-padding-top);
 
-        padding-bottom: cssVar(alert-size-compact-button-stack-padding-bottom);
+        padding-bottom: kbq-css-variable(alert-size-compact-button-stack-padding-bottom);
     }
 
     & .kbq-alert__close-button {
-        margin-top: cssVar(alert-size-compact-close-button-margin-top);
+        margin-top: kbq-css-variable(alert-size-compact-close-button-margin-top);
 
-        margin-left: cssVar(alert-size-compact-close-button-margin-left);
+        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);
         }
     }
 }

package/badge/badge.component.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-badge {
@@ -21,63 +18,46 @@ $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));
+        kbq-css-variable(badge-size-normal-vertical-padding)
+        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)
-            );
+            kbq-css-variable(badge-size-compact-vertical-padding)
+            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);
         }
     }
 }

package/button/_button-base.scss

@@ -3,11 +3,9 @@
 
 @use '../core/styles/common/button';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 %kbq-button-base {
     @include button.kbq-button-reset();
 
@@ -21,8 +19,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     margin: 0; /* Safari */
 
-    height: var(--kbq-button-size-height, map.get($tokens, button-size-height));
-    min-height: var(--kbq-button-size-height, map.get($tokens, button-size-height));
+    height: kbq-css-variable(button-size-height);
+    min-height: kbq-css-variable(button-size-height);
 
     white-space: nowrap;
 
@@ -31,8 +29,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     vertical-align: baseline;
 
-    border: var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width)) solid transparent;
-    border-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+    border: kbq-css-variable(button-size-border-width) solid transparent;
+    border-radius: kbq-css-variable(button-size-border-radius);
 
     &::-moz-focus-inner {
         border: 0;
@@ -56,14 +54,10 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .kbq-icon_left {
-        margin-right: var(
-            --kbq-button-size-content-padding, map.get($tokens, button-size-content-padding)
-        );
+        margin-right: kbq-css-variable(button-size-content-padding);
     }
 
     & .kbq-icon_right {
-        margin-left: var(
-            --kbq-button-size-content-padding, map.get($tokens, button-size-content-padding)
-        );
+        margin-left: kbq-css-variable(button-size-content-padding);
     }
 }