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

package/core/styles/common/_button.scss

@@ -1,10 +1,8 @@
 @use 'vendor-prefixes';
 
-
 @mixin kbq-button-reset {
     @include vendor-prefixes.user-select(none);
     cursor: pointer;
     outline: none;
     border: none;
 }
-

package/core/styles/common/_clearfix.scss

@@ -3,7 +3,7 @@
 
     &:before,
     &:after {
-        content: "";
+        content: '';
         display: table;
     }
 

package/core/styles/common/_groups.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
-
+@use '../common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -77,12 +77,11 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     flex-direction: column;
 
-    /* stylelint-disable no-descending-specificity */
     > .kbq-group-item {
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
 
-            border-top-right-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+            border-top-right-radius: kbq-css-variable(button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-bottom-radius(0);
@@ -92,10 +91,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:last-child:not(:first-child) {
             @include border-top-radius(0);
 
-            border-bottom-left-radius: var(
-                --kbq-button-size-border-radius,
-                map.get($tokens, button-size-border-radius)
-            );
+            border-bottom-left-radius: kbq-css-variable(button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-top-radius(0);
@@ -114,6 +110,4 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-group-item + .kbq-group-item {
         margin-top: calc(-1 * var(--kbq-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
     }
-    /* stylelint-enable no-descending-specificity */
 }
-

package/core/styles/common/_list.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
-
+@use './tokens' as *;
 
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
@@ -29,7 +29,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    box-sizing: border-box;
+    box-sizing: content-box;
     overflow: hidden;
 
     // Must remove wrapper when lines are empty or it takes up horizontal
@@ -48,94 +48,54 @@
 }
 
 @mixin kbq-list-text() {
-    $tokens: meta.module-variables(tokens) !default;
-
     @include kbq-line-wrapper-base();
     display: inline-block;
 
     @include kbq-truncate-line();
-
-    padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
-    padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
 }
 
 // This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
 @mixin kbq-list-item-base() {
-    $tokens: meta.module-variables(tokens) !default;
-
-    $outline-width: map.get($tokens, list-size-container-focus-outline-width);
-
-    $padding-vertical: map.get($tokens, list-size-container-padding-vertical);
-    $padding-left: map.get($tokens, list-size-container-padding-left);
-    $padding-right: map.get($tokens, list-size-container-padding-right);
-
     position: relative;
-
     display: flex;
     flex-direction: row;
     align-items: center;
-
     box-sizing: border-box;
-
     outline: none;
     -webkit-tap-highlight-color: transparent;
-
     min-height: 32px;
+    gap: kbq-css-variable(size-s);
+
+    border: kbq-css-variable(size-3xs) solid transparent;
 
-    gap: var(
-        --kbq-list-size-container-content-gap-horizontal, map.get($tokens, list-size-container-content-gap-horizontal)
-    );
-
-    border-width: var(--kbq-list-size-container-focus-outline-width, $outline-width);
-    border-style: solid;
-    border-color: transparent;
-
-    padding:
-        calc(
-            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
-        )
-        calc(
-            var(--kbq-list-size-container-padding-right, $padding-right) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
-        )
-        calc(
-            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
-        )
-        calc(
-            var(--kbq-list-size-container-padding-left, $padding-left) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
-        );
+    padding-top: kbq-css-variable(size-xxs);
+    padding-left: kbq-css-variable(size-m);
+    padding-right: kbq-css-variable(size-m);
+    padding-bottom: kbq-css-variable(size-xxs);
 
     .kbq-list-text {
         @include kbq-list-text();
     }
 
     .kbq-list-option-caption {
-        padding-top: var(
-            --kbq-list-size-container-content-gap-vertical,
-            map.get($tokens, list-size-container-content-gap-vertical)
-        );
+        padding-top: kbq-css-variable(size-3xs);
     }
 }
 
 @mixin kbq-list-header-base() {
-    $tokens: meta.module-variables(tokens) !default;
-
     display: flex;
     flex-direction: row;
     align-items: center;
-
     box-sizing: border-box;
-
     min-height: 32px;
 
-    padding:
-        var(--kbq-list-size-header-padding-top, map.get($tokens, list-size-header-padding-top))
-        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal))
-        var(--kbq-list-size-header-padding-bottom, map.get($tokens, list-size-header-padding-bottom))
-        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal));
+    border-left: kbq-css-variable(size-3xs) solid transparent;
+    border-right: kbq-css-variable(size-3xs) solid transparent;
+
+    padding-top: kbq-css-variable(size-xs);
+    padding-left: kbq-css-variable(size-m);
+    padding-right: kbq-css-variable(size-m);
+    padding-bottom: kbq-css-variable(size-3xs);
 
     .kbq-list-text {
         @include kbq-list-text();
@@ -143,21 +103,19 @@
 }
 
 @mixin kbq-list-subheading-base() {
-    $tokens: meta.module-variables(tokens) !default;
-
     display: flex;
     flex-direction: row;
     align-items: center;
-
     box-sizing: border-box;
-
     min-height: 32px;
 
-    padding:
-        var(--kbq-list-size-subheading-padding-top, map.get($tokens, list-size-subheading-padding-top))
-        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal))
-        var(--kbq-list-size-subheading-padding-bottom, map.get($tokens, list-size-subheading-padding-bottom))
-        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal));
+    border-left: kbq-css-variable(size-3xs) solid transparent;
+    border-right: kbq-css-variable(size-3xs) solid transparent;
+
+    padding-top: kbq-css-variable(size-m);
+    padding-left: kbq-css-variable(size-m);
+    padding-right: kbq-css-variable(size-m);
+    padding-bottom: kbq-css-variable(size-xxs);
 
     .kbq-list-text {
         @include kbq-list-text();

package/core/styles/common/_overlay.scss

@@ -6,7 +6,7 @@ $overlay-z-index: 1000 !default;
 $overlay-backdrop-z-index: 1000 !default;
 
 // Background color for all of the backdrops
-$overlay-backdrop-color: rgba(0, 0, 0, 0.50) !default;
+$overlay-backdrop-color: rgba(0, 0, 0, 0.5) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;
@@ -116,7 +116,9 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     .cdk-overlay-transparent-backdrop {
         // Define a transition on the visibility so that the `transitionend` event can fire immediately.
-        transition: visibility 1ms linear, opacity 1ms linear;
+        transition:
+            visibility 1ms linear,
+            opacity 1ms linear;
         visibility: hidden;
         opacity: 1;
 
@@ -174,4 +176,3 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         overflow-y: scroll;
     }
 }
