feat(utils): migrate to the dart-sass module system

BREAKING CHANGE

Starting with the R4 2024 release, all Kendo themes are now migrated to
the SASS module system.

This breaking change is due to the `node-sass` package reaching its
official end of life.

For more information, please refer to the following links:

* https://sass-lang.com/blog/the-module-system-is-launched/
* sass/node-sass@107ded9

packages/utils/sass-flat.config.js

@@ -1,11 +1,11 @@
-module.exports = {
-    extends: [
-        'sass-build:recommended'
-    ],
-    build: [
-        {
-            file: 'dist/all.scss',
-            outFile: 'dist/all.css'
-        }
-    ]
-};
+// module.exports = {
+//     extends: [
+//         'sass-build:recommended'
+//     ],
+//     build: [
+//         {
+//             file: 'dist/all.scss',
+//             outFile: 'dist/all.css'
+//         }
+//     ]
+// };

packages/utils/sass.config.js

@@ -6,6 +6,8 @@ module.exports = {
         {
             file: 'scss/all.scss',
             outFile: 'dist/all.css',
+            compiler: "sass",
+            api: "modern",
             sassOptions: {
                 loadPaths: [
                     '../../node_modules/'

packages/utils/scss/_globals.scss

@@ -0,0 +1,2 @@
+@forward "./_variables.scss";
+@forward "./_mixins.scss";

packages/utils/scss/_mixins.scss

@@ -6,7 +6,7 @@
 $kendo-prefix: k- !default;
 $kendo-important: true !default;
 
-@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important, $css-var: null ) {
+@mixin generate-utils( $name, $props, $values, $function: "genFunc", $important: $kendo-important, $css-var: null ) {
     @if $values {
         $_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
         $_fn: if( meta.function-exists( $function ), meta.get-function( $function ), null );
@@ -16,6 +16,7 @@ $kendo-important: true !default;
             $_val: if( k-meta-type-of($values) == list, $key, $val );
             $_name: k-escape-class-name( $name );
             $_selector: if( $_key == DEFAULT, #{$kendo-prefix}#{$_name}, #{$kendo-prefix}#{$_name}-#{$_key});
+            // @debug $_selector;
             $_custom-prop: if( $_key == DEFAULT, var( --kendo-#{$css-var}, #{$_val} ), var( --kendo-#{$css-var}-#{$_key}, #{$_val} ) );
 
             @if $important != only {