@progress/kendo-theme-core 12.2.1-dev.0 → 12.2.1

package/scss/components/timepicker/_layout.scss

@@ -10,8 +10,3 @@
     }
 
 }
-
-
-@mixin kendo-time-picker--layout() {
-    @include kendo-time-picker--layout-base();
-}

package/scss/components/timepicker/_theme.scss

@@ -4,8 +4,3 @@
     .k-time-picker {}
 
 }
-
-
-@mixin kendo-time-picker--theme() {
-    @include kendo-time-picker--theme-base();
-}

package/scss/components/timeselector/_layout.scss

@@ -1,10 +1,10 @@
 @use "sass:map";
 @use "sass:list";
 @use "../../color-system/_constants.scss" as *;
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../button/_variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-time-selector--layout-base() {
 
@@ -248,8 +248,3 @@
     }
 
 }
-
-
-@mixin kendo-time-selector--layout() {
-    @include kendo-time-selector--layout-base();
-}

package/scss/components/timeselector/_theme.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
-@use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_functions.import.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../color-system/_functions.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-time-selector--theme-base() {
@@ -76,8 +76,3 @@
     }
 
 }
-
-
-@mixin kendo-time-selector--theme() {
-    @include kendo-time-selector--theme-base();
-}

package/scss/components/toolbar/_layout.scss

@@ -1,12 +1,12 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
-@use "../../typography/index.import.scss" as *;
-@use "../../spacing/index.import.scss" as *;
-@use "../../mixins/index.import.scss" as *;
+@use "../../typography/index.scss" as *;
+@use "../../spacing/index.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-toolbar--layout-base() {
 
@@ -367,8 +367,3 @@
     }
 
 }
-
-
-@mixin kendo-toolbar--layout() {
-    @include kendo-toolbar--layout-base();
-}

package/scss/components/toolbar/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../menu/_variables.scss" as *;
 
@@ -186,8 +186,3 @@
         }
     }
 }
-
-
-@mixin kendo-toolbar--theme() {
-    @include kendo-toolbar--theme-base();
-}

package/scss/components/tooltip/_layout.scss

@@ -1,8 +1,8 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-tooltip--layout-base() {
 
@@ -116,8 +116,3 @@
     }
 
 }
-
-
-@mixin kendo-tooltip--layout() {
-    @include kendo-tooltip--layout-base();
-}

package/scss/components/tooltip/_theme.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-tooltip--theme-base() {
@@ -34,8 +34,3 @@
     }
 
 }
-
-
-@mixin kendo-tooltip--theme() {
-    @include kendo-tooltip--theme-base();
-}

package/scss/components/treelist/_layout.scss

@@ -1,6 +1,6 @@
 @use "../icons/_variables.scss" as *;
 @use "./variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-treelist--layout-base() {
 
@@ -104,8 +104,3 @@
     }
 
 }
-
-
-@mixin kendo-treelist--layout() {
-    @include kendo-treelist--layout-base();
-}

package/scss/components/treelist/_theme.scss

@@ -11,8 +11,3 @@
     }
 
 }
-
-
-@mixin kendo-treelist--theme() {
-    @include kendo-treelist--theme-base();
-}

package/scss/components/treeview/_layout.scss

@@ -1,10 +1,10 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
-@use "../../mixins/index.import.scss" as *;
-@use "../../spacing/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../spacing/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-treeview--layout-base() {
 
@@ -170,8 +170,3 @@
     }
 
 }
-
-
-@mixin kendo-treeview--layout() {
-    @include kendo-treeview--layout-base();
-}

package/scss/components/treeview/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-treeview--theme-base() {
@@ -80,8 +80,3 @@
     }
 
 }
-
-
-@mixin kendo-treeview--theme() {
-    @include kendo-treeview--theme-base();
-}

package/scss/components/typography/_layout.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../../typography/index.import.scss" as *;
+@use "../../typography/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../../_variables.scss" as *;
 
@@ -122,8 +122,3 @@
         }
     }
 }
-
-
-@mixin kendo-typography--layout() {
-    @include kendo-typography--layout-base();
-}

package/scss/components/typography/_theme.scss

@@ -1,5 +1,5 @@
-@use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_functions.import.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../color-system/_functions.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-typography--theme-base() {
@@ -22,8 +22,3 @@
     }
 
 }
-
-
-@mixin kendo-typography--theme() {
-    @include kendo-typography--theme-base();
-}