-

package/core/styles/common/_popup.scss

@@ -1,11 +1,11 @@
 @use 'sass:map';
-
+@use './tokens' as *;
 
 @mixin popup-params($theme) {
-    $popup: map.get(map.get($theme, components), popup);
+    $popup: map.get($theme, components, popup);
 
-    box-shadow: map.get($popup, shadow);
-    border-color: map.get($popup, border);
+    box-shadow: kbq-css-variable(popup-shadow, map.get($popup, shadow));
+    border-color: kbq-css-variable(popup-border, map.get($popup, border));
 
-    background-color: map.get($popup, background);
+    background-color: kbq-css-variable(popup-background, map.get($popup, background));
 }

package/core/styles/common/_rtl.scss

@@ -5,7 +5,7 @@
 @mixin rtl($prop, $ltr-value, $rtl-value) {
     #{$prop}: $ltr-value;
 
-    [dir=rtl] & {
+    [dir='rtl'] & {
         #{$prop}: $rtl-value;
     }
 }
@@ -13,7 +13,7 @@
 @mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
     #{$ltr-prop}: $value;
 
-    [dir=rtl] & {
+    [dir='rtl'] & {
         #{$ltr-prop}: $reset-value;
         #{$rtl-prop}: $value;
     }
@@ -22,11 +22,11 @@
 // To reverse padding (top left bottom right) -> (top right bottom left)
 @function rtl-value($list) {
     @if list.length($list) == 4 {
-        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2)
+        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2);
     }
 
     @if list.length($list) == 5 {
-        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2) list.nth($list, 5)
+        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2) list.nth($list, 5);
     }
 
     @return $list;

package/core/styles/common/_select.scss

@@ -3,11 +3,10 @@
 
 @use '../common/vendor-prefixes';
 @use '../tokens';
