chore(core): use dart sass modules

packages/core/scss/color-system/_functions.import.scss

@@ -58,7 +58,7 @@
     @each $variant, $definition in $theme-matrix {
         $tc-index: string.index( $variant, "THEME_COLOR" );
         $src-palette-name: map.get( $definition, PALETTE );
-        $matrix: k-map-remove( $definition, PALETTE );
+        $matrix: map.remove( $definition, PALETTE );
 
         @if ($tc-index == null ) { // stylelint-disable-line
             $tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );

packages/core/scss/elevation/index.import.scss

@@ -1,4 +1,4 @@
-@use "../functions/index.import.scss" as *;
+@use "sass:map";
 
 $_default-elevation: (
     1: (
@@ -43,7 +43,7 @@ $_default-elevation: (
 /// @group elevation
 $kendo-elevation: $_default-elevation !default;
 
-$kendo-elevation: k-map-merge($_default-elevation, $kendo-elevation);
+$kendo-elevation: map.merge($_default-elevation, $kendo-elevation);
 
 @function k-shadow-filter($shadow) {
     $result: '';
@@ -54,7 +54,7 @@ $kendo-elevation: k-map-merge($_default-elevation, $kendo-elevation);
 }
 
 @function k-elevation($level) {
-    @return var(--kendo-elevation-#{$level}, k-map-get($kendo-elevation, $level));
+    @return var(--kendo-elevation-#{$level}, map.get($kendo-elevation, $level));
 }
 
 

packages/core/scss/functions/_color.import.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:list";
+@use "sass:meta";
 @use "../_variables.scss" as *;
 
 $kendo-light-color-level-step: 8% !default;
@@ -180,7 +181,7 @@ $kendo-dark-color-level-step: 16% !default;
 $kendo-color-level-step: 8% !default;
 
 @function k-color-level( $color, $level: 0, $_is-dark-theme: $kendo-is-dark-theme ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+    $_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 );
 
     @if ( $level == 0 ) or ( $level == 0% ) {
@@ -231,7 +232,7 @@ $kendo-color-level-step: 8% !default;
 ///
 /// @group color-system
 @function k-try-shade( $color, $level: 1, $_is-dark-theme: $kendo-is-dark-theme ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+    $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
     @if $_dark-theme {
         @return k-color-tint( $color, $level );
@@ -247,7 +248,7 @@ $kendo-color-level-step: 8% !default;
 ///
 /// @group color-system
 @function k-try-tint( $color, $level: 1, $_is-dark-theme: $kendo-is-dark-theme ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+    $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
     @if $_dark-theme {
         @return k-color-shade( $color, $level );
@@ -263,7 +264,7 @@ $kendo-color-level-step: 8% !default;
 ///
 /// @group color-system
 @function k-try-darken( $color, $amount, $_is-dark-theme: $kendo-is-dark-theme ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+    $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
     @if $_dark-theme {
         @return k-color-lighten( $color, $amount );
@@ -278,7 +279,7 @@ $kendo-color-level-step: 8% !default;
 ///
 /// @group color-system
 @function k-try-lighten( $color, $amount, $_is-dark-theme: $kendo-is-dark-theme ) {
-    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
+    $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
     @if $_dark-theme {
         @return k-color-darken( $color, $amount );

packages/core/scss/functions/_list.import.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 /// Returns a copy of `$list` with `$val` appended to the end.
 /// @param {List} $list - The list to process.
 /// @param {Any} $val - The value to append to `$list`.
@@ -7,7 +9,7 @@
 /// @example scss - Usage
 ///   @debug k-list-append( ( "foo", "bar" ), "baz" ); // => "foo, bar, baz"
 @function k-list-append( $list, $val, $separator: auto ) {
-    @return append( $list, $val, $separator );
+    @return list.append( $list, $val, $separator );
 }
 
 /// Checks whether `$list` contains `$value`.
@@ -30,7 +32,7 @@
 /// @example scss - Usage
 ///   @debug k-list-index( ( "foo", "bar" ), "foo" ); // => 1
 @function k-list-index( $list, $value ) {
-    @return index( $list, $value );
+    @return list.index( $list, $value );
 }
 
 /// Returns whether `$list` is bracketed.
@@ -41,7 +43,7 @@
 ///   @debug k-list-is-bracketed( ( "foo", "bar" ) ); // => false
 ///   @debug k-list-is-bracketed( [ "foo", "bar" ] ); // => true
 @function k-list-is-bracketed( $list ) {
-    @return is-bracketed( $list );
+    @return list.is-bracketed( $list );
 }
 
 /// Joins two lists together.
@@ -55,7 +57,7 @@
 ///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ) ); // => "foo, bar, baz, qux"
 ///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ), " " ); // => "foo bar baz qux"
 @function k-list-join( $list1, $list2, $separator: auto, $bracketed: auto ) {
-    @return join( $list1, $list2, $separator, $bracketed );
+    @return list.join( $list1, $list2, $separator, $bracketed );
 }
 
 /// Returns the length of `$list`.
@@ -65,7 +67,7 @@
 /// @example scss - Usage
 ///   @debug k-list-length( ( "foo", "bar" ) ); // => 2
 @function k-list-length( $list ) {
-    @return length( $list );
+    @return list.length( $list );
 }
 
 /// Returns the nth item in `$list`.
@@ -76,7 +78,7 @@
 /// @example scss - Usage
 ///   @debug k-list-nth( ( "foo", "bar" ), 1 ); // => "foo"
 @function k-list-nth( $list, $n ) {
-    @return nth( $list, $n );
+    @return list.nth( $list, $n );
 }
 
 /// Reverse the order of items in `$list`.
@@ -109,7 +111,7 @@
 /// @example scss - Usage
 ///   @debug k-list-separator( ( "foo", "bar" ) ); // => ","
 @function k-list-separator( $list ) {
-    @return list-separator( $list );
+    @return list.list-separator( $list );
 }
 
 /// Returns a copy of `$list` with `$val` inserted at `$n`.
@@ -121,7 +123,7 @@
 /// @example scss - Usage
 ///   @debug k-list-set-nth( ( "foo", "bar" ), 1, "baz" ); // => "baz, bar"
 @function k-list-set-nth( $list, $n, $value ) {
-    @return set-nth( $list, $n, $value );
+    @return list.set-nth( $list, $n, $value );
 }
 
 /// Combines two lists into a single list of two-item lists.
@@ -132,5 +134,5 @@
 /// @example scss - Usage
 ///   @debug k-list-zip( ( "foo", "bar" ), ( "baz", "qux" ) ); // => ((foo, baz), (bar, qux))
 @function k-list-zip( $lists... ) {
-    @return zip( $lists... );
+    @return list.zip( $lists... );
 }

packages/core/scss/functions/_map.import.scss

@@ -1,4 +1,5 @@
 @use "sass:meta";
+@use "sass:map";
 
 /// Returns the value at `$key` in `$map`.
 /// @param {Map} $map - The map to get the value from.
@@ -8,7 +9,7 @@
 ///   @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
+        $map: map.get( $map, $key ); // stylelint-disable-line
     }
     @return $map;
 }
@@ -22,7 +23,7 @@
 ///   @debug k-map-has( ( "foo": "bar" ), "foo" ); // => true
 ///   @debug k-map-has( ( "foo": "bar" ), "bar" ); // => false
 @function k-map-has-key( $map, $key ) {
-    @return map-has-key( $map, $key );
+    @return map.has-key( $map, $key );
 }
 
 /// Returns a comma separated list of the keys in `$map`.
@@ -32,7 +33,7 @@
 /// @example scss - Usage
 ///   @debug k-map-keys( ( "foo": "bar", "baz": "qux" ) ); // => "foo, baz"
 @function k-map-keys( $map ) {
-    @return map-keys( $map );
+    @return map.keys( $map );
 }
 
 /// Returns a map with the keys and values from `$map` and `$args`.
@@ -44,7 +45,7 @@
 ///   @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
+        $map: map.merge( $map, $arg ); // stylelint-disable-line
     }
     @return $map;
 }
@@ -87,7 +88,7 @@
 /// @example scss - Usage
 ///   @debug k-map-remove( ( "foo": "bar", "baz": "qux" ), "foo" ); // => ( "baz": "qux" )
 @function k-map-remove( $map, $keys... ) {
-    @return map-remove( $map, $keys... );
+    @return map.remove( $map, $keys... );
 }
 
 /// Sets a single key and value in `$map`.
@@ -109,7 +110,7 @@
 /// @example scss - Usage
 ///   @debug k-map-values( ( "foo": "bar", "baz": "qux" ) ); // => "bar, qux"
 @function k-map-values( $map ) {
-    @return map-values( $map );
+    @return map.values( $map );
 }
 
 /// Returns negative values of a number or numbers in a list.

packages/core/scss/functions/_math.import.scss

@@ -1,11 +1,13 @@
+@use "sass:math";
+
 /// Returns the absolute value of a number.
 /// @param {Number} $number - The number to get the absolute value of.
 /// @return {Number} - The absolute value of `$number`.
 ///
 /// @example scss - Usage
 ///   @debug k-math-abs( -10 ); // => 10
 @function k-math-abs( $number ) {
-    @return abs( $number );
+    @return math.abs( $number );
 }
 
 /// Returns the smallest integer greater than or equal to a number.
@@ -15,7 +17,7 @@
 /// @example scss - Usage
 ///   @debug k-math-ceil( 10.1 ); // => 11
 @function k-math-ceil( $number ) {
-    @return ceil( $number );
+    @return math.ceil( $number );
 }
 
 /// Returns the largest integer less than or equal to a number.
@@ -25,7 +27,7 @@
 /// @example scss - Usage
 ///   @debug k-math-floor( 10.9 ); // => 10
 @function k-math-floor( $number ) {
-    @return floor( $number );
+    @return math.floor( $number );
 }
 
 /// Restricts `$number` to the range between `$min` and `$max`. If `$number` is
@@ -51,7 +53,7 @@
 ///   @debug k-math-compatible( 10px, 10px ); // => true
 ///   @debug k-math-compatible( 10px, 10em ); // => false
 @function k-math-compatible( $a, $b ) {
-    @return comparable( $a, $b );
+    @return math.comparable( $a, $b );
 }
 
 /// Returns the quotient of two numbers.
@@ -63,7 +65,7 @@
 ///   @debug k-math-div( 10, 2 ); // => 5
 ///   @debug k-math-div( 10px, 2 ); // => 5px
 @function k-math-div( $a, $b )  {
-    @return ( $a / $b );
+    @return math.div( $a, $b );
 }
 
 /// Returns whether `$number` has no units.
@@ -74,7 +76,7 @@
 ///   @debug k-math-is-unitless( 10 ); // => true
 ///   @debug k-math-is-unitless( 10px ); // => false
 @function k-math-is-unitless( $number ) {
-    @return unitless( $number );
+    @return math.unitless( $number );
 }
 
 /// Returns the larger of two numbers.
@@ -86,7 +88,7 @@
 ///   @debug k-math-max( 10, 20 ); // => 20
 ///   @debug k-math-max( 10px, 20px ); // => 20px
 @function k-math-max( $a, $b ) {
-    @return max( $a, $b );
+    @return math.max( $a, $b );
 }
 
 /// Returns the smaller of two numbers.
@@ -98,7 +100,7 @@
 ///   @debug k-math-min( 10, 20 ); // => 10
 ///   @debug k-math-min( 10px, 20px ); // => 10px
 @function k-math-min( $a, $b ) {
-    @return min( $a, $b );
+    @return math.min( $a, $b );
 }
 
 /// Returns the remainder of two numbers.
@@ -132,7 +134,7 @@
 /// @example scss - Usage
 ///   @debug k-math-percentage( 0.5 ); // => 50%
 @function k-math-percentage( $number ) {
-    @return percentage( $number );
+    @return math.percentage( $number );
 }
 
 /// Returns the result of raising `$x` to the power of `$n`.
@@ -171,10 +173,10 @@
 ///   @debug k-math-random(); // => 0.123456789
 @function k-math-random( $limit: null ) {
     @if ( $limit == null ) { // stylelint-disable-line
-        @return random();
+        @return math.random();
     }
 
-    @return random( $limit );
+    @return math.random( $limit );
 }
 
 /// Returns the result of rounding `$number` to the nearest integer
@@ -188,7 +190,7 @@
 @function k-math-round( $number, $precision: 0 ) {
 
     @if ( $precision == 0 ) {
-        @return round( $number );
+        @return math.round( $number );
     }
 
     $pow: k-math-pow( 10, $precision );
@@ -203,7 +205,7 @@
 /// @example scss - Usage
 ///   @debug k-math-unit( 10px ); // => px
 @function k-math-unit( $number ) {
-    @return unit( $number );
+    @return math.unit( $number );
 }
 
 /// Remove the unit from a number.