@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

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;
+}

package/core/styles/functions/_timing.scss

@@ -2,29 +2,29 @@
  * CSS cubic-bezier timing functions
  * http://bourbon.io/docs/#timing-functions
  */
-$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
-$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
-$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
-$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
-$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
-$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
-$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
-$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+$ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+$ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+$ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+$ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
 
-$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
-$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
-$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
-$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
-$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
-$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
-$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
-$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+$ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
+$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+$ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
-$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
-$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
-$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
-$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
-$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
-$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
-$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
-$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
+$ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);