-
+@use './tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-
 %kbq-select-base {
     box-sizing: border-box;
 
@@ -45,8 +44,7 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: pointer;
 
         height: calc(
-            var(--kbq-form-field-size-height, $height) -
-            (var(--kbq-form-field-size-border-width, $border-width) * 2)
+            var(--kbq-form-field-size-height, $height) - (var(--kbq-form-field-size-border-width, $border-width) * 2)
         );
     }
 
@@ -55,22 +53,29 @@ $tokens: meta.module-variables(tokens) !default;
         & .kbq-select__matcher {
             $padding-vertical: map.get($tokens, select-size-single-padding-vertical);
 
-            padding:
-                calc(
-                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+            padding: calc(
+                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-single-padding-right, map.get($tokens, select-size-single-padding-right)) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-single-padding-right, map.get($tokens, select-size-single-padding-right)) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-single-padding-left, map.get($tokens, select-size-single-padding-left)) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-single-padding-left, map.get($tokens, select-size-single-padding-left)) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 );
         }
     }
@@ -79,22 +84,29 @@ $tokens: meta.module-variables(tokens) !default;
         & .kbq-select__matcher {
             $padding-vertical: map.get($tokens, select-size-multiple-padding-vertical);
 
-            padding:
-                calc(
-                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+            padding: calc(
+                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-multiple-padding-right, map.get($tokens,select-size-multiple-padding-right)) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-multiple-padding-right, map.get($tokens, select-size-multiple-padding-right)) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-multiple-padding-left, map.get($tokens, select-size-multiple-padding-left)) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-multiple-padding-left, map.get($tokens, select-size-multiple-padding-left)) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 );
 
             .kbq-select__match-container {
@@ -108,19 +120,17 @@ $tokens: meta.module-variables(tokens) !default;
 
                 height: calc(
                     var(--kbq-form-field-size-height, $height) -
-                    (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                        (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
                 );
 
                 max-height: calc(
                     var(--kbq-form-field-size-height, $height) -
-                    (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                        (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
                 );
 
-                gap: var(--kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap));
+                gap: kbq-css-variable(select-size-multiple-content-gap);
 
-                margin-right: var(
-                    --kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap)
-                );
+                margin-right: kbq-css-variable(select-size-multiple-content-gap);
             }
         }
     }
@@ -135,9 +145,7 @@ $tokens: meta.module-variables(tokens) !default;
             flex: 0 0 70px;
             align-self: center;
             padding-left: 4px;
-            padding-right: var(
-                --kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap)
-            );
+            padding-right: kbq-css-variable(select-size-multiple-content-gap);
 
             text-align: right;
         }
@@ -175,9 +183,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     overflow: hidden;
 
-    border-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
+    border-radius: kbq-css-variable(select-panel-size-border-radius);
 
     // Override optgroup and option to scale based on font-size of the trigger.
     .kbq-optgroup-label,
@@ -194,15 +200,15 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
 
         max-width: 100%;
-        height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
+        height: kbq-css-variable(option-size-height);
 
         cursor: default;
         outline: none;
 
-        padding-left: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-        padding-right: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+        padding-left: kbq-css-variable(option-size-horizontal-padding);
+        padding-right: kbq-css-variable(option-size-horizontal-padding);
 
-        border: var(--kbq-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
+        border: kbq-css-variable(option-size-border-width) solid transparent;
     }
 
     .kbq-select__search-container {
@@ -214,7 +220,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 %kbq-select-content {
-    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
+    max-height: kbq-css-variable(select-panel-size-max-height);
     padding: 4px 0;
     overflow: hidden auto;
 }
@@ -229,5 +235,5 @@ $tokens: meta.module-variables(tokens) !default;
     border-top-width: 1px;
     border-top-style: solid;
 
-    padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+    padding: kbq-css-variable(size-xxs) kbq-css-variable(size-m);
 }

package/core/styles/common/_tokens.scss