package/scss/components/upload/_layout.scss

@@ -1,8 +1,8 @@
 @use "../../color-system/_constants.scss" as *;
-@use "../../spacing/index.import.scss" as *;
+@use "../../spacing/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-upload--layout-base() {
 
@@ -248,8 +248,3 @@
     }
 
 }
-
-
-@mixin kendo-upload--layout() {
-    @include kendo-upload--layout-base();
-}

package/scss/components/upload/_theme.scss

@@ -1,5 +1,5 @@
-@use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_functions.import.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../color-system/_functions.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-upload--theme-base() {
@@ -104,8 +104,3 @@
     }
 
 }
-
-
-@mixin kendo-upload--theme() {
-    @include kendo-upload--theme-base();
-}

package/scss/components/validator/_layout.scss

@@ -1,5 +1,5 @@
 @use "../tooltip/_variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-validator--layout-base() {
 
@@ -24,8 +24,3 @@
     }
 
 }
-
-
-@mixin kendo-validator--layout() {
-    @include kendo-validator--layout-base();
-}

package/scss/components/validator/_theme.scss

@@ -4,8 +4,3 @@
     .k-validator {}
 
 }
-
-
-@mixin kendo-validator--theme() {
-    @include kendo-validator--theme-base();
-}

package/scss/components/virtual-scroller/_layout.scss

@@ -1,4 +1,4 @@
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-virtual-scroller--layout-base() {
 
@@ -35,8 +35,3 @@
     }
 
 }
-
-
-@mixin kendo-virtual-scroller--layout() {
-    @include kendo-virtual-scroller--layout-base();
-}

package/scss/components/virtual-scroller/_theme.scss

@@ -4,8 +4,3 @@
     .k-virtual-scroller {}
 
 }
-
-
-@mixin kendo-virtual-scroller--theme() {
-    @include kendo-virtual-scroller--theme-base();
-}

package/scss/components/window/_layout.scss

@@ -1,7 +1,7 @@
 @use "sass:list";
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-window--layout-base() {
@@ -175,8 +175,3 @@
     }
 
 }
-
-
-@mixin kendo-window--layout() {
-    @include kendo-window--layout-base();
-}

package/scss/components/window/_theme.scss

@@ -1,6 +1,6 @@
-@use "../../color-system/_functions.import.scss" as *;
-@use "../../mixins/index.import.scss" as *;
-@use "../../functions/index.import.scss" as *;
+@use "../../color-system/_functions.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
@@ -41,8 +41,3 @@
     }
 
 }
-
-
-@mixin kendo-window--theme() {
-    @include kendo-window--theme-base();
-}

package/scss/components/wizard/_layout.scss

@@ -123,8 +123,3 @@
     }
 
 }
-
-
-@mixin kendo-wizard--layout() {
-    @include kendo-wizard--layout-base();
-}

package/scss/components/wizard/_theme.scss

@@ -10,8 +10,3 @@
     }
 
 }
-
-
-@mixin kendo-wizard--theme() {
-    @include kendo-wizard--theme-base();
-}

package/scss/functions/{_color.import.scss → _color.scss}

@@ -7,17 +7,6 @@
 $kendo-light-color-level-step: 8% !default;
 $kendo-dark-color-level-step: 16% !default;
 
-/// Returns the alpha channel of a color.
-/// @param {Color} $color - The color to get the alpha channel for.
-/// @return {Number} - The alpha channel of the color.
-///
-/// @example scss - Usage
-///   @debug k-color-alpha( rgba( 0, 0, 0, 0.5 ) ); // => 0.5
-///   @debug k-color-alpha( #000 ); // => 1
-@function k-color-alpha( $color ) {
-    @return color.alpha( $color );
-}
-
 /// Returns the red channel of a color.
 /// @param {Color} $color - The color to get the red channel for.
 /// @return {Number} - The red channel of the color.
@@ -163,42 +152,6 @@ $kendo-dark-color-level-step: 16% !default;
     @return color.adjust( $color, $saturation: - $amount );
 }
 