@@ -0,0 +1,47 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:list';
+
+@use '../tokens';
+
+$tokens: meta.module-variables(tokens) !default;
+
+@function kbq-css-variable($name, $value: null) {
+    @if $value {
+        @return var(--kbq-#{$name}, $value);
+    } @else {
+        @return var(--kbq-#{$name}, map.get($tokens, $name));
+    }
+}
+
+@function getToken($name) {
+    @return map.get($tokens, $name);
+}
+
+@mixin kbq-css-font-variable($component, $component-property, $font-property, $font) {
+    #{$font-property}: var(
+        --kbq-#{$component}-#{$font}#{$component-property}-#{$font-property},
+        map.get($tokens, #{$component}-#{$font}#{$component-property}-#{$font-property})
+    );
+}
+
+@mixin kbq-typography-css-variables($component, $property) {
+    @include kbq-css-font-variable($component, $property, font-size, font-);
+    @include kbq-css-font-variable($component, $property, font-weight, font-);
+    @include kbq-css-font-variable($component, $property, line-height, font-);
+    @include kbq-css-font-variable($component, $property, font-family, font-);
+    @include kbq-css-font-variable($component, $property, text-transform, font-);
+    @include kbq-css-font-variable($component, $property, font-feature-settings, font-);
+    @include kbq-css-font-variable($component, $property, letter-spacing, font-);
+}
+
+@mixin kbq-typography-level-to-styles_css-variables($component, $property) {
+    @include kbq-css-font-variable($component, $property, font-size, '');
+    @include kbq-css-font-variable($component, $property, font-weight, '');
+    @include kbq-css-font-variable($component, $property, line-height, '');
+    @include kbq-css-font-variable($component, $property, font-family, '');
+    @include kbq-css-font-variable($component, $property, text-transform, '');
+    @include kbq-css-font-variable($component, $property, font-feature-settings, '');
+    @include kbq-css-font-variable($component, $property, letter-spacing, '');
+}

package/core/styles/functions/_number.scss

@@ -1,17 +1,18 @@
 @use 'sass:math';
-
+@use 'sass:list';
+@use 'sass:string';
 
 @function unit-length($number, $unit) {
     $strings: 'px' 'cm' 'mm' '%' 'ch' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
-    $units:   1px  1cm  1mm  1%  1ch  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
-    $index: index($strings, $unit);
+    $units: 1px 1cm 1mm 1% 1ch 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax;
+    $index: list.index($strings, $unit);
 
     @if not $index {
         @warn "Invalid unit `#{$unit}`.";
         @return false;
     }
 
-    @return $number * nth($units, $index);
+    @return $number * list.nth($units, $index);
 }
 
 // @author Hugo Giraudel
@@ -19,7 +20,7 @@
 @function number($string) {
     // Matrices
     $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
-    $numbers:  0   1   2   3   4   5   6   7   8   9;
+    $numbers: 0 1 2 3 4 5 6 7 8 9;
 
     // Result
     $result: 0;
@@ -27,31 +28,25 @@
     $minus: false;
 
     // Looping through all characters
-    @for $i from 1 through str-length($string) {
-        $character: str-slice($string, $i, $i);
-        $index: index($strings, $character);
+    @for $i from 1 through string.length($string) {
+        $character: string.slice($string, $i, $i);
+        $index: list.index($strings, $character);
 
         @if $character == '-' {
             $minus: true;
-        }
-
-        @else if $character == '.' {
+        } @else if $character == '.' {
             $divider: 1;
-        }
-
-        @else {
+        } @else {
             @if not $index {
                 $result: if($minus, $result * -1, $result);
-                @return unit-length($result, str-slice($string, $i));
+                @return unit-length($result, string.slice($string, $i));
             }
 
-            $number: nth($numbers, $index);
+            $number: list.nth($numbers, $index);
 
             @if $divider == 0 {
                 $result: $result * 10;
-            }
-
-            @else {
+            } @else {
                 // Move the decimal dot to the left
                 $divider: $divider * 10;
                 $number: math.div($number, $divider);

package/core/styles/functions/_string.scss

@@ -1,19 +1,18 @@
-@use 'sass:string';
-
-
-/// Replace `$search` with `$replace` in `$string`
-/// @author Kitty Giraudel
-/// @param {String} $string - Initial string
-/// @param {String} $search - Substring to replace
-/// @param {String} $replace ('') - New value
-/// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
-    $index: str-index($string, $search);
-    
-    @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace +
-            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-    }
-    
-    @return $string;
-}
+@use 'sass:string';
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Kitty Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+    $index: string.index($string, $search);
+
+    @if $index {
+        @return string.slice($string, 1, $index - 1) + $replace +
+            str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
+
+    @return $string;
+}