-/// Returns a gray color with the same lightness as the input color.
-/// @param {Color} $color - The color to convert to grayscale.
-/// @return {Color} - The grayscale color.
-///
-/// @example scss - Usage
-///   @debug k-color-grayscale( #f00 ); // => #808080
-@function k-color-grayscale( $color ) {
-    @return color.grayscale( $color );
-}
-
-/// Returns the RGB complement of a color. This identical to adjusting the hue
-/// by 180 degrees.
-/// @param {Color} $color - The color to get the complement for.
-/// @return {Color} - The complement color.
-///
-/// @example scss - Usage
-///   @debug k-color-complement( #f00 ); // => #00ffff
-@function k-color-complement( $color ) {
-    @return color.complement( $color );
-}
-
-/// Returns the inverse of a color.
-/// @param {Color} $color - The color to invert.
-/// @return {Color} - The inverted color.
-///
-/// @example scss - Usage
-///   @debug k-color-invert( #f00 ); // => #00ffff
-@function k-color-invert( $color ) {
-    @return color.invert( $color );
-}
-
-/// Set a specific jump point for requesting color jumps
-/// @group color-system
-/// @access private
-$kendo-color-level-step: 8% !default;
-
 @function k-color-level( $color, $level: 0, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
     $_color-level-step: if( $_dark-theme, $kendo-dark-color-level-step, $kendo-light-color-level-step );
@@ -316,7 +269,7 @@ $kendo-color-level-step: 8% !default;
 /// @example scss - Usage
 ///   @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
 @function k-rgba-to-mix( $color, $bg ) {
-    $percent: k-color-alpha( $color ) * 100%;
+    $percent: color.alpha( $color ) * 100%;
 
     @return k-color-mix( rgba( $color, 1 ), $bg, $percent );
 }

package/scss/functions/_list.scss

@@ -0,0 +1,36 @@
+@use "sass:list";
+
+/// Checks whether `$list` contains `$value`.
+/// @param {List} $list - The list to check.
+/// @param {Any} $value - The value to check for.
+/// @return {Boolean} - Whether `$list` contains `$value`.
+///
+/// @example scss - Usage
+///   @debug k-list-includes( ( "foo", "bar" ), "foo" ); // => true
+///   @debug k-list-includes( ( "foo", "bar" ), "baz" ); // => false
+@function k-list-includes($list, $value) {
+    @return list.index($list, $value) != null;
+}
+
+/// Reverse the order of items in `$list`.
+/// @param {List} $list - The list to reverse.
+/// @return {List} - The reversed list.
+///
+/// @example scss - Usage
+///   @debug k-list-reverse( ( "foo", "bar" ) ); // => "bar, foo"
+@function k-list-reverse($list: null) {
+    $result: ();
+
+    @if ($list) {
+        $len: list.length($list);
+
+        @for $i from $len through 1 {
+            $result: list.append($result, list.nth($list, $i));
+        }
+
+        @return $result;
+    }
+
+    @warn "No list passed.";
+    @return $result;
+}

package/scss/functions/_map.scss

@@ -0,0 +1,99 @@
+@use "sass:meta";
+@use "sass:map";
+
+/// Returns the value at `$key` in `$map`.
+/// @param {Map} $map - The map to get the value from.
+/// @param {Any} $key - The key to get the value for.
+///
+/// @example scss - Usage
+///   @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
+@function k-map-get($map, $keys...) {
+    @each $key in $keys {
+        $map: map.get($map, $key); // stylelint-disable-line
+    }
+    @return $map;
+}
+
+/// Returns a map with the keys and values from `$map` and `$args`.
+/// @param {Map} $map - The map to merge.
+/// @param {Map} $args - The map to merge into `$map`.
+/// @return {Map} - A map with the keys and values from `$map` and `$args`.
+///
+/// @example scss - Usage
+///   @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
+@function k-map-merge($map, $args...) {
+    @each $arg in $args {
+        $map: map.merge($map, $arg); // stylelint-disable-line
+    }
+    @return $map;
+}
+
+/// Returns a deep-map with the keys and values from `$map` and `$args`.
+/// @param {Map} $maps - The maps to deep-merge.
+/// @return {Map} - A map with the keys and values from `$map` and `$args`.
+///
+/// @example scss - Usage
+///   @debug k-map-deep-merge( ( "foo": ("bar": "baz", "baz": "qux" ) ), ( "foo": ("bar": "foo") ) ); // => ( "foo": ("bar": "foo", "baz": "qux" ))
+@function k-map-deep-merge($maps...) {
+    $merged: ();
+
+    @each $map in $maps {
+        @each $key, $val in $map {
+            @if (meta.type-of($val) == "map") {
+                $current: k-map-get($merged, $key);
+                @if (meta.type-of($current) == "map") {
+                    $val: k-map-deep-merge($current, $val);
+                    $map: k-map-merge(
+                        $map,
+                        (
+                            $key: $val,
+                        )
+                    );
+                }
+            }
+        }
+        $merged: k-map-merge($merged, $map);
+    }
+
+    @return $merged;
+}
+
+/// Sets a single key and value in `$map`.
+/// @param {Map} $map - The map to set the value in.
+/// @param {Any} $key - The key to set the value for.
+/// @param {Any} $value - The value to set.
+/// @return {Map} - A map with the key and value set.
+///
+/// @example scss - Usage
+///   @debug k-map-set( ( "foo": "bar" ), "baz", "qux" ); // => ( "foo": "bar", "baz": "qux" )
+@function k-map-set($map, $key, $value) {
+    @return k-map-merge(
+        $map,
+        (
+            $key: $value,
+        )
+    );
+}
+
+/// Returns negative values of a number or numbers in a list.
+/// @param {Map} $map - The map to get the values from.
+/// @return {Map} - A comma separated list of the values in `$map`.
+///
+/// @example scss - Usage
+///   @debug k-map-negate( ( 0: 0, 1: 1px, 2: 2px ) ); // => ("-1": -1px, "-2": -2px)
+@function k-map-negate($map) {
+    $_map-neg: ();
+
+    @if (meta.type-of($map) != map) {
+        @error "expected type of #{$map} is map, was #{meta.type-of($map)}";
+    }
+    @each $key, $value in $map {
+        $_key-neg: "-" + $key;
+
+        @if (meta.type-of($value) == number and $value != 0 and $_key-neg != "-0") {
+            $_map-neg: k-map-set($_map-neg, $_key-neg, -1 * $value);
+        }
+    }
+
+    @return $_map-neg;
+}

package/scss/functions/_math.scss

@@ -0,0 +1,75 @@
+@use "sass:math";
+@use "sass:meta";
+
+/// Restricts `$number` to the range between `$min` and `$max`. If `$number` is
+/// less than `$min`, `$min` is returned. If `$number` is greater than `$max`,
+/// `$max` is returned. Otherwise, `$number` is returned.
+/// @param {Number} $number - The number to clamp.
+/// @param {Number} $min - The minimum value.
+/// @param {Number} $max - The maximum value.
+/// @return {Number} - The clamped number.
+///
+/// @example scss - Usage
+///   @debug k-math-clamp( 10, 0, 5 ); // => 5
+@function k-math-clamp($number, $min, $max) {
+    @return math.max($min, math.min($max, $number));
+}
+
+/// Returns the result of raising `$x` to the power of `$n`.
+/// @param {Number} $x - The base.
+/// @param {Number} $n - The exponent.
+/// @return {Number} - The result of raising `$x` to the power of `$n`.
+///
+/// @example scss - Usage
+///   @debug k-math-pow( 2, 3 ); // => 8
+@function k-math-pow($x, $n) {
+    $ret: 1;
+
+    @if ($n == 0) {
+        @return $ret;
+    }
+
+    @if ($n > 0) {
+        @for $i from 1 through $n {
+            $ret: $ret * $x;
+        }
+        @return $ret;
+    }
+
+    @for $i from $n to 0 {
+        $ret: math.div($ret, $x);
+    }
+    @return $ret;
+}
+
+/// Returns the result of rounding `$number` to the nearest integer
+/// using the specified `$precision`.
+/// @param {Number} $number - The number to round.
+/// @param {Number} $precision - The number of decimal places to round to.
+/// @return {Number} - The rounded number.
+///
+/// @example scss - Usage
+///   @debug k-math-round( 10.123456789, 3 ); // => 10.123
+@function k-math-round($number, $precision: 0) {
+    @if ($precision == 0) {
+        @return math.round($number);
+    }
+
+    $pow: k-math-pow(10, $precision);
+
+    @return math.div(round($number * $pow), $pow);
+}
+
+/// Remove the unit from a number.
+/// @param {Number} $number - The number to remove the unit from.
+/// @return {Number} - The unitless number.
+///
+/// @example scss - Usage
+///   @debug k-math-strip-unit( 10px ); // => 10
+@function k-math-strip-unit($number) {
+    @if (meta.type-of($number) == "number") and not math.unitless($number) {
+        @return math.div($number, 1 * math.unit($number));
+    }
+
+    @return $number;
+}