From 82f0cb5d726c2f10e4315e016d419f50d6dea8be Mon Sep 17 00:00:00 2001
From: Emil Petrov <epetrov@progress.com>
Date: Thu, 5 Sep 2024 18:21:13 +0300
Subject: [PATCH] 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/
* https://github.com/sass/node-sass/commit/107ded9434cfca43dbd9dfbaeb5c349228bf5cee
---
 packages/utils/sass-flat.config.js            |  22 +-
 packages/utils/sass.config.js                 |   2 +
 packages/utils/scss/_globals.scss             |   2 +
 packages/utils/scss/_mixins.scss              |   3 +-
 packages/utils/scss/_variables.scss           | 453 +++++++++---------
 .../scss/accessibility/_screen-readers.scss   |  10 +-
 .../scss/accessibility/index.import.scss      |   2 +-
 packages/utils/scss/all.scss                  |   2 +-
 .../scss/background/_background-clip.scss     |  10 +-
 .../scss/background/_background-color.scss    |  10 +-
 .../scss/background/_background-position.scss |  10 +-
 .../scss/background/_background-size.scss     |  10 +-
 .../utils/scss/background/index.import.scss   |   8 +-
 packages/utils/scss/border/_border-color.scss |  10 +-
 .../utils/scss/border/_border-radius.scss     |   9 +-
 packages/utils/scss/border/_border-style.scss |  10 +-
 packages/utils/scss/border/_border-width.scss |  10 +-
 .../utils/scss/border/_outline-color.scss     |  10 +-
 .../utils/scss/border/_outline-offset.scss    |  10 +-
 .../utils/scss/border/_outline-style.scss     |  10 +-
 .../utils/scss/border/_outline-width.scss     |  10 +-
 packages/utils/scss/border/index.import.scss  |  16 +-
 packages/utils/scss/effects/_opacity.scss     |  10 +-
 packages/utils/scss/effects/index.import.scss |   2 +-
 .../utils/scss/elevation/index.import.scss    |   8 +-
 packages/utils/scss/filter/_backdrop.scss     |  10 +-
 packages/utils/scss/filter/index.import.scss  |   2 +-
 .../utils/scss/flex-grid/_align-content.scss  |  10 +-
 .../utils/scss/flex-grid/_align-items.scss    |  10 +-
 .../utils/scss/flex-grid/_align-self.scss     |  10 +-
 .../utils/scss/flex-grid/_flex-basis.scss     |  10 +-
 .../utils/scss/flex-grid/_flex-direction.scss |  12 +-
 packages/utils/scss/flex-grid/_flex-grow.scss |  10 +-
 .../utils/scss/flex-grid/_flex-shrink.scss    |  10 +-
 packages/utils/scss/flex-grid/_flex-wrap.scss |  10 +-
 packages/utils/scss/flex-grid/_flex.scss      |  10 +-
 packages/utils/scss/flex-grid/_gap.scss       |  12 +-
 .../scss/flex-grid/_grid-auto-columns.scss    |  10 +-
 .../utils/scss/flex-grid/_grid-auto-flow.scss |  10 +-
 .../utils/scss/flex-grid/_grid-auto-rows.scss |  10 +-
 .../flex-grid/_grid-column-start-end.scss     |  20 +-
 .../scss/flex-grid/_grid-row-start-end.scss   |  18 +-
 .../flex-grid/_grid-template-columns.scss     |  12 +-
 .../scss/flex-grid/_grid-template-rows.scss   |  10 +-
 .../scss/flex-grid/_justify-content.scss      |  10 +-
 .../utils/scss/flex-grid/_justify-items.scss  |  10 +-
 .../utils/scss/flex-grid/_justify-self.scss   |  10 +-
 packages/utils/scss/flex-grid/_order.scss     |  10 +-
 .../utils/scss/flex-grid/_place-content.scss  |  10 +-
 .../utils/scss/flex-grid/_place-items.scss    |  10 +-
 .../utils/scss/flex-grid/_place-self.scss     |  10 +-
 .../utils/scss/flex-grid/index.import.scss    |  73 ++-
 packages/utils/scss/index.import.scss         |  55 ++-
 .../scss/interactivity/_accent-color.scss     |  10 +-
 .../utils/scss/interactivity/_appearance.scss |  10 +-
 .../scss/interactivity/_caret-color.scss      |  10 +-
 .../utils/scss/interactivity/_cursor.scss     |  10 +-
 .../scss/interactivity/_pointer-events.scss   |  10 +-
 .../utils/scss/interactivity/_resize.scss     |  10 +-
 .../utils/scss/interactivity/_scroll.scss     |  20 +-
 .../scss/interactivity/_touch-action.scss     |  10 +-
 .../scss/interactivity/_user-select.scss      |  10 +-
 .../scss/interactivity/_will-change.scss      |  10 +-
 .../scss/interactivity/index.import.scss      |  31 +-
 packages/utils/scss/layout/_aspect-ratio.scss |  10 +-
 packages/utils/scss/layout/_box-sizing.scss   |  11 +-
 packages/utils/scss/layout/_clear.scss        |  10 +-
 packages/utils/scss/layout/_columns.scss      |  10 +-
 packages/utils/scss/layout/_display.scss      |  12 +-
 packages/utils/scss/layout/_float.scss        |  10 +-
 packages/utils/scss/layout/_object-fit.scss   |  10 +-
 .../utils/scss/layout/_object-position.scss   |  10 +-
 packages/utils/scss/layout/_overflow.scss     |  10 +-
 packages/utils/scss/layout/_placement.scss    |  12 +-
 packages/utils/scss/layout/_position.scss     |  13 +-
 packages/utils/scss/layout/_visibility.scss   |  10 +-
 packages/utils/scss/layout/_zindex.scss       |  10 +-
 packages/utils/scss/layout/index.import.scss  |  40 +-
 .../scss/responsive-layout/_col-gap.scss      |   8 +-
 .../utils/scss/responsive-layout/_col.scss    |   2 +
 .../scss/responsive-layout/index.import.scss  |   9 +-
 packages/utils/scss/sizing/_height.scss       |  14 +-
 packages/utils/scss/sizing/_width.scss        |  14 +-
 packages/utils/scss/sizing/index.import.scss  |   4 +-
 packages/utils/scss/spacing/_margin.scss      |  10 +-
 packages/utils/scss/spacing/_padding.scss     |  12 +-
 .../utils/scss/spacing/_space-between.scss    |   9 +-
 packages/utils/scss/spacing/index.import.scss |  10 +-
 packages/utils/scss/svg/_fill.scss            |  10 +-
 packages/utils/scss/svg/_stroke.scss          |  10 +-
 packages/utils/scss/svg/index.import.scss     |   4 +-
 .../utils/scss/table/_border-collapse.scss    |  10 +-
 packages/utils/scss/table/_table-layout.scss  |  10 +-
 packages/utils/scss/table/index.import.scss   |   7 +-
 packages/utils/scss/transform/_flip.scss      |  10 +-
 packages/utils/scss/transform/_origin.scss    |  10 +-
 packages/utils/scss/transform/_rotate.scss    |   8 +-
 packages/utils/scss/transform/_scale.scss     |   8 +-
 packages/utils/scss/transform/_skew.scss      |   8 +-
 packages/utils/scss/transform/_translate.scss |  10 +-
 .../utils/scss/transform/index.import.scss    |  15 +-
 .../utils/scss/typography/_font-family.scss   |   8 +-
 .../utils/scss/typography/_font-size.scss     |   7 +-
 .../utils/scss/typography/_font-style.scss    |  10 +-
 .../utils/scss/typography/_font-weight.scss   |   7 +-
 .../scss/typography/_letter-spacing.scss      |   8 +-
 .../utils/scss/typography/_line-height.scss   |   8 +-
 .../utils/scss/typography/_list-style.scss    |  10 +-
 .../utils/scss/typography/_text-align.scss    |  10 +-
 .../utils/scss/typography/_text-color.scss    |   9 +-
 .../scss/typography/_text-decoration.scss     |  10 +-
 .../utils/scss/typography/_text-overflow.scss |  10 +-
 .../scss/typography/_text-transform.scss      |  10 +-
 .../scss/typography/_vertical-align.scss      |  10 +-
 .../utils/scss/typography/_white-space.scss   |  10 +-
 .../utils/scss/typography/index.import.scss   |  49 +-
 116 files changed, 1021 insertions(+), 749 deletions(-)
 create mode 100644 packages/utils/scss/_globals.scss

diff --git a/packages/utils/sass-flat.config.js b/packages/utils/sass-flat.config.js
index a2bdc25d8bf..4eef7a1b9c2 100644
--- a/packages/utils/sass-flat.config.js
+++ b/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'
+//         }
+//     ]
+// };
diff --git a/packages/utils/sass.config.js b/packages/utils/sass.config.js
index e11f00090b7..e3b60af9314 100644
--- a/packages/utils/sass.config.js
+++ b/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/'
diff --git a/packages/utils/scss/_globals.scss b/packages/utils/scss/_globals.scss
new file mode 100644
index 00000000000..07fd61e0e49
--- /dev/null
+++ b/packages/utils/scss/_globals.scss
@@ -0,0 +1,2 @@
+@forward "./_variables.scss";
+@forward "./_mixins.scss";
diff --git a/packages/utils/scss/_mixins.scss b/packages/utils/scss/_mixins.scss
index 0f8bd32dbac..c5ae0d4a9a8 100644
--- a/packages/utils/scss/_mixins.scss
+++ b/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 {
diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss
index 28979bab048..2c5c7fba8fb 100644
--- a/packages/utils/scss/_variables.scss
+++ b/packages/utils/scss/_variables.scss
@@ -1,9 +1,7 @@
-@import "@progress/kendo-theme-core/scss/color-system/index.import.scss";
-
-@import "./spacing/index.import.scss";
-
-$kendo-prefix: k- !default;
-$kendo-important: true !default;
+@use "sass:map";
+@use "sass:string";
+@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
+@use "@progress/kendo-theme-core/scss/functions/_map.import.scss" as *;
 
 $kendo-theme-colors: () !default;
 
@@ -52,7 +50,7 @@ $kendo-util-colors: () !default;
 @each $name, $color in $kendo-colors {
     @each $util-color in $kendo-util-colors-list {
         @if ( $name == $util-color ) {
-            $kendo-util-colors: k-map-merge( $kendo-util-colors, ( $name: $color) );
+            $kendo-util-colors: map.merge( $kendo-util-colors, ( $name: $color) );
         }
     }
 }
@@ -63,6 +61,12 @@ $kendo-sizing: () !default;
 
 $kendo-border-radii: () !default;
 
+$kendo-elevation: () !default;
+
+$kendo-colors: () !default;
+
+$kendo-enable-color-system: true !default;
+
 $_default-kendo-fraction-classes: (
     '91-6': 91.6666%,
     '83-3': 83.3333%,
@@ -79,7 +83,7 @@ $_default-kendo-fraction-classes: (
 );
 
 $kendo-fraction-classes: $_default-kendo-fraction-classes !default;
-$kendo-fraction-classes: k-map-merge($_default-kendo-fraction-classes, $kendo-fraction-classes);
+$kendo-fraction-classes: map.merge($_default-kendo-fraction-classes, $kendo-fraction-classes);
 
 $_default-kendo-breakpoints: (
     xs: 0,
@@ -91,7 +95,7 @@ $_default-kendo-breakpoints: (
 ) !default;
 
 $kendo-breakpoints: $_default-kendo-breakpoints !default;
-$kendo-breakpoints: k-map-merge($_default-kendo-breakpoints, $kendo-breakpoints);
+$kendo-breakpoints: map.merge($_default-kendo-breakpoints, $kendo-breakpoints);
 
 $_default-kendo-container-max-widths: (
     sm: 540px,
@@ -102,7 +106,7 @@ $_default-kendo-container-max-widths: (
 ) !default;
 
 $kendo-container-max-widths: $_default-kendo-container-max-widths !default;
-$kendo-container-max-widths: k-map-merge($_default-kendo-container-max-widths, $kendo-container-max-widths);
+$kendo-container-max-widths: map.merge($_default-kendo-container-max-widths, $kendo-container-max-widths);
 
 $kendo-utils: (
 
@@ -112,24 +116,24 @@ $kendo-utils: (
     // Layout
     "aspect-ratio": (
         auto: auto,
-        1: 1,
-        square: k-string-unquote("1 / 1"),
-        video: k-string-unquote("16 / 9")
+        "1": 1,
+        square: string.unquote("1 / 1"),
+        video: string.unquote("16 / 9")
     ),
     "container": (),
     "columns": (
-        1: 1,
-        2: 2,
-        3: 3,
-        4: 4,
-        5: 5,
-        6: 6,
-        7: 7,
-        8: 8,
-        9: 9,
-        10: 10,
-        11: 11,
-        12: 12,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "7": 7,
+        "8": 8,
+        "9": 9,
+        "10": 10,
+        "11": 11,
+        "12": 12,
         auto: auto
     ),
     "break-after": (),
@@ -195,8 +199,8 @@ $kendo-utils: (
         clip: clip
     ),
     "overscroll": (),
-    "placement": k-map-merge( $kendo-spacing, (
-        -1: -1px
+    "placement": map.merge( $kendo-spacing, (
+        "-1": -1px
     )),
     "position": (
         static,
@@ -206,9 +210,9 @@ $kendo-utils: (
         sticky
     ),
     "inset": (
-        0: 0,
-        1: 1px,
-        -1: -1px
+        "0": 0,
+        "1": 1px,
+        "-1": -1px
     ),
     "visibility": (
         visible: visible,
@@ -216,12 +220,12 @@ $kendo-utils: (
         collapse: collapse
     ),
     "zindex": (
-        0: 0,
-        10: 10,
-        20: 20,
-        30: 30,
-        40: 40,
-        50: 50,
+        "0": 0,
+        "10": 10,
+        "20": 20,
+        "30": 30,
+        "40": 40,
+        "50": 50,
         auto: auto
     ),
 
@@ -238,160 +242,160 @@ $kendo-utils: (
         nowrap
     ),
     "flex": (
-        1: 1 1 0%,
+        "1": 1 1 0%,
         auto: 1 1 auto,
         initial: 0 1 auto,
         none: none
     ),
     "flex-grow": (
         DEFAULT: 1,
-        0: 0
+        "0": 0
     ),
     "flex-shrink": (
         DEFAULT: 1,
-        0: 0
+        "0": 0
     ),
     "flex-basis": $kendo-sizing,
     "order": (
-        1: 1,
-        2: 2,
-        3: 3,
-        4: 4,
-        5: 5,
-        6: 6,
-        7: 7,
-        8: 8,
-        9: 9,
-        10: 10,
-        11: 11,
-        12: 12,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "7": 7,
+        "8": 8,
+        "9": 9,
+        "10": 10,
+        "11": 11,
+        "12": 12,
         first: -9999,
         last: 9999,
         none: 0
     ),
     "grid-template-columns": (
-        1: repeat( 1, minmax( 0, 1fr ) ),
-        2: repeat( 2, minmax( 0, 1fr ) ),
-        3: repeat( 3, minmax( 0, 1fr ) ),
-        4: repeat( 4, minmax( 0, 1fr ) ),
-        5: repeat( 5, minmax( 0, 1fr ) ),
-        6: repeat( 6, minmax( 0, 1fr ) ),
-        7: repeat( 7, minmax( 0, 1fr ) ),
-        8: repeat( 8, minmax( 0, 1fr ) ),
-        9: repeat( 9, minmax( 0, 1fr ) ),
-        10: repeat( 10, minmax( 0, 1fr ) ),
-        11: repeat( 11, minmax( 0, 1fr ) ),
-        12: repeat( 12, minmax( 0, 1fr ) ),
+        "1": repeat( 1, minmax( 0, 1fr ) ),
+        "2": repeat( 2, minmax( 0, 1fr ) ),
+        "3": repeat( 3, minmax( 0, 1fr ) ),
+        "4": repeat( 4, minmax( 0, 1fr ) ),
+        "5": repeat( 5, minmax( 0, 1fr ) ),
+        "6": repeat( 6, minmax( 0, 1fr ) ),
+        "7": repeat( 7, minmax( 0, 1fr ) ),
+        "8": repeat( 8, minmax( 0, 1fr ) ),
+        "9": repeat( 9, minmax( 0, 1fr ) ),
+        "10": repeat( 10, minmax( 0, 1fr ) ),
+        "11": repeat( 11, minmax( 0, 1fr ) ),
+        "12": repeat( 12, minmax( 0, 1fr ) ),
         none: none
     ),
     "grid-template-rows": (
-        1: repeat( 1, minmax( 0, 1fr ) ),
-        2: repeat( 2, minmax( 0, 1fr ) ),
-        3: repeat( 3, minmax( 0, 1fr ) ),
-        4: repeat( 4, minmax( 0, 1fr ) ),
-        5: repeat( 5, minmax( 0, 1fr ) ),
-        6: repeat( 6, minmax( 0, 1fr ) ),
-        7: repeat( 7, minmax( 0, 1fr ) ),
-        8: repeat( 8, minmax( 0, 1fr ) ),
-        9: repeat( 9, minmax( 0, 1fr ) ),
-        10: repeat( 10, minmax( 0, 1fr ) ),
-        11: repeat( 11, minmax( 0, 1fr ) ),
-        12: repeat( 12, minmax( 0, 1fr ) ),
+        "1": repeat( 1, minmax( 0, 1fr ) ),
+        "2": repeat( 2, minmax( 0, 1fr ) ),
+        "3": repeat( 3, minmax( 0, 1fr ) ),
+        "4": repeat( 4, minmax( 0, 1fr ) ),
+        "5": repeat( 5, minmax( 0, 1fr ) ),
+        "6": repeat( 6, minmax( 0, 1fr ) ),
+        "7": repeat( 7, minmax( 0, 1fr ) ),
+        "8": repeat( 8, minmax( 0, 1fr ) ),
+        "9": repeat( 9, minmax( 0, 1fr ) ),
+        "10": repeat( 10, minmax( 0, 1fr ) ),
+        "11": repeat( 11, minmax( 0, 1fr ) ),
+        "12": repeat( 12, minmax( 0, 1fr ) ),
         none: none
     ),
     "grid-column-start": (
-        1: 1,
-        2: 2,
-        3: 3,
-        4: 4,
-        5: 5,
-        6: 6,
-        7: 7,
-        8: 8,
-        9: 9,
-        10: 10,
-        11: 11,
-        12: 12,
-        13: 13,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "7": 7,
+        "8": 8,
+        "9": 9,
+        "10": 10,
+        "11": 11,
+        "12": 12,
+        "13": 13,
         auto: auto
     ),
     "grid-column-end": (
-        1: 1,
-        2: 2,
-        3: 3,
-        4: 4,
-        5: 5,
-        6: 6,
-        7: 7,
-        8: 8,
-        9: 9,
-        10: 10,
-        11: 11,
-        12: 12,
-        13: 13,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "7": 7,
+        "8": 8,
+        "9": 9,
+        "10": 10,
+        "11": 11,
+        "12": 12,
+        "13": 13,
         auto: auto
     ),
     "grid-column-span": (
-        1: span 1 / span 1,
-        2: span 2 / span 2,
-        3: span 3 / span 3,
-        4: span 4 / span 4,
-        5: span 5 / span 5,
-        6: span 6 / span 6,
-        7: span 7 / span 7,
-        8: span 8 / span 8,
-        9: span 9 / span 9,
-        10: span 10 / span 10,
-        11: span 11 / span 11,
-        12: span 12 / span 12,
-        full: k-string-unquote("1 / -1"),
+        "1": span 1 / span 1,
+        "2": span 2 / span 2,
+        "3": span 3 / span 3,
+        "4": span 4 / span 4,
+        "5": span 5 / span 5,
+        "6": span 6 / span 6,
+        "7": span 7 / span 7,
+        "8": span 8 / span 8,
+        "9": span 9 / span 9,
+        "10": span 10 / span 10,
+        "11": span 11 / span 11,
+        "12": span 12 / span 12,
+        full: string.unquote("1 / -1"),
         auto: auto
     ),
     "grid-row-start": (
-        1: 1,
-        2: 2,
-        3: 3,
-        4: 4,
-        5: 5,
-        6: 6,
-        7: 7,
-        8: 8,
-        9: 9,
-        10: 10,
-        11: 11,
-        12: 12,
-        13: 13,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "7": 7,
+        "8": 8,
+        "9": 9,
+        "10": 10,
+        "11": 11,
+        "12": 12,
+        "13": 13,
         auto: auto
     ),
     "grid-row-end": (
-        1: 1,
-        2: 2,
-        3: 3,
-        4: 4,
-        5: 5,
-        6: 6,
-        7: 7,
-        8: 8,
-        9: 9,
-        10: 10,
-        11: 11,
-        12: 12,
-        13: 13,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "7": 7,
+        "8": 8,
+        "9": 9,
+        "10": 10,
+        "11": 11,
+        "12": 12,
+        "13": 13,
         auto: auto
     ),
     "grid-row-span": (
-        1: span 1 / span 1,
-        2: span 2 / span 2,
-        3: span 3 / span 3,
-        4: span 4 / span 4,
-        5: span 5 / span 5,
-        6: span 6 / span 6,
-        7: span 7 / span 7,
-        8: span 8 / span 8,
-        9: span 9 / span 9,
-        10: span 10 / span 10,
-        11: span 11 / span 11,
-        12: span 12 / span 12,
+        "1": span 1 / span 1,
+        "2": span 2 / span 2,
+        "3": span 3 / span 3,
+        "4": span 4 / span 4,
+        "5": span 5 / span 5,
+        "6": span 6 / span 6,
+        "7": span 7 / span 7,
+        "8": span 8 / span 8,
+        "9": span 9 / span 9,
+        "10": span 10 / span 10,
+        "11": span 11 / span 11,
+        "12": span 12 / span 12,
         full: span 1 / span -1,
         auto: auto
     ),
@@ -415,7 +419,7 @@ $kendo-utils: (
         max: max-content,
         fr: minmax( 0, 1fr ),
     ),
-    "gap": k-map-merge( $kendo-spacing, (
+    "gap": map.merge( $kendo-spacing, (
         // TODO: remove this extension once we fix docs
         xs: k-spacing(1),
         sm: k-spacing(2),
@@ -555,10 +559,9 @@ $kendo-utils: (
         self-end: self-end,
         baseline: baseline
     ),
-
-    // Spacing
-    "margin": k-map-merge( $kendo-spacing,
-        k-map-negate( $kendo-spacing), (
+    "margin": k-map-merge(
+        $kendo-spacing, k-map-negate($kendo-spacing),
+        (
         // TODO: remove this extension once we fix docs
         xs: k-spacing(1),
         sm: k-spacing(2),
@@ -569,7 +572,7 @@ $kendo-utils: (
         hair: k-spacing(1px),
         auto: auto
     )),
-    "padding": k-map-merge( $kendo-spacing, (
+    "padding": map.merge( $kendo-spacing, (
         // TODO: remove this extension once we fix docs
         xs: k-spacing(1),
         sm: k-spacing(2),
@@ -582,11 +585,11 @@ $kendo-utils: (
     "space-between": (),
 
     // Sizing
-    "width": k-map-merge( $kendo-sizing, (
+    "width": map.merge( $kendo-sizing, (
         screen: 100vw
     )),
     "min-width": (
-        0: 0,
+        "0": 0,
         full: 100%,
         screen: 100vw,
         min: min-content,
@@ -595,18 +598,18 @@ $kendo-utils: (
     ),
     "max-width": (
         none: none,
-        0: 0,
+        "0": 0,
         full: 100%,
         screen: 100vw,
         min: min-content,
         max: max-content,
         fit: fit-content
     ),
-    "height": k-map-merge( $kendo-sizing, (
+    "height": map.merge( $kendo-sizing, (
         screen: 100vh
     )),
     "min-height": (
-        0: 0,
+        "0": 0,
         full: 100%,
         screen: 100vh,
         min: min-content,
@@ -615,7 +618,7 @@ $kendo-utils: (
     ),
     "max-height": (
         none: none,
-        0: 0,
+        "0": 0,
         full: 100%,
         screen: 100vh,
         min: min-content,
@@ -650,7 +653,7 @@ $kendo-utils: (
         start,
         end
     ),
-    "text-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
+    "text-color": map.merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -705,7 +708,7 @@ $kendo-utils: (
         content: content-box,
         text: text
     ),
-    "background-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
+    "background-color": map.merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "transparent": transparent,
         "black": black,
@@ -731,10 +734,10 @@ $kendo-utils: (
     // Border
     "border-width": (
         DEFAULT: 1px,
-        0: 0,
-        2: 2px,
-        4: 4px,
-        8: 8px
+        "0": 0,
+        "2": 2px,
+        "4": 4px,
+        "8": 8px
     ),
     "border-style": (
         solid,
@@ -748,7 +751,7 @@ $kendo-utils: (
         hidden,
         none
     ),
-    "border-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
+    "border-color": map.merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -758,10 +761,10 @@ $kendo-utils: (
     "border-radius": $kendo-border-radii,
     "outline-width": (
         DEFAULT: 1px,
-        0: 0,
-        2: 2px,
-        4: 4px,
-        8: 8px
+        "0": 0,
+        "2": 2px,
+        "4": 4px,
+        "8": 8px
     ),
     "outline-style": (
         solid,
@@ -774,7 +777,7 @@ $kendo-utils: (
         outset,
         none
     ),
-    "outline-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
+    "outline-color": map.merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -782,29 +785,29 @@ $kendo-utils: (
         "white": white
     )),
     "outline-offset": (
-        0: 0,
-        1: 1px,
-        2: 2px,
-        4: 4px,
-        8: 8px
+        "0": 0,
+        "1": 1px,
+        "2": 2px,
+        "4": 4px,
+        "8": 8px
     ),
 
     // Effects
     "box-shadow": (),
     "box-shadow-color": (),
     "opacity": (
-        0: 0,
-        5: 0.05,
-        10: 0.1,
-        20: 0.2,
-        30: 0.3,
-        40: 0.4,
-        50: 0.5,
-        60: 0.6,
-        70: 0.7,
-        80: 0.8,
-        90: 0.9,
-        100: 1
+        "0": 0,
+        "5": 0.05,
+        "10": 0.1,
+        "20": 0.2,
+        "30": 0.3,
+        "40": 0.4,
+        "50": 0.5,
+        "60": 0.6,
+        "70": 0.7,
+        "80": 0.8,
+        "90": 0.9,
+        "100": 1
     ),
 
     // Filter
@@ -831,40 +834,40 @@ $kendo-utils: (
     // Transform
     "flip": true,
     "scale": (
-        0: 0,
-        0.25: .25,
-        0.5: .5,
-        0.75: .75,
-        1: 1,
-        1.25: 1.25,
-        1.5: 1.5,
-        2: 2
+        "0": 0,
+        "0.25": .25,
+        "0.5": .5,
+        "0.75": .75,
+        "1": 1,
+        "1.2": 1.25,
+        "1.5": 1.5,
+        "2": 2
     ),
     "rotate": (
-        0: 0deg,
-        45: 45deg,
-        90: 90deg,
-        135: 135deg,
-        180: 180deg,
-        225: 225deg,
-        270: 270deg,
-        315: 315deg
+        "0": 0deg,
+        "45": 45deg,
+        "90": 90deg,
+        "135": 135deg,
+        "180": 180deg,
+        "225": 225deg,
+        "270": 270deg,
+        "315": 315deg
     ),
     "translate": k-map-remove( $kendo-sizing, "auto", "min", "max", "fit" ),
     "skew": (
-        0: 0deg,
-        1: 1deg,
-        2: 2deg,
-        3: 3deg,
-        4: 4deg,
-        5: 5deg,
-        6: 6deg,
-        7: 7deg,
-        8: 8deg,
-        9: 9deg,
-        10: 10deg,
-        11: 11deg,
-        12: 12deg
+        "0": 0deg,
+        "1": 1deg,
+        "2": 2deg,
+        "3": 3deg,
+        "4": 4deg,
+        "5": 5deg,
+        "6": 6deg,
+        "7": 7deg,
+        "8": 8deg,
+        "9": 9deg,
+        "10": 10deg,
+        "11": 11deg,
+        "12": 12deg
     ),
     "origin": (
         center: center,
@@ -940,9 +943,9 @@ $kendo-utils: (
     ),
     "scroll-snap-type": (
         none: none,
-        snap-x: x var(--#{$kendo-prefix}scroll-snap-strictness),
-        snap-y: y var(--#{$kendo-prefix}scroll-snap-strictness),
-        snap-both: both var(--#{$kendo-prefix}scroll-snap-strictness)
+        snap-x: x var(--k-scroll-snap-strictness),
+        snap-y: y var(--k-scroll-snap-strictness),
+        snap-both: both var(--k-scroll-snap-strictness)
     ),
     "scroll-snap-align": (
         start,
diff --git a/packages/utils/scss/accessibility/_screen-readers.scss b/packages/utils/scss/accessibility/_screen-readers.scss
index 1e7dbe0bef9..d00e1812325 100644
--- a/packages/utils/scss/accessibility/_screen-readers.scss
+++ b/packages/utils/scss/accessibility/_screen-readers.scss
@@ -1,12 +1,14 @@
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-accessibility-screen-readers"));
+@use "@progress/kendo-theme-core/scss/mixins/_import-once.scss" as *;
+@use "../_globals.scss" as *;
+@use "sass:map";
+
 
 @mixin kendo-utils--accessibility--screen-readers() {
-    @include module-render("utils-accessibility-screen-readers") {
+    @include import-once("utils-accessibility-screen-readers") {
 
         // Screen readers utility classes
-        $kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;
+        $kendo-utils-accessibility: map.get( $kendo-utils, "accessibility" ) !default;
 
         @if $kendo-utils-accessibility {
             /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
diff --git a/packages/utils/scss/accessibility/index.import.scss b/packages/utils/scss/accessibility/index.import.scss
index a130d4ba842..d66c18bf5fc 100644
--- a/packages/utils/scss/accessibility/index.import.scss
+++ b/packages/utils/scss/accessibility/index.import.scss
@@ -1,4 +1,4 @@
-@import "./_screen-readers.scss";
+@use "./_screen-readers.scss" as *;
 
 @mixin kendo-utils--accessibility() {
     @include kendo-utils--accessibility--screen-readers();
diff --git a/packages/utils/scss/all.scss b/packages/utils/scss/all.scss
index 66b1990f9f9..5268ea927e8 100644
--- a/packages/utils/scss/all.scss
+++ b/packages/utils/scss/all.scss
@@ -1,3 +1,3 @@
-@import "./index.import.scss";
+@use "./index.import.scss" as *;
 
 @include kendo-utils();
diff --git a/packages/utils/scss/background/_background-clip.scss b/packages/utils/scss/background/_background-clip.scss
index c9df622b63f..56f883ce700 100644
--- a/packages/utils/scss/background/_background-clip.scss
+++ b/packages/utils/scss/background/_background-clip.scss
@@ -22,15 +22,17 @@
 /// @group background-clip
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-background-clip"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--background--background-clip() {
-    @include module-render("utils-background-clip") {
+    @include import-once("utils-background-clip") {
 
         // Background color utility classes
-        $kendo-utils-background-clip: k-map-get( $kendo-utils, "background-clip" ) !default;
+        $kendo-utils-background-clip: map.get( $kendo-utils, "background-clip" ) !default;
         @include generate-utils( bg-clip, background-clip, $kendo-utils-background-clip );
 
     }
diff --git a/packages/utils/scss/background/_background-color.scss b/packages/utils/scss/background/_background-color.scss
index 91591aa3fd0..922b8cae16a 100644
--- a/packages/utils/scss/background/_background-color.scss
+++ b/packages/utils/scss/background/_background-color.scss
@@ -22,15 +22,17 @@
 /// @group background-color
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-background-color"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--background--background-color() {
-    @include module-render("utils-background-color") {
+    @include import-once("utils-background-color") {
 
         // Background color utility classes
-        $kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
+        $kendo-utils-background-color: map.get( $kendo-utils, "background-color" ) !default;
         @include generate-utils( bg, background-color, $kendo-utils-background-color, $css-var: 'color' );
 
     }
diff --git a/packages/utils/scss/background/_background-position.scss b/packages/utils/scss/background/_background-position.scss
index b98a2efd092..2db833de4af 100644
--- a/packages/utils/scss/background/_background-position.scss
+++ b/packages/utils/scss/background/_background-position.scss
@@ -52,15 +52,17 @@
 /// @group background-position
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-background-position"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--background--background-position() {
-    @include module-render("utils-background-position") {
+    @include import-once("utils-background-position") {
 
         // Background position utility classes
-        $kendo-utils-background-position: k-map-get( $kendo-utils, "background-position" ) !default;
+        $kendo-utils-background-position: map.get( $kendo-utils, "background-position" ) !default;
         @include generate-utils( bg, background-position, $kendo-utils-background-position );
 
     }
diff --git a/packages/utils/scss/background/_background-size.scss b/packages/utils/scss/background/_background-size.scss
index b52855bf713..1f6a309db57 100644
--- a/packages/utils/scss/background/_background-size.scss
+++ b/packages/utils/scss/background/_background-size.scss
@@ -16,15 +16,17 @@
 /// @group background-size
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-background-size"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--background--background-size() {
-    @include module-render("utils-background-size") {
+    @include import-once("utils-background-size") {
 
         // Background size utility classes
-        $kendo-utils-background-size: k-map-get( $kendo-utils, "background-size" ) !default;
+        $kendo-utils-background-size: map.get( $kendo-utils, "background-size" ) !default;
         @include generate-utils( bg, background-size, $kendo-utils-background-size );
 
     }
diff --git a/packages/utils/scss/background/index.import.scss b/packages/utils/scss/background/index.import.scss
index 3621d6059b2..fff2df9e201 100644
--- a/packages/utils/scss/background/index.import.scss
+++ b/packages/utils/scss/background/index.import.scss
@@ -1,7 +1,7 @@
-@import "./_background-clip.scss";
-@import "./_background-color.scss";
-@import "./_background-position.scss";
-@import "./_background-size.scss";
+@use "./_background-clip.scss" as *;
+@use "./_background-color.scss" as *;
+@use "./_background-position.scss" as *;
+@use "./_background-size.scss" as *;
 
 
 @mixin kendo-utils--background() {
diff --git a/packages/utils/scss/border/_border-color.scss b/packages/utils/scss/border/_border-color.scss
index 0cdce78f298..881590c8b82 100644
--- a/packages/utils/scss/border/_border-color.scss
+++ b/packages/utils/scss/border/_border-color.scss
@@ -28,15 +28,17 @@
 /// @group border-color
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-border-color"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--border--border-color() {
-    @include module-render("utils-border-color") {
+    @include import-once("utils-border-color") {
 
         // Border color utility classes
-        $kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
+        $kendo-utils-border-color: map.get( $kendo-utils, "border-color" ) !default;
         @include generate-utils( border, border-color, $kendo-utils-border-color, $css-var: 'color' );
 
     }
diff --git a/packages/utils/scss/border/_border-radius.scss b/packages/utils/scss/border/_border-radius.scss
index 19e925ced71..07cdf8af308 100644
--- a/packages/utils/scss/border/_border-radius.scss
+++ b/packages/utils/scss/border/_border-radius.scss
@@ -322,14 +322,15 @@
 /// @group border-radius
 /// @contextType css
 
-@import "@progress/kendo-theme-core/scss/border-radii/index.import.scss";
+@use "../_mixins.scss" as *;
+
+@use "@progress/kendo-theme-core/scss/border-radii/index.import.scss" as *;
 
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-border-radius"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--border--border-radius() {
-    @include module-render("utils-border-radius") {
+    @include import-once("utils-border-radius") {
 
         // Border radius utility classes
         @include generate-utils( rounded, border-radius, $kendo-border-radii, $css-var: "border-radius" );
diff --git a/packages/utils/scss/border/_border-style.scss b/packages/utils/scss/border/_border-style.scss
index 1daada42ccd..e883b9b869b 100644
--- a/packages/utils/scss/border/_border-style.scss
+++ b/packages/utils/scss/border/_border-style.scss
@@ -244,15 +244,17 @@
 /// @group border-style
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-border-style"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--border--border-style() {
-    @include module-render("utils-border-style") {
+    @include import-once("utils-border-style") {
 
         // Border style utility classes
-        $kendo-utils-border-style: k-map-get( $kendo-utils, "border-style" ) !default;
+        $kendo-utils-border-style: map.get( $kendo-utils, "border-style" ) !default;
         @include generate-utils( border, border-style, $kendo-utils-border-style );
         @include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
         @include generate-utils( border-r, border-right-style, $kendo-utils-border-style );
diff --git a/packages/utils/scss/border/_border-width.scss b/packages/utils/scss/border/_border-width.scss
index 9e4e1882511..a90351d7770 100644
--- a/packages/utils/scss/border/_border-width.scss
+++ b/packages/utils/scss/border/_border-width.scss
@@ -208,15 +208,17 @@
 /// @group border-width
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-border-width"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--border--border-width() {
-    @include module-render("utils-border-width") {
+    @include import-once("utils-border-width") {
 
         // Border width utility classes
-        $kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
+        $kendo-utils-border-width: map.get( $kendo-utils, "border-width" ) !default;
         @include generate-utils( border, border-width, $kendo-utils-border-width );
         @include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
         @include generate-utils( border-r, border-right-width, $kendo-utils-border-width );
diff --git a/packages/utils/scss/border/_outline-color.scss b/packages/utils/scss/border/_outline-color.scss
index 3875e96e765..0b4960fc67f 100644
--- a/packages/utils/scss/border/_outline-color.scss
+++ b/packages/utils/scss/border/_outline-color.scss
@@ -28,15 +28,17 @@
 /// @group outline-color
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-outline-color"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;;
 
 @mixin kendo-utils--border--outline-color() {
-    @include module-render("utils-outline-color") {
+    @include import-once("utils-outline-color") {
 
         // Outline color utility classes
-        $kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
+        $kendo-utils-outline-color: map.get( $kendo-utils, "outline-color" ) !default;
         @include generate-utils( outline, outline-color, $kendo-utils-outline-color, $css-var: 'color' );
 
     }
diff --git a/packages/utils/scss/border/_outline-offset.scss b/packages/utils/scss/border/_outline-offset.scss
index dfe0d10fe62..1b379e182eb 100644
--- a/packages/utils/scss/border/_outline-offset.scss
+++ b/packages/utils/scss/border/_outline-offset.scss
@@ -28,15 +28,17 @@
 /// @group outline-offset
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-outline-offset"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--border--outline-offset() {
-    @include module-render("utils-outline-offset") {
+    @include import-once("utils-outline-offset") {
 
         // Outline offset utility classes
-        $kendo-utils-outline-offset: k-map-get( $kendo-utils, "outline-offset" ) !default;
+        $kendo-utils-outline-offset: map.get( $kendo-utils, "outline-offset" ) !default;
         @include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );
 
     }
diff --git a/packages/utils/scss/border/_outline-style.scss b/packages/utils/scss/border/_outline-style.scss
index 8b10cf0c078..703bb34f318 100644
--- a/packages/utils/scss/border/_outline-style.scss
+++ b/packages/utils/scss/border/_outline-style.scss
@@ -34,15 +34,17 @@
 /// @group outline-style
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-outline-style"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--border--outline-style() {
-    @include module-render("utils-outline-style") {
+    @include import-once("utils-outline-style") {
 
         // Outline style utility classes
-        $kendo-utils-outline-style: k-map-get( $kendo-utils, "outline-style" ) !default;
+        $kendo-utils-outline-style: map.get( $kendo-utils, "outline-style" ) !default;
         @include generate-utils( outline, outline-style, $kendo-utils-outline-style );
 
     }
diff --git a/packages/utils/scss/border/_outline-width.scss b/packages/utils/scss/border/_outline-width.scss
index 6280799d83a..8dfc048c33f 100644
--- a/packages/utils/scss/border/_outline-width.scss
+++ b/packages/utils/scss/border/_outline-width.scss
@@ -28,15 +28,17 @@
 /// @group outline-width
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-outline-width"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--border--outline-width() {
-    @include module-render("utils-outline-width") {
+    @include import-once("utils-outline-width") {
 
     // Outline width utility classes
-    $kendo-utils-outline-width: k-map-get( $kendo-utils, "outline-width" ) !default;
+    $kendo-utils-outline-width: map.get( $kendo-utils, "outline-width" ) !default;
     @include generate-utils( outline, outline-width, $kendo-utils-outline-width );
 
     }
diff --git a/packages/utils/scss/border/index.import.scss b/packages/utils/scss/border/index.import.scss
index b55ace18b7b..faba5214cdc 100644
--- a/packages/utils/scss/border/index.import.scss
+++ b/packages/utils/scss/border/index.import.scss
@@ -1,11 +1,11 @@
-@import "./_border-color.scss";
-@import "./_border-radius.scss";
-@import "./_border-style.scss";
-@import "./_border-width.scss";
-@import "./_outline-color.scss";
-@import "./_outline-offset.scss";
-@import "./_outline-style.scss";
-@import "./_outline-width.scss";
+@use "./_border-color.scss" as *;
+@use "./_border-radius.scss" as *;
+@use "./_border-style.scss" as *;
+@use "./_border-width.scss" as *;
+@use "./_outline-color.scss" as *;
+@use "./_outline-offset.scss" as *;
+@use "./_outline-style.scss" as *;
+@use "./_outline-width.scss" as *;
 
 
 @mixin kendo-utils--border() {
diff --git a/packages/utils/scss/effects/_opacity.scss b/packages/utils/scss/effects/_opacity.scss
index a822b921fbf..5f740057a90 100644
--- a/packages/utils/scss/effects/_opacity.scss
+++ b/packages/utils/scss/effects/_opacity.scss
@@ -10,15 +10,17 @@
 /// @group opacity
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-effects-opacity"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--effects--opacity() {
-    @include module-render("utils-effects-opacity") {
+    @include import-once("utils-effects-opacity") {
 
         // opacity utility classes
-        $kendo-utils-opacity: k-map-get( $kendo-utils, "opacity" ) !default;
+        $kendo-utils-opacity: map.get( $kendo-utils, "opacity" ) !default;
         @include generate-utils( opacity, opacity, $kendo-utils-opacity );
 
     }
diff --git a/packages/utils/scss/effects/index.import.scss b/packages/utils/scss/effects/index.import.scss
index 8557dc7e9e9..5d389476639 100644
--- a/packages/utils/scss/effects/index.import.scss
+++ b/packages/utils/scss/effects/index.import.scss
@@ -1,6 +1,6 @@
 // box shadow
 // box shadow color
-@import "./_opacity.scss";
+@use "./_opacity.scss" as *;
 
 @mixin kendo-utils--effects() {
     @include kendo-utils--effects--opacity();
diff --git a/packages/utils/scss/elevation/index.import.scss b/packages/utils/scss/elevation/index.import.scss
index 03172021272..19bcd9f19ab 100644
--- a/packages/utils/scss/elevation/index.import.scss
+++ b/packages/utils/scss/elevation/index.import.scss
@@ -1,11 +1,11 @@
-@import "@progress/kendo-theme-core/scss/elevation/index.import.scss";
+@use "@progress/kendo-theme-core/scss/elevation/index.import.scss" as *;
+@use "../_globals.scss" as *;
 
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-elevation"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--elevation {
-    @include module-render("utils-elevation") {
+    @include import-once("utils-elevation") {
         @include generate-utils(elevation, box-shadow, $kendo-elevation, $css-var: "elevation");
     }
 }
diff --git a/packages/utils/scss/filter/_backdrop.scss b/packages/utils/scss/filter/_backdrop.scss
index 8471c0f8fff..73826a8f263 100644
--- a/packages/utils/scss/filter/_backdrop.scss
+++ b/packages/utils/scss/filter/_backdrop.scss
@@ -28,15 +28,17 @@
 /// @group backdrop-blur
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-filter-backdrop"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--filter--backdrop() {
-    @include module-render("utils-filter-backdrop") {
+    @include import-once("utils-filter-backdrop") {
 
         // backdrop utility classes
-        $kendo-utils-backdrop-blur: k-map-get( $kendo-utils, "backdrop-blur" ) !default;
+        $kendo-utils-backdrop-blur: map.get( $kendo-utils, "backdrop-blur" ) !default;
         @include generate-utils( backdrop-blur, backdrop-filter, $kendo-utils-backdrop-blur );
 
     }
diff --git a/packages/utils/scss/filter/index.import.scss b/packages/utils/scss/filter/index.import.scss
index c20309d0c60..4a6c9e11434 100644
--- a/packages/utils/scss/filter/index.import.scss
+++ b/packages/utils/scss/filter/index.import.scss
@@ -1,4 +1,4 @@
-@import "./_backdrop.scss";
+@use "./_backdrop.scss" as *;
 
 @mixin kendo-utils--filter() {
     @include kendo-utils--filter--backdrop();
diff --git a/packages/utils/scss/flex-grid/_align-content.scss b/packages/utils/scss/flex-grid/_align-content.scss
index d7fa8505f73..725f51b29dd 100644
--- a/packages/utils/scss/flex-grid/_align-content.scss
+++ b/packages/utils/scss/flex-grid/_align-content.scss
@@ -76,15 +76,17 @@
 /// @group align-content
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-align-content"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--align-content() {
-    @include module-render("utils-flex-grid-align-content") {
+    @include import-once("utils-flex-grid-align-content") {
 
         // Align content utility classes
-        $kendo-utils-align-content: k-map-get( $kendo-utils, "align-content" ) !default;
+        $kendo-utils-align-content: map.get( $kendo-utils, "align-content" ) !default;
         @include generate-utils( align-content, align-content, $kendo-utils-align-content );
 
     }
diff --git a/packages/utils/scss/flex-grid/_align-items.scss b/packages/utils/scss/flex-grid/_align-items.scss
index 963a8339da3..4bd2c494269 100644
--- a/packages/utils/scss/flex-grid/_align-items.scss
+++ b/packages/utils/scss/flex-grid/_align-items.scss
@@ -70,15 +70,17 @@
 /// @group align-items
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-align-items"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--align-items() {
-    @include module-render("utils-flex-grid-align-items") {
+    @include import-once("utils-flex-grid-align-items") {
 
         // Align items utility classes
-        $kendo-utils-align-items: k-map-get( $kendo-utils, "align-items" ) !default;
+        $kendo-utils-align-items: map.get( $kendo-utils, "align-items" ) !default;
         @include generate-utils( align-items, align-items, $kendo-utils-align-items );
 
     }
diff --git a/packages/utils/scss/flex-grid/_align-self.scss b/packages/utils/scss/flex-grid/_align-self.scss
index 54e0104001a..db5c20e449e 100644
--- a/packages/utils/scss/flex-grid/_align-self.scss
+++ b/packages/utils/scss/flex-grid/_align-self.scss
@@ -76,15 +76,17 @@
 /// @group align-self
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-align-self"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--align-self() {
-    @include module-render("utils-flex-grid-align-self") {
+    @include import-once("utils-flex-grid-align-self") {
 
         // Align self utility classes
-        $kendo-utils-align-self: k-map-get( $kendo-utils, "align-self" ) !default;
+        $kendo-utils-align-self: map.get( $kendo-utils, "align-self" ) !default;
         @include generate-utils( align-self, align-self, $kendo-utils-align-self );
 
     }
diff --git a/packages/utils/scss/flex-grid/_flex-basis.scss b/packages/utils/scss/flex-grid/_flex-basis.scss
index 87277e35f5a..cc666d78d56 100644
--- a/packages/utils/scss/flex-grid/_flex-basis.scss
+++ b/packages/utils/scss/flex-grid/_flex-basis.scss
@@ -10,15 +10,17 @@
 /// @group flex-basis
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-flex-basis"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--flex-basis() {
-    @include module-render("utils-flex-grid-flex-basis") {
+    @include import-once("utils-flex-grid-flex-basis") {
 
         // Flex basis utility classes
-        $kendo-utils-flex-basis: k-map-get( $kendo-utils, "flex-basis" ) !default;
+        $kendo-utils-flex-basis: map.get( $kendo-utils, "flex-basis" ) !default;;
         @include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );
         @include generate-utils( flex-basis, flex-basis, $kendo-utils-flex-basis );
 
diff --git a/packages/utils/scss/flex-grid/_flex-direction.scss b/packages/utils/scss/flex-grid/_flex-direction.scss
index c92a15bc046..1f0cf32f795 100644
--- a/packages/utils/scss/flex-grid/_flex-direction.scss
+++ b/packages/utils/scss/flex-grid/_flex-direction.scss
@@ -22,15 +22,17 @@
 /// @group flex-direction
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-flex-direction"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--flex-direction() {
-    @include module-render("utils-flex-grid-flex-direction") {
+    @include import-once("utils-flex-grid-flex-direction") {
 
         // Flex direction utility classes
-        $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
+        $kendo-utils-flex-direction: map.get( $kendo-utils, "flex-direction" ) !default;
         @include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );
 
 
@@ -44,7 +46,7 @@
 @mixin kendo-utils--flex-grid--flex-direction--responsive($key) {
 
     // Flex direction responsive utility classes
-    $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
+    $kendo-utils-flex-direction: map.get( $kendo-utils, "flex-direction" ) !default;
     @include generate-utils( flex-#{$key}, flex-direction, $kendo-utils-flex-direction, $important: false );
 
 }
diff --git a/packages/utils/scss/flex-grid/_flex-grow.scss b/packages/utils/scss/flex-grid/_flex-grow.scss
index da9215e78f3..c08c9510068 100644
--- a/packages/utils/scss/flex-grid/_flex-grow.scss
+++ b/packages/utils/scss/flex-grid/_flex-grow.scss
@@ -10,15 +10,17 @@
 /// @group flex-grow
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-flex-grow"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--flex-grow() {
-    @include module-render("utils-flex-grid-flex-grow") {
+    @include import-once("utils-flex-grid-flex-grow") {
 
         // Flex grow utility classes
-        $kendo-utils-flex-grow: k-map-get( $kendo-utils, "flex-grow" ) !default;
+        $kendo-utils-flex-grow: map.get( $kendo-utils, "flex-grow" ) !default;
         @include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );
         @include generate-utils( flex-grow, flex-grow, $kendo-utils-flex-grow );
 
diff --git a/packages/utils/scss/flex-grid/_flex-shrink.scss b/packages/utils/scss/flex-grid/_flex-shrink.scss
index 10aecf5cf98..1c818b8081f 100644
--- a/packages/utils/scss/flex-grid/_flex-shrink.scss
+++ b/packages/utils/scss/flex-grid/_flex-shrink.scss
@@ -10,15 +10,17 @@
 /// @group flex-shrink
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-flex-shrink"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--flex-shrink() {
-    @include module-render("utils-flex-grid-flex-shrink") {
+    @include import-once("utils-flex-grid-flex-shrink") {
 
         // Flex shrink utility classes
-        $kendo-utils-flex-shrink: k-map-get( $kendo-utils, "flex-shrink" ) !default;
+        $kendo-utils-flex-shrink: map.get( $kendo-utils, "flex-shrink" ) !default;
         @include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );
         @include generate-utils( flex-shrink, flex-shrink, $kendo-utils-flex-shrink );
 
diff --git a/packages/utils/scss/flex-grid/_flex-wrap.scss b/packages/utils/scss/flex-grid/_flex-wrap.scss
index 7d847cacf54..7a3e90fc068 100644
--- a/packages/utils/scss/flex-grid/_flex-wrap.scss
+++ b/packages/utils/scss/flex-grid/_flex-wrap.scss
@@ -16,15 +16,17 @@
 /// @group flex-wrap
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-flex-wrap"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--flex-wrap() {
-    @include module-render("utils-flex-grid-flex-wrap") {
+    @include import-once("utils-flex-grid-flex-wrap") {
 
         // Flex wrap utility classes
-        $kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
+        $kendo-utils-flex-wrap: map.get( $kendo-utils, "flex-wrap" ) !default;
         @include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );
 
     }
diff --git a/packages/utils/scss/flex-grid/_flex.scss b/packages/utils/scss/flex-grid/_flex.scss
index f4dff995fd3..17d68c2be9a 100644
--- a/packages/utils/scss/flex-grid/_flex.scss
+++ b/packages/utils/scss/flex-grid/_flex.scss
@@ -22,15 +22,17 @@
 /// @group flex
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-flex"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--flex() {
-    @include module-render("utils-flex-grid-flex") {
+    @include import-once("utils-flex-grid-flex") {
 
         // Flex utility classes
-        $kendo-utils-flex: k-map-get( $kendo-utils, "flex" ) !default;
+        $kendo-utils-flex: map.get( $kendo-utils, "flex" ) !default;
         @include generate-utils( flex, flex, $kendo-utils-flex );
 
     }
diff --git a/packages/utils/scss/flex-grid/_gap.scss b/packages/utils/scss/flex-grid/_gap.scss
index 9cca11b9c3e..fd3023ee7f0 100644
--- a/packages/utils/scss/flex-grid/_gap.scss
+++ b/packages/utils/scss/flex-grid/_gap.scss
@@ -178,15 +178,17 @@
 /// @group gap
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-gap"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--gap() {
-    @include module-render("utils-flex-grid-gap") {
+    @include import-once("utils-flex-grid-gap") {
 
         // Gap utility classes
-        $kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
+        $kendo-utils-gap: map.get( $kendo-utils, "gap" ) !default;
         @include generate-utils( gap, gap, $kendo-utils-gap, $css-var: "spacing" );
         @include generate-utils( gap-x, column-gap, $kendo-utils-gap, $css-var: "spacing" );
         @include generate-utils( gap-y, row-gap, $kendo-utils-gap, $css-var: "spacing" );
@@ -197,7 +199,7 @@
 @mixin kendo-utils--flex-grid--gap--responsive($key) {
 
     // Gap responsive utility classes
-    $kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
+    $kendo-utils-gap: map.get( $kendo-utils, "gap" ) !default;
     @include generate-utils( gap-#{$key}, gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
     @include generate-utils( gap-x-#{$key}, column-gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
     @include generate-utils( gap-y-#{$key}, row-gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
diff --git a/packages/utils/scss/flex-grid/_grid-auto-columns.scss b/packages/utils/scss/flex-grid/_grid-auto-columns.scss
index 0140d04dbf0..c2d7a8ea0bd 100644
--- a/packages/utils/scss/flex-grid/_grid-auto-columns.scss
+++ b/packages/utils/scss/flex-grid/_grid-auto-columns.scss
@@ -22,15 +22,17 @@
 /// @group grid-auto-columns
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-grid-auto-columns"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--grid-auto-columns() {
-    @include module-render("utils-flex-grid-grid-auto-columns") {
+    @include import-once("utils-flex-grid-grid-auto-columns") {
 
         // Grid auto columns utility classes
-        $kendo-utils-grid-auto-columns: k-map-get( $kendo-utils, "grid-auto-columns" ) !default;
+        $kendo-utils-grid-auto-columns: map.get( $kendo-utils, "grid-auto-columns" ) !default;
         @include generate-utils( grid-auto-cols, grid-auto-columns, $kendo-utils-grid-auto-columns );
 
     }
diff --git a/packages/utils/scss/flex-grid/_grid-auto-flow.scss b/packages/utils/scss/flex-grid/_grid-auto-flow.scss
index ee8aca45196..2a52017fd9e 100644
--- a/packages/utils/scss/flex-grid/_grid-auto-flow.scss
+++ b/packages/utils/scss/flex-grid/_grid-auto-flow.scss
@@ -34,15 +34,17 @@
 /// @group grid-auto-flow
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-grid-auto-flow"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--grid-auto-flow() {
-    @include module-render("utils-flex-grid-grid-auto-flow") {
+    @include import-once("utils-flex-grid-grid-auto-flow") {
 
         // Grid auto flow utility classes
-        $kendo-utils-grid-auto-flow: k-map-get( $kendo-utils, "grid-auto-flow" ) !default;
+        $kendo-utils-grid-auto-flow: map.get( $kendo-utils, "grid-auto-flow" ) !default;
         @include generate-utils( grid-flow, grid-auto-flow, $kendo-utils-grid-auto-flow );
 
     }
diff --git a/packages/utils/scss/flex-grid/_grid-auto-rows.scss b/packages/utils/scss/flex-grid/_grid-auto-rows.scss
index 00588d00f67..900f66a973e 100644
--- a/packages/utils/scss/flex-grid/_grid-auto-rows.scss
+++ b/packages/utils/scss/flex-grid/_grid-auto-rows.scss
@@ -22,15 +22,17 @@
 /// @group grid-auto-rows
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-grid-auto-rows"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--grid-auto-rows() {
-    @include module-render("utils-flex-grid-grid-auto-rows") {
+    @include import-once("utils-flex-grid-grid-auto-rows") {
 
         // Grid auto rows utility classes
-        $kendo-utils-grid-auto-rows: k-map-get( $kendo-utils, "grid-auto-rows" ) !default;
+        $kendo-utils-grid-auto-rows: map.get( $kendo-utils, "grid-auto-rows" ) !default;
         @include generate-utils( grid-auto-rows, grid-auto-rows, $kendo-utils-grid-auto-rows );
 
     }
diff --git a/packages/utils/scss/flex-grid/_grid-column-start-end.scss b/packages/utils/scss/flex-grid/_grid-column-start-end.scss
index ac020635d28..bb56bf295af 100644
--- a/packages/utils/scss/flex-grid/_grid-column-start-end.scss
+++ b/packages/utils/scss/flex-grid/_grid-column-start-end.scss
@@ -16,23 +16,25 @@
 /// @group grid-column-start
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-grid-column-start-end"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--grid-column-start-end() {
-    @include module-render("utils-flex-grid-grid-column-start-end") {
+    @include import-once("utils-flex-grid-grid-column-start-end") {
 
     // Grid column span utility classes
-    $kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
+    $kendo-utils-grid-column-span: map.get( $kendo-utils, "grid-column-span" ) !default;
     @include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
 
     // Grid column start utility classes
-    $kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
+    $kendo-utils-grid-column-start: map.get( $kendo-utils, "grid-column-start" ) !default;
     @include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
 
     // Grid column end utility classes
-    $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
+    $kendo-utils-grid-column-end: map.get( $kendo-utils, "grid-column-end" ) !default;
     @include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
 
 
@@ -47,15 +49,15 @@
 @mixin kendo-utils--flex-grid--grid-column-start-end--responsive($key) {
 
     // Grid column span responsive utility classes
-    $kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
+    $kendo-utils-grid-column-span: map.get( $kendo-utils, "grid-column-span" ) !default;
     @include generate-utils( col-span-#{$key}, grid-column, $kendo-utils-grid-column-span, $important: false );
 
     // Grid column start responsive utility classes
-    $kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
+    $kendo-utils-grid-column-start: map.get( $kendo-utils, "grid-column-start" ) !default;
     @include generate-utils( col-start-#{$key}, grid-column-start, $kendo-utils-grid-column-start, $important: false );
 
     // Grid column end responsive utility classes
-    $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
+    $kendo-utils-grid-column-end: map.get( $kendo-utils, "grid-column-end" ) !default;
     @include generate-utils( col-end-#{$key}, grid-column-end, $kendo-utils-grid-column-end, $important: false );
 
 }
diff --git a/packages/utils/scss/flex-grid/_grid-row-start-end.scss b/packages/utils/scss/flex-grid/_grid-row-start-end.scss
index ea34ea0d80d..6bb45e387f0 100644
--- a/packages/utils/scss/flex-grid/_grid-row-start-end.scss
+++ b/packages/utils/scss/flex-grid/_grid-row-start-end.scss
@@ -16,25 +16,27 @@
 /// @group grid-row-start
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-grid-row-start-end"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--grid-row-start-end() {
-    @include module-render("utils-flex-grid-grid-row-start-end") {
+    @include import-once("utils-flex-grid-grid-row-start-end") {
 
         // Grid row start/end utility classes
-        $kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
+        $kendo-utils-grid-row-start: map.get( $kendo-utils, "grid-row-start" ) !default;
         @include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );
 
 
         // Grid row start/end utility classes
-        $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
+        $kendo-utils-grid-row-end: map.get( $kendo-utils, "grid-row-end" ) !default;
         @include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );
 
 
         // Grid row span utility classes
-        $kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
+        $kendo-utils-grid-row-span: map.get( $kendo-utils, "grid-row-span" ) !default;
         @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
 
 
@@ -49,11 +51,11 @@
 @mixin kendo-utils--flex-grid--grid-row-start-end--responsive($key) {
 
     // Grid row start responsive utility classes
-    $kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
+    $kendo-utils-grid-row-start: map.get( $kendo-utils, "grid-row-start" ) !default;
     @include generate-utils( row-start-#{$key}, grid-row-start, $kendo-utils-grid-row-start, $important: false );
 
     // Grid row end responsive utility classes
-    $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
+    $kendo-utils-grid-row-end: map.get( $kendo-utils, "grid-row-end" ) !default;
     @include generate-utils( row-end-#{$key}, grid-row-end, $kendo-utils-grid-row-end, $important: false );
 
 }
diff --git a/packages/utils/scss/flex-grid/_grid-template-columns.scss b/packages/utils/scss/flex-grid/_grid-template-columns.scss
index 682a659533b..a0bcd703aef 100644
--- a/packages/utils/scss/flex-grid/_grid-template-columns.scss
+++ b/packages/utils/scss/flex-grid/_grid-template-columns.scss
@@ -16,15 +16,17 @@
 /// @group grid-template-columns
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-grid-template-columns"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--grid-template-columns() {
-    @include module-render("utils-flex-grid-grid-template-columns") {
+    @include import-once("utils-flex-grid-grid-template-columns") {
 
         // Grid template columns utility classes
-        $kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
+        $kendo-utils-grid-template-columns: map.get( $kendo-utils, "grid-template-columns" ) !default;
         @include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );
 
     }
@@ -33,7 +35,7 @@
 @mixin kendo-utils--flex-grid--grid-template-columns--responsive($key) {
 
     // Grid template columns responsive utility classes
-    $kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
+    $kendo-utils-grid-template-columns: map.get( $kendo-utils, "grid-template-columns" ) !default;
     @include generate-utils( grid-cols-#{$key}, grid-template-columns, $kendo-utils-grid-template-columns, $important: false );
 
 }
diff --git a/packages/utils/scss/flex-grid/_grid-template-rows.scss b/packages/utils/scss/flex-grid/_grid-template-rows.scss
index 793d7f833c6..6ce3c017174 100644
--- a/packages/utils/scss/flex-grid/_grid-template-rows.scss
+++ b/packages/utils/scss/flex-grid/_grid-template-rows.scss
@@ -16,15 +16,17 @@
 /// @group grid-template-rows
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-grid-template-rows"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--grid-template-rows() {
-    @include module-render("utils-flex-grid-grid-template-rows") {
+    @include import-once("utils-flex-grid-grid-template-rows") {
 
         // Grid template rows utility classes
-        $kendo-utils-grid-template-rows: k-map-get( $kendo-utils, "grid-template-rows" ) !default;
+        $kendo-utils-grid-template-rows: map.get( $kendo-utils, "grid-template-rows" ) !default;
         @include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );
 
     }
diff --git a/packages/utils/scss/flex-grid/_justify-content.scss b/packages/utils/scss/flex-grid/_justify-content.scss
index c31d6df452d..f57b7ccec28 100644
--- a/packages/utils/scss/flex-grid/_justify-content.scss
+++ b/packages/utils/scss/flex-grid/_justify-content.scss
@@ -76,15 +76,17 @@
 /// @group justify-content
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-justify-content"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--justify-content() {
-    @include module-render("utils-flex-grid-justify-content") {
+    @include import-once("utils-flex-grid-justify-content") {
 
         // Justify content utility classes
-        $kendo-utils-justify-content: k-map-get( $kendo-utils, "justify-content" ) !default;
+        $kendo-utils-justify-content: map.get( $kendo-utils, "justify-content" ) !default;
         @include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );
 
 
diff --git a/packages/utils/scss/flex-grid/_justify-items.scss b/packages/utils/scss/flex-grid/_justify-items.scss
index 4de4e5a284b..3f869737d63 100644
--- a/packages/utils/scss/flex-grid/_justify-items.scss
+++ b/packages/utils/scss/flex-grid/_justify-items.scss
@@ -82,15 +82,17 @@
 /// @group justify-items
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-justify-items"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--justify-items() {
-    @include module-render("utils-flex-grid-justify-items") {
+    @include import-once("utils-flex-grid-justify-items") {
 
         // Justify items utility classes
-        $kendo-utils-justify-items: k-map-get( $kendo-utils, "justify-items" ) !default;
+        $kendo-utils-justify-items: map.get( $kendo-utils, "justify-items" ) !default;
         @include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );
 
     }
diff --git a/packages/utils/scss/flex-grid/_justify-self.scss b/packages/utils/scss/flex-grid/_justify-self.scss
index 33bc0ffcd65..1db1e428108 100644
--- a/packages/utils/scss/flex-grid/_justify-self.scss
+++ b/packages/utils/scss/flex-grid/_justify-self.scss
@@ -76,15 +76,17 @@
 /// @group justify-self
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-justify-self"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--justify-self() {
-    @include module-render("utils-flex-grid-justify-self") {
+    @include import-once("utils-flex-grid-justify-self") {
 
         // Justify self utility classes
-        $kendo-utils-justify-self: k-map-get( $kendo-utils, "justify-self" ) !default;
+        $kendo-utils-justify-self: map.get( $kendo-utils, "justify-self" ) !default;
         @include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );
 
     }
diff --git a/packages/utils/scss/flex-grid/_order.scss b/packages/utils/scss/flex-grid/_order.scss
index 4aa55e9dbd4..7c647a81ea5 100644
--- a/packages/utils/scss/flex-grid/_order.scss
+++ b/packages/utils/scss/flex-grid/_order.scss
@@ -22,15 +22,17 @@
 /// @group order
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-order"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--order() {
-    @include module-render("utils-flex-grid-order") {
+    @include import-once("utils-flex-grid-order") {
 
         // Order utility classes
-        $kendo-utils-order: k-map-get( $kendo-utils, "order" ) !default;
+        $kendo-utils-order: map.get( $kendo-utils, "order" ) !default;
         @include generate-utils( order, order, $kendo-utils-order );
 
     }
diff --git a/packages/utils/scss/flex-grid/_place-content.scss b/packages/utils/scss/flex-grid/_place-content.scss
index 76250e2f781..e54bc022d48 100644
--- a/packages/utils/scss/flex-grid/_place-content.scss
+++ b/packages/utils/scss/flex-grid/_place-content.scss
@@ -76,15 +76,17 @@
 /// @group place-content
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-place-content"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--place-content() {
-    @include module-render("utils-flex-grid-place-content") {
+    @include import-once("utils-flex-grid-place-content") {
 
         // Place content utility classes
-        $kendo-utils-place-content: k-map-get( $kendo-utils, "place-content" ) !default;
+        $kendo-utils-place-content: map.get( $kendo-utils, "place-content" ) !default;
         @include generate-utils( place-content, place-content, $kendo-utils-place-content );
 
     }
diff --git a/packages/utils/scss/flex-grid/_place-items.scss b/packages/utils/scss/flex-grid/_place-items.scss
index e79155a0c96..d3be815e5a1 100644
--- a/packages/utils/scss/flex-grid/_place-items.scss
+++ b/packages/utils/scss/flex-grid/_place-items.scss
@@ -58,15 +58,17 @@
 /// @group place-items
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-place-items"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--place-items() {
-    @include module-render("utils-flex-grid-place-items") {
+    @include import-once("utils-flex-grid-place-items") {
 
         // Place items utility classes
-        $kendo-utils-place-items: k-map-get( $kendo-utils, "place-items" ) !default;
+        $kendo-utils-place-items: map.get( $kendo-utils, "place-items" ) !default;
         @include generate-utils( place-items, place-items, $kendo-utils-place-items );
 
     }
diff --git a/packages/utils/scss/flex-grid/_place-self.scss b/packages/utils/scss/flex-grid/_place-self.scss
index eb0b29a297f..acc7254c7be 100644
--- a/packages/utils/scss/flex-grid/_place-self.scss
+++ b/packages/utils/scss/flex-grid/_place-self.scss
@@ -64,15 +64,17 @@
 /// @group place-self
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-flex-grid-place-self"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--flex-grid--place-self() {
-    @include module-render("utils-flex-grid-place-self") {
+    @include import-once("utils-flex-grid-place-self") {
 
         // Place self utility classes
-        $kendo-utils-place-self: k-map-get( $kendo-utils, "place-self" ) !default;
+        $kendo-utils-place-self: map.get( $kendo-utils, "place-self" ) !default;
         @include generate-utils( place-self, place-self, $kendo-utils-place-self );
 
     }
diff --git a/packages/utils/scss/flex-grid/index.import.scss b/packages/utils/scss/flex-grid/index.import.scss
index d7d2bd17b77..56cf95c78a5 100644
--- a/packages/utils/scss/flex-grid/index.import.scss
+++ b/packages/utils/scss/flex-grid/index.import.scss
@@ -1,27 +1,52 @@
-@import "./_align-content.scss";
-@import "./_align-items.scss";
-@import "./_align-self.scss";
-@import "./_flex-basis.scss";
-@import "./_flex-direction.scss";
-@import "./_flex-grow.scss";
-@import "./_flex-shrink.scss";
-@import "./_flex-wrap.scss";
-@import "./_flex.scss";
-@import "./_gap.scss";
-@import "./_grid-auto-columns.scss";
-@import "./_grid-auto-flow.scss";
-@import "./_grid-auto-rows.scss";
-@import "./_grid-column-start-end.scss";
-@import "./_grid-row-start-end.scss";
-@import "./_grid-template-columns.scss";
-@import "./_grid-template-rows.scss";
-@import "./_justify-content.scss";
-@import "./_justify-items.scss";
-@import "./_justify-self.scss";
-@import "./_order.scss";
-@import "./_place-content.scss";
-@import "./_place-items.scss";
-@import "./_place-self.scss";
+@forward "./_align-content.scss";
+@forward "./_align-items.scss";
+@forward "./_align-self.scss";
+@forward "./_flex-basis.scss";
+@forward "./_flex-direction.scss";
+@forward "./_flex-grow.scss";
+@forward "./_flex-shrink.scss";
+@forward "./_flex-wrap.scss";
+@forward "./_flex.scss";
+@forward "./_gap.scss";
+@forward "./_grid-auto-columns.scss";
+@forward "./_grid-auto-flow.scss";
+@forward "./_grid-auto-rows.scss";
+@forward "./_grid-column-start-end.scss";
+@forward "./_grid-row-start-end.scss";
+@forward "./_grid-template-columns.scss";
+@forward "./_grid-template-rows.scss";
+@forward "./_justify-content.scss";
+@forward "./_justify-items.scss";
+@forward "./_justify-self.scss";
+@forward "./_order.scss";
+@forward "./_place-content.scss";
+@forward "./_place-items.scss";
+@forward "./_place-self.scss";
+
+@use "./_align-content.scss" as *;
+@use "./_align-items.scss" as *;
+@use "./_align-self.scss" as *;
+@use "./_flex-basis.scss" as *;
+@use "./_flex-direction.scss" as *;
+@use "./_flex-grow.scss" as *;
+@use "./_flex-shrink.scss" as *;
+@use "./_flex-wrap.scss" as *;
+@use "./_flex.scss" as *;
+@use "./_gap.scss" as *;
+@use "./_grid-auto-columns.scss" as *;
+@use "./_grid-auto-flow.scss" as *;
+@use "./_grid-auto-rows.scss" as *;
+@use "./_grid-column-start-end.scss" as *;
+@use "./_grid-row-start-end.scss" as *;
+@use "./_grid-template-columns.scss" as *;
+@use "./_grid-template-rows.scss" as *;
+@use "./_justify-content.scss" as *;
+@use "./_justify-items.scss" as *;
+@use "./_justify-self.scss" as *;
+@use "./_order.scss" as *;
+@use "./_place-content.scss" as *;
+@use "./_place-items.scss" as *;
+@use "./_place-self.scss" as *;
 
 
 @mixin kendo-utils--flex-grid() {
diff --git a/packages/utils/scss/index.import.scss b/packages/utils/scss/index.import.scss
index 60e86286a53..4e8e03db024 100644
--- a/packages/utils/scss/index.import.scss
+++ b/packages/utils/scss/index.import.scss
@@ -1,25 +1,42 @@
-@import "./_functions.scss";
-@import "./_variables.scss";
-@import "./_mixins.scss";
+@forward "./_globals.scss";
+@forward "./accessibility/index.import.scss";
+@forward "./layout/index.import.scss";
+@forward "./responsive-layout/index.import.scss";
+@forward "./flex-grid/index.import.scss";
+@forward "./spacing/index.import.scss";
+@forward "./sizing/index.import.scss";
+@forward "./typography/index.import.scss";
+@forward "./background/index.import.scss";
+@forward "./border/index.import.scss";
+@forward "./effects/index.import.scss";
+@forward "./filter/index.import.scss";
+@forward "./table/index.import.scss";
+// transition
+@forward "./transform/index.import.scss";
+@forward "./interactivity/index.import.scss";
+@forward "./svg/index.import.scss";
+
+@forward "./elevation/index.import.scss";
 
-@import "./accessibility/index.import.scss";
-@import "./layout/index.import.scss";
-@import "./responsive-layout/index.import.scss";
-@import "./flex-grid/index.import.scss";
-@import "./spacing/index.import.scss";
-@import "./sizing/index.import.scss";
-@import "./typography/index.import.scss";
-@import "./background/index.import.scss";
-@import "./border/index.import.scss";
-@import "./effects/index.import.scss";
-@import "./filter/index.import.scss";
-@import "./table/index.import.scss";
+@use "./_globals.scss" as *;
+@use "./accessibility/index.import.scss" as *;
+@use "./layout/index.import.scss" as *;
+@use "./responsive-layout/index.import.scss" as *;
+@use "./flex-grid/index.import.scss" as *;
+@use "./spacing/index.import.scss" as *;
+@use "./sizing/index.import.scss" as *;
+@use "./typography/index.import.scss" as *;
+@use "./background/index.import.scss" as *;
+@use "./border/index.import.scss" as *;
+@use "./effects/index.import.scss" as *;
+@use "./filter/index.import.scss" as *;
+@use "./table/index.import.scss" as *;
 // transition
-@import "./transform/index.import.scss";
-@import "./interactivity/index.import.scss";
-@import "./svg/index.import.scss";
+@use "./transform/index.import.scss" as *;
+@use "./interactivity/index.import.scss" as *;
+@use "./svg/index.import.scss" as *;
 
-@import "./elevation/index.import.scss";
+@use "./elevation/index.import.scss" as *;
 
 
 // Mixin for all styles
diff --git a/packages/utils/scss/interactivity/_accent-color.scss b/packages/utils/scss/interactivity/_accent-color.scss
index 61832187b03..559b794713f 100644
--- a/packages/utils/scss/interactivity/_accent-color.scss
+++ b/packages/utils/scss/interactivity/_accent-color.scss
@@ -1,14 +1,16 @@
 // TODO: docs
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-accent-color"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--accent-color() {
-    @include module-render("utils-interactivity-accent-color") {
+    @include import-once("utils-interactivity-accent-color") {
 
         // Accent color utility classes
-        $kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
+        $kendo-utils-accent-color: map.get( $kendo-utils, "accent-color" ) !default;
         @include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );
 
     }
diff --git a/packages/utils/scss/interactivity/_appearance.scss b/packages/utils/scss/interactivity/_appearance.scss
index db416176d88..c19eca08161 100644
--- a/packages/utils/scss/interactivity/_appearance.scss
+++ b/packages/utils/scss/interactivity/_appearance.scss
@@ -10,15 +10,17 @@
 /// @group appearance
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-appearance"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--appearance() {
-    @include module-render("utils-interactivity-appearance") {
+    @include import-once("utils-interactivity-appearance") {
 
         // Appearance utility classes
-        $kendo-utils-appearance: k-map-get( $kendo-utils, "appearance" ) !default;
+        $kendo-utils-appearance: map.get( $kendo-utils, "appearance" ) !default;
         @include generate-utils( appearance, appearance, $kendo-utils-appearance );
 
     }
diff --git a/packages/utils/scss/interactivity/_caret-color.scss b/packages/utils/scss/interactivity/_caret-color.scss
index 71938e89256..82a00d45f50 100644
--- a/packages/utils/scss/interactivity/_caret-color.scss
+++ b/packages/utils/scss/interactivity/_caret-color.scss
@@ -1,14 +1,16 @@
 // TODO: docs
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-caret-color"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--caret-color() {
-    @include module-render("utils-interactivity-caret-color") {
+    @include import-once("utils-interactivity-caret-color") {
 
         // Caret color utility classes
-        $kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
+        $kendo-utils-caret-color: map.get( $kendo-utils, "caret-color" ) !default;
         @include generate-utils( caret, caret-color, $kendo-utils-caret-color );
 
     }
diff --git a/packages/utils/scss/interactivity/_cursor.scss b/packages/utils/scss/interactivity/_cursor.scss
index 1d172c96433..ef12948609b 100644
--- a/packages/utils/scss/interactivity/_cursor.scss
+++ b/packages/utils/scss/interactivity/_cursor.scss
@@ -22,15 +22,17 @@
 /// @group cursor
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-cursor"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--cursor() {
-    @include module-render("utils-interactivity-cursor") {
+    @include import-once("utils-interactivity-cursor") {
 
         // Cursor utility classes
-        $kendo-utils-cursor: k-map-get( $kendo-utils, "cursor" ) !default;
+        $kendo-utils-cursor: map.get( $kendo-utils, "cursor" ) !default;
         @include generate-utils( cursor, cursor, $kendo-utils-cursor );
 
     }
diff --git a/packages/utils/scss/interactivity/_pointer-events.scss b/packages/utils/scss/interactivity/_pointer-events.scss
index f7dd7c12e9a..72194e1ce2f 100644
--- a/packages/utils/scss/interactivity/_pointer-events.scss
+++ b/packages/utils/scss/interactivity/_pointer-events.scss
@@ -10,15 +10,17 @@
 /// @group pointer-events
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-pointer-events"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--pointer-events() {
-    @include module-render("utils-interactivity-pointer-events") {
+    @include import-once("utils-interactivity-pointer-events") {
 
         // Pointer events utility classes
-        $kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !default;
+        $kendo-utils-pointer-events: map.get( $kendo-utils, "pointer-events" ) !default;
         @include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );
 
     }
diff --git a/packages/utils/scss/interactivity/_resize.scss b/packages/utils/scss/interactivity/_resize.scss
index 76e1ab5ed22..d0edce594ca 100644
--- a/packages/utils/scss/interactivity/_resize.scss
+++ b/packages/utils/scss/interactivity/_resize.scss
@@ -22,15 +22,17 @@
 /// @group resize
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-resize"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--resize() {
-    @include module-render("utils-interactivity-resize") {
+    @include import-once("utils-interactivity-resize") {
 
         // Resize utility classes
-        $kendo-utils-resize: k-map-get( $kendo-utils, "resize" ) !default;
+        $kendo-utils-resize: map.get( $kendo-utils, "resize" ) !default;
         @include generate-utils( resize, resize, $kendo-utils-resize );
 
     }
diff --git a/packages/utils/scss/interactivity/_scroll.scss b/packages/utils/scss/interactivity/_scroll.scss
index 5e8c9a77727..2942dc72ac2 100644
--- a/packages/utils/scss/interactivity/_scroll.scss
+++ b/packages/utils/scss/interactivity/_scroll.scss
@@ -322,20 +322,22 @@
 /// @group scroll
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-scroll"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--scroll() {
-    @include module-render("utils-interactivity-scroll") {
+    @include import-once("utils-interactivity-scroll") {
 
         // Scroll behavior utility classes
-        $kendo-utils-scroll-behavior: k-map-get( $kendo-utils, "scroll-behavior" ) !default;
+        $kendo-utils-scroll-behavior: map.get( $kendo-utils, "scroll-behavior" ) !default;
         @include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );
 
 
         // Scroll snap type utility classes
-        $kendo-utils-scroll-snap-type: k-map-get( $kendo-utils, "scroll-snap-type" ) !default;
+        $kendo-utils-scroll-snap-type: map.get( $kendo-utils, "scroll-snap-type" ) !default;
         @include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );
 
         // Custom scroll snap type utility classes
@@ -344,17 +346,17 @@
 
 
         // Scroll snap stop utility classes
-        $kendo-utils-scroll-snap-stop: k-map-get( $kendo-utils, "scroll-snap-stop" ) !default;
+        $kendo-utils-scroll-snap-stop: map.get( $kendo-utils, "scroll-snap-stop" ) !default;
         @include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );
 
 
         // Scroll snap align utility classes
-        $kendo-utils-scroll-snap-align: k-map-get( $kendo-utils, "scroll-snap-align" ) !default;
+        $kendo-utils-scroll-snap-align: map.get( $kendo-utils, "scroll-snap-align" ) !default;
         @include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );
 
 
         // Scroll margin utility classes
-        $kendo-utils-scroll-margin: k-map-get( $kendo-utils, "scroll-margin" ) !default;
+        $kendo-utils-scroll-margin: map.get( $kendo-utils, "scroll-margin" ) !default;
         @include generate-utils( scroll-m, scroll-margin, $kendo-utils-scroll-margin );
         @include generate-utils( scroll-mt, scroll-margin-top, $kendo-utils-scroll-margin );
         @include generate-utils( scroll-mr, scroll-margin-right, $kendo-utils-scroll-margin );
@@ -365,7 +367,7 @@
 
 
         // Scroll padding utility classes
-        $kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !default;
+        $kendo-utils-scroll-padding: map.get( $kendo-utils, "scroll-padding" ) !default;
         @include generate-utils( scroll-p, scroll-padding, $kendo-utils-scroll-padding );
         @include generate-utils( scroll-pt, scroll-padding-top, $kendo-utils-scroll-padding );
         @include generate-utils( scroll-pr, scroll-padding-right, $kendo-utils-scroll-padding );
diff --git a/packages/utils/scss/interactivity/_touch-action.scss b/packages/utils/scss/interactivity/_touch-action.scss
index b95a77f2f2e..c0b9b3105cb 100644
--- a/packages/utils/scss/interactivity/_touch-action.scss
+++ b/packages/utils/scss/interactivity/_touch-action.scss
@@ -58,15 +58,17 @@
 /// @group touch-action
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-touch-action"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--touch-action() {
-    @include module-render("utils-interactivity-touch-action") {
+    @include import-once("utils-interactivity-touch-action") {
 
         // Touch-action utility classes
-        $kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
+        $kendo-utils-touch-action: map.get( $kendo-utils, "touch-action" ) !default;
         @include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );
 
     }
diff --git a/packages/utils/scss/interactivity/_user-select.scss b/packages/utils/scss/interactivity/_user-select.scss
index 57816cff145..1e5eeac034d 100644
--- a/packages/utils/scss/interactivity/_user-select.scss
+++ b/packages/utils/scss/interactivity/_user-select.scss
@@ -28,15 +28,17 @@
 /// @group user-select
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-user-select"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--user-select() {
-    @include module-render("utils-interactivity-user-select") {
+    @include import-once("utils-interactivity-user-select") {
 
         // User select utility classes
-        $kendo-utils-user-select: k-map-get( $kendo-utils, "user-select" ) !default;
+        $kendo-utils-user-select: map.get( $kendo-utils, "user-select" ) !default;
         @include generate-utils( user-select, user-select, $kendo-utils-user-select );
 
     }
diff --git a/packages/utils/scss/interactivity/_will-change.scss b/packages/utils/scss/interactivity/_will-change.scss
index c43b989564b..58c6c3ef506 100644
--- a/packages/utils/scss/interactivity/_will-change.scss
+++ b/packages/utils/scss/interactivity/_will-change.scss
@@ -1,14 +1,16 @@
 // TODO: docs
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-interactivity-will-change"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--interactivity--will-change() {
-    @include module-render("utils-interactivity-will-change") {
+    @include import-once("utils-interactivity-will-change") {
 
         // Will change utility classes
-        $kendo-utils-will-change: k-map-get( $kendo-utils, "will-change" ) !default;
+        $kendo-utils-will-change: map.get( $kendo-utils, "will-change" ) !default;
         @include generate-utils( will-change, will-change, $kendo-utils-will-change );
 
     }
diff --git a/packages/utils/scss/interactivity/index.import.scss b/packages/utils/scss/interactivity/index.import.scss
index 7113b91a870..a1fa4211661 100644
--- a/packages/utils/scss/interactivity/index.import.scss
+++ b/packages/utils/scss/interactivity/index.import.scss
@@ -1,13 +1,24 @@
-@import "./_accent-color.scss";
-@import "./_appearance.scss";
-@import "./_caret-color.scss";
-@import "./_cursor.scss";
-@import "./_pointer-events.scss";
-@import "./_resize.scss";
-@import "./_scroll.scss";
-@import "./_touch-action.scss";
-@import "./_user-select.scss";
-@import "./_will-change.scss";
+@forward "./_accent-color.scss";
+@forward "./_appearance.scss";
+@forward "./_caret-color.scss";
+@forward "./_cursor.scss";
+@forward "./_pointer-events.scss";
+@forward "./_resize.scss";
+@forward "./_scroll.scss";
+@forward "./_touch-action.scss";
+@forward "./_user-select.scss";
+@forward "./_will-change.scss";
+
+@use "./_accent-color.scss" as *;
+@use "./_appearance.scss" as *;
+@use "./_caret-color.scss" as *;
+@use "./_cursor.scss" as *;
+@use "./_pointer-events.scss" as *;
+@use "./_resize.scss" as *;
+@use "./_scroll.scss" as *;
+@use "./_touch-action.scss" as *;
+@use "./_user-select.scss" as *;
+@use "./_will-change.scss" as *;
 
 
 @mixin kendo-utils--interactivity() {
diff --git a/packages/utils/scss/layout/_aspect-ratio.scss b/packages/utils/scss/layout/_aspect-ratio.scss
index a38e367ee6a..b27f79960a7 100644
--- a/packages/utils/scss/layout/_aspect-ratio.scss
+++ b/packages/utils/scss/layout/_aspect-ratio.scss
@@ -22,15 +22,17 @@
 /// @group aspect-ratio
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-aspect-ratio"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--aspect-ratio() {
-    @include module-render("utils-layout-aspect-ratio") {
+    @include import-once("utils-layout-aspect-ratio") {
 
         // Aspect ratio utility classes
-        $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
+        $kendo-utils-aspect-ratio: map.get( $kendo-utils, "aspect-ratio" ) !default;
         @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
 
 
diff --git a/packages/utils/scss/layout/_box-sizing.scss b/packages/utils/scss/layout/_box-sizing.scss
index 51b0c7c0c2d..359b908a2c5 100644
--- a/packages/utils/scss/layout/_box-sizing.scss
+++ b/packages/utils/scss/layout/_box-sizing.scss
@@ -10,15 +10,18 @@
 /// @group box-sizing
 /// @contextType css
 
+
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-box-sizing"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--box-sizing() {
-    @include module-render("utils-layout-box-sizing") {
+    @include import-once("utils-layout-box-sizing") {
 
         // box-sizing utility classes
-        $kendo-utils-box-sizing: k-map-get( $kendo-utils, "box-sizing" ) !default;
+        $kendo-utils-box-sizing: map.get( $kendo-utils, "box-sizing" ) !default;
         @include generate-utils( box-sizing, box-sizing, $kendo-utils-box-sizing );
 
     }
diff --git a/packages/utils/scss/layout/_clear.scss b/packages/utils/scss/layout/_clear.scss
index a52e850955f..7a39bc48b18 100644
--- a/packages/utils/scss/layout/_clear.scss
+++ b/packages/utils/scss/layout/_clear.scss
@@ -22,15 +22,17 @@
 /// @group clear
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-clear"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--clear() {
-    @include module-render("utils-layout-clear") {
+    @include import-once("utils-layout-clear") {
 
         // Clear utility classes
-        $kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
+        $kendo-utils-clear: map.get( $kendo-utils, "clear" ) !default;
         @include generate-utils( clear, clear, $kendo-utils-clear );
 
     }
diff --git a/packages/utils/scss/layout/_columns.scss b/packages/utils/scss/layout/_columns.scss
index d09e91c8c55..24e888cd246 100644
--- a/packages/utils/scss/layout/_columns.scss
+++ b/packages/utils/scss/layout/_columns.scss
@@ -76,15 +76,17 @@
 /// @group columns
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-columns"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--columns() {
-    @include module-render("utils-layout-columns") {
+    @include import-once("utils-layout-columns") {
 
         // columns utility classes
-        $kendo-utils-columns: k-map-get( $kendo-utils, "columns" ) !default;
+        $kendo-utils-columns: map.get( $kendo-utils, "columns" ) !default;
         @include generate-utils( columns, columns, $kendo-utils-columns );
 
     }
diff --git a/packages/utils/scss/layout/_display.scss b/packages/utils/scss/layout/_display.scss
index 6807ea7df38..abd21072295 100644
--- a/packages/utils/scss/layout/_display.scss
+++ b/packages/utils/scss/layout/_display.scss
@@ -82,15 +82,17 @@
 /// @group display
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-display"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--display() {
-    @include module-render("utils-layout-display") {
+    @include import-once("utils-layout-display") {
 
         // Display utility classes
-        $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
+        $kendo-utils-display: map.get( $kendo-utils, "display" ) !default;
         @include generate-utils( d, display, $kendo-utils-display );
 
 
@@ -107,7 +109,7 @@
 @mixin kendo-utils--layout--display--responsive($key) {
 
     // Display responsive utility classes
-    $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
+    $kendo-utils-display: map.get( $kendo-utils, "display" ) !default;
     @include generate-utils( d-#{$key}, display, $kendo-utils-display, $important: false );
 
 }
diff --git a/packages/utils/scss/layout/_float.scss b/packages/utils/scss/layout/_float.scss
index 9e64e2714e6..736bdafd822 100644
--- a/packages/utils/scss/layout/_float.scss
+++ b/packages/utils/scss/layout/_float.scss
@@ -16,15 +16,17 @@
 /// @group float
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-float"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--float() {
-    @include module-render("utils-layout-float") {
+    @include import-once("utils-layout-float") {
 
         // Float utility classes
-        $kendo-utils-float: k-map-get( $kendo-utils, "float" ) !default;
+        $kendo-utils-float: map.get( $kendo-utils, "float" ) !default;
         @include generate-utils( float, float, $kendo-utils-float );
 
     }
diff --git a/packages/utils/scss/layout/_object-fit.scss b/packages/utils/scss/layout/_object-fit.scss
index 6d72455e797..72bb90fb335 100644
--- a/packages/utils/scss/layout/_object-fit.scss
+++ b/packages/utils/scss/layout/_object-fit.scss
@@ -34,15 +34,17 @@
 /// @group object-fit
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-object-fit"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--object-fit() {
-    @include module-render("utils-layout-object-fit") {
+    @include import-once("utils-layout-object-fit") {
 
         // object-fit utility classes
-        $kendo-utils-object-fit: k-map-get( $kendo-utils, "object-fit" ) !default;
+        $kendo-utils-object-fit: map.get( $kendo-utils, "object-fit" ) !default;
         @include generate-utils( object-fit, object-fit, $kendo-utils-object-fit );
 
     }
diff --git a/packages/utils/scss/layout/_object-position.scss b/packages/utils/scss/layout/_object-position.scss
index cf9125c4fca..ad3cc00850c 100644
--- a/packages/utils/scss/layout/_object-position.scss
+++ b/packages/utils/scss/layout/_object-position.scss
@@ -52,15 +52,17 @@
 /// @group object-position
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-object-position"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--object-position() {
-    @include module-render("utils-layout-object-position") {
+    @include import-once("utils-layout-object-position") {
 
         // object-position utility classes
-        $kendo-utils-object-position: k-map-get( $kendo-utils, "object-position" ) !default;
+        $kendo-utils-object-position: map.get( $kendo-utils, "object-position" ) !default;
         @include generate-utils( object-position, object-position, $kendo-utils-object-position );
 
     }
diff --git a/packages/utils/scss/layout/_overflow.scss b/packages/utils/scss/layout/_overflow.scss
index d272eaf763e..ebcaf8c4933 100644
--- a/packages/utils/scss/layout/_overflow.scss
+++ b/packages/utils/scss/layout/_overflow.scss
@@ -88,15 +88,17 @@
 /// @group overflow
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-overflow"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--overflow() {
-    @include module-render("utils-layout-overflow") {
+    @include import-once("utils-layout-overflow") {
 
         // Overflow utility classes
-        $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
+        $kendo-utils-overflow: map.get( $kendo-utils, "overflow" ) !default;
         @include generate-utils( overflow, overflow, $kendo-utils-overflow );
         @include generate-utils( overflow-x, overflow-x, $kendo-utils-overflow );
         @include generate-utils( overflow-y, overflow-y, $kendo-utils-overflow );
diff --git a/packages/utils/scss/layout/_placement.scss b/packages/utils/scss/layout/_placement.scss
index 753e20234c7..c0cfa27c626 100644
--- a/packages/utils/scss/layout/_placement.scss
+++ b/packages/utils/scss/layout/_placement.scss
@@ -88,15 +88,17 @@
 /// @group placement
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-placement"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--placement() {
-    @include module-render("utils-layout-placement") {
+    @include import-once("utils-layout-placement") {
 
         // Top / right / bottom / left
-        $kendo-utils-placement: k-map-get( $kendo-utils, "placement" ) !default;
+        $kendo-utils-placement: map.get( $kendo-utils, "placement" ) !default;
         @include generate-utils( top, top, $kendo-utils-placement );
         @include generate-utils( right, right, $kendo-utils-placement );
         @include generate-utils( bottom, bottom, $kendo-utils-placement );
@@ -110,7 +112,7 @@
         }
 
         // Inset utility classes
-        $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
+        $kendo-utils-inset: map.get( $kendo-utils, "inset" ) !default;
         @include generate-utils( inset, inset, $kendo-utils-inset );
         @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
         @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
diff --git a/packages/utils/scss/layout/_position.scss b/packages/utils/scss/layout/_position.scss
index 71896d2a16a..158f1d4c550 100644
--- a/packages/utils/scss/layout/_position.scss
+++ b/packages/utils/scss/layout/_position.scss
@@ -28,16 +28,17 @@
 /// @group position
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
 
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-position"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--position() {
-    @include module-render("utils-layout-position") {
+    @include import-once("utils-layout-position") {
 
         // Position utility classes
-        $kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
+        $kendo-utils-position: map.get( $kendo-utils, "position" ) !default;
         @include generate-utils( pos, position, $kendo-utils-position );
 
 
@@ -52,6 +53,6 @@
         .\!#{$kendo-prefix}fixed { @extend .\!#{$kendo-prefix}pos-fixed !optional; }
         .#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
         .\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }
-        
+
     }
-}
\ No newline at end of file
+}
diff --git a/packages/utils/scss/layout/_visibility.scss b/packages/utils/scss/layout/_visibility.scss
index c3c951c11a5..7db0d58ae50 100644
--- a/packages/utils/scss/layout/_visibility.scss
+++ b/packages/utils/scss/layout/_visibility.scss
@@ -16,15 +16,17 @@
 /// @group visibility
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-visibility"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--visibility() {
-    @include module-render("utils-layout-visibility") {
+    @include import-once("utils-layout-visibility") {
 
         // Visibility utility classes
-        $kendo-utils-visibility: k-map-get( $kendo-utils, "visibility" ) !default;
+        $kendo-utils-visibility: map.get( $kendo-utils, "visibility" ) !default;
         @include generate-utils( visibility, visibility, $kendo-utils-visibility );
 
         // Legacy aliases
diff --git a/packages/utils/scss/layout/_zindex.scss b/packages/utils/scss/layout/_zindex.scss
index a5950038177..ff5a798c67b 100644
--- a/packages/utils/scss/layout/_zindex.scss
+++ b/packages/utils/scss/layout/_zindex.scss
@@ -40,15 +40,17 @@
 /// @group zindex
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-layout-zindex"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--layout--zindex() {
-    @include module-render("utils-layout-zindex") {
+    @include import-once("utils-layout-zindex") {
 
         // Z-index utility classes
-        $kendo-utils-zindex: k-map-get( $kendo-utils, "zindex" ) !default;
+        $kendo-utils-zindex: map.get( $kendo-utils, "zindex" ) !default;
         @include generate-utils( z, z-index, $kendo-utils-zindex );
 
     }
diff --git a/packages/utils/scss/layout/index.import.scss b/packages/utils/scss/layout/index.import.scss
index d7b2e2d0e3e..65f3acd4172 100644
--- a/packages/utils/scss/layout/index.import.scss
+++ b/packages/utils/scss/layout/index.import.scss
@@ -1,16 +1,30 @@
-@import "./_aspect-ratio.scss";
-@import "./_box-sizing.scss";
-@import "./_clear.scss";
-@import "./_columns.scss";
-@import "./_display.scss";
-@import "./_float.scss";
-@import "./_object-fit.scss";
-@import "./_object-position.scss";
-@import "./_overflow.scss";
-@import "./_placement.scss";
-@import "./_position.scss";
-@import "./_visibility.scss";
-@import "./_zindex.scss";
+@forward "./_aspect-ratio.scss";
+@forward "./_box-sizing.scss";
+@forward "./_clear.scss";
+@forward "./_columns.scss";
+@forward "./_display.scss";
+@forward "./_float.scss";
+@forward "./_object-fit.scss";
+@forward "./_object-position.scss";
+@forward "./_overflow.scss";
+@forward "./_placement.scss";
+@forward "./_position.scss";
+@forward "./_visibility.scss";
+@forward "./_zindex.scss";
+
+@use "./_aspect-ratio.scss" as *;
+@use "./_box-sizing.scss" as *;
+@use "./_clear.scss" as *;
+@use "./_columns.scss" as *;
+@use "./_display.scss" as *;
+@use "./_float.scss" as *;
+@use "./_object-fit.scss" as *;
+@use "./_object-position.scss" as *;
+@use "./_overflow.scss" as *;
+@use "./_placement.scss" as *;
+@use "./_position.scss" as *;
+@use "./_visibility.scss" as *;
+@use "./_zindex.scss" as *;
 
 
 @mixin kendo-utils--layout() {
diff --git a/packages/utils/scss/responsive-layout/_col-gap.scss b/packages/utils/scss/responsive-layout/_col-gap.scss
index 8cc1f82f627..bdc49f76f23 100644
--- a/packages/utils/scss/responsive-layout/_col-gap.scss
+++ b/packages/utils/scss/responsive-layout/_col-gap.scss
@@ -1,7 +1,11 @@
+@use "../_globals.scss" as *;
+@use "@progress/kendo-theme-core/scss/functions/index.import.scss" as *;
+@use "sass:map";
+
 @mixin kendo-utils--responsive-layout--col-gap() {
 
     // Columns gap
-    $kendo-utils-col-gap: k-map-get( $kendo-utils, "gap" ) !default;
+    $kendo-utils-col-gap: map.get( $kendo-utils, "gap" ) !default;
 
     @each $key, $val in $kendo-utils-col-gap {
         $_key: k-escape-class-name( $key );
@@ -15,7 +19,7 @@
 @mixin kendo-utils--responsive-layout--col-gap--responsive($breakpoint) {
 
     // Columns gap responsive
-    $kendo-utils-col-gap: k-map-get( $kendo-utils, "gap" ) !default;
+    $kendo-utils-col-gap: map.get( $kendo-utils, "gap" ) !default;
 
     @each $key, $val in $kendo-utils-col-gap {
         $_key: k-escape-class-name( $key );
diff --git a/packages/utils/scss/responsive-layout/_col.scss b/packages/utils/scss/responsive-layout/_col.scss
index 9aee16dca16..2c903e3a8b8 100644
--- a/packages/utils/scss/responsive-layout/_col.scss
+++ b/packages/utils/scss/responsive-layout/_col.scss
@@ -1,3 +1,5 @@
+@use "../_globals.scss" as *;
+
 @mixin kendo-utils--responsive-layout--col() {
 
     // Column
diff --git a/packages/utils/scss/responsive-layout/index.import.scss b/packages/utils/scss/responsive-layout/index.import.scss
index 32adfe083a2..87232facfa1 100644
--- a/packages/utils/scss/responsive-layout/index.import.scss
+++ b/packages/utils/scss/responsive-layout/index.import.scss
@@ -1,7 +1,8 @@
-@import "./_container.scss";
-@import "./_row.scss";
-@import "./_col.scss";
-@import "./_col-gap.scss";
+@use "./_container.scss" as *;
+@use "./_row.scss" as *;
+@use "./_col.scss" as *;
+@use "./_col-gap.scss" as *;
+@use "../_globals.scss" as *;
 
 
 @mixin kendo-utils--responsive-layout() {
diff --git a/packages/utils/scss/sizing/_height.scss b/packages/utils/scss/sizing/_height.scss
index 31ed7474256..2bdf4ece5b9 100644
--- a/packages/utils/scss/sizing/_height.scss
+++ b/packages/utils/scss/sizing/_height.scss
@@ -142,23 +142,25 @@
 /// @group height
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-sizing-height"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--sizing--height() {
-    @include module-render("utils-sizing-height") {
+    @include import-once("utils-sizing-height") {
 
         // Height utility classes
-        $kendo-utils-height: k-map-get( $kendo-utils, "height" ) !default;
+        $kendo-utils-height: map.get( $kendo-utils, "height" ) !default;
         @include generate-utils( h, height, $kendo-utils-height );
 
         // Min height utility classes
-        $kendo-utils-min-height: k-map-get( $kendo-utils, "min-height" ) !default;
+        $kendo-utils-min-height: map.get( $kendo-utils, "min-height" ) !default;
         @include generate-utils( min-h, min-height, $kendo-utils-min-height );
 
         // Max height utility classes
-        $kendo-utils-max-height: k-map-get( $kendo-utils, "max-height" ) !default;
+        $kendo-utils-max-height: map.get( $kendo-utils, "max-height" ) !default;
         @include generate-utils( max-h, max-height, $kendo-utils-max-height );
 
     }
diff --git a/packages/utils/scss/sizing/_width.scss b/packages/utils/scss/sizing/_width.scss
index d15a7098595..8e3ceb85ccf 100644
--- a/packages/utils/scss/sizing/_width.scss
+++ b/packages/utils/scss/sizing/_width.scss
@@ -142,23 +142,25 @@
 /// @group width
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-sizing-width"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--sizing--width() {
-    @include module-render("utils-sizing-width") {
+    @include import-once("utils-sizing-width") {
 
         // Width utility classes
-        $kendo-utils-width: k-map-get( $kendo-utils, "width" ) !default;
+        $kendo-utils-width: map.get( $kendo-utils, "width" ) !default;
         @include generate-utils( w, width, $kendo-utils-width );
 
         // Min-width utility classes
-        $kendo-utils-min-width: k-map-get( $kendo-utils, "min-width" ) !default;
+        $kendo-utils-min-width: map.get( $kendo-utils, "min-width" ) !default;
         @include generate-utils( min-w, min-width, $kendo-utils-min-width );
 
         // Max-width utility classes
-        $kendo-utils-max-width: k-map-get( $kendo-utils, "max-width" ) !default;
+        $kendo-utils-max-width: map.get( $kendo-utils, "max-width" ) !default;
         @include generate-utils( max-w, max-width, $kendo-utils-max-width );
 
     }
diff --git a/packages/utils/scss/sizing/index.import.scss b/packages/utils/scss/sizing/index.import.scss
index 84eaac1982b..971826f2461 100644
--- a/packages/utils/scss/sizing/index.import.scss
+++ b/packages/utils/scss/sizing/index.import.scss
@@ -1,5 +1,5 @@
-@import "./_height.scss";
-@import "./_width.scss";
+@use "./_height.scss" as *;
+@use "./_width.scss" as *;
 
 
 @mixin kendo-utils--sizing() {
diff --git a/packages/utils/scss/spacing/_margin.scss b/packages/utils/scss/spacing/_margin.scss
index 3e65cddc9e7..647230804c8 100644
--- a/packages/utils/scss/spacing/_margin.scss
+++ b/packages/utils/scss/spacing/_margin.scss
@@ -544,15 +544,17 @@
 /// @group margin
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-spacing-margin"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--spacing--margin() {
-    @include module-render("utils-spacing-margin") {
+    @include import-once("utils-spacing-margin") {
 
         // Margin utility classes
-        $kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
+        $kendo-utils-margin: map.get( $kendo-utils, "margin" ) !default;
         @include generate-utils( m, margin, $kendo-utils-margin, $css-var: "spacing" );
         @include generate-utils( mt, margin-top, $kendo-utils-margin, $css-var: "spacing" );
         @include generate-utils( mr, margin-right, $kendo-utils-margin, $css-var: "spacing" );
diff --git a/packages/utils/scss/spacing/_padding.scss b/packages/utils/scss/spacing/_padding.scss
index dce204d2e2d..f48d8eebfbf 100644
--- a/packages/utils/scss/spacing/_padding.scss
+++ b/packages/utils/scss/spacing/_padding.scss
@@ -460,15 +460,17 @@
 /// @group padding
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-spacing-padding"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--spacing--padding() {
-    @include module-render("utils-spacing-padding") {
+    @include import-once("utils-spacing-padding") {
 
         // Padding utility classes
-        $kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
+        $kendo-utils-padding: map.get( $kendo-utils, "padding" ) !default;
         @include generate-utils( p, padding, $kendo-utils-padding, $css-var: "spacing" );
         @include generate-utils( pt, padding-top, $kendo-utils-padding, $css-var: "spacing" );
         @include generate-utils( pr, padding-right, $kendo-utils-padding, $css-var: "spacing" );
@@ -483,7 +485,7 @@
 @mixin kendo-utils--spacing--padding--responsive($key) {
 
     // Padding responsive utility classes
-    $kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
+    $kendo-utils-padding: map.get( $kendo-utils, "padding" ) !default;
     @include generate-utils( px-#{$key}, padding-inline, $kendo-utils-padding, $css-var: "spacing", $important: false );
     @include generate-utils( py-#{$key}, padding-block, $kendo-utils-padding, $css-var: "spacing", $important: false );
 
diff --git a/packages/utils/scss/spacing/_space-between.scss b/packages/utils/scss/spacing/_space-between.scss
index 2184d66192c..10e77a84ae9 100644
--- a/packages/utils/scss/spacing/_space-between.scss
+++ b/packages/utils/scss/spacing/_space-between.scss
@@ -1,14 +1,15 @@
 // TODO: docs
+@use "sass:map";
+@use "../_globals.scss" as *;
 
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-spacing-space-between"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--spacing--space-between() {
-    @include module-render("utils-spacing-space-between") {
+    @include import-once("utils-spacing-space-between") {
 
         // Space between utility classes
-        $kendo-utils-space-between: k-map-get( $kendo-utils, "space-between" ) !default;
+        $kendo-utils-space-between: map.get( $kendo-utils, "space-between" ) !default;
         @each $key, $value in $kendo-utils-space-between {
             $_key: k-escape-class-name( $key );
 
diff --git a/packages/utils/scss/spacing/index.import.scss b/packages/utils/scss/spacing/index.import.scss
index 6154ce09383..d27a3ca3960 100644
--- a/packages/utils/scss/spacing/index.import.scss
+++ b/packages/utils/scss/spacing/index.import.scss
@@ -1,8 +1,10 @@
-@import "@progress/kendo-theme-core/scss/spacing/index.import.scss";
+@use "@progress/kendo-theme-core/scss/spacing/index.import.scss" as *;
 
-@import "./_margin.scss";
-@import "./_padding.scss";
-@import "./_space-between.scss";
+@forward "./_margin.scss";
+
+@use "./_margin.scss" as *;
+@use "./_padding.scss" as *;
+@use "./_space-between.scss" as *;
 
 
 @mixin kendo-utils--spacing() {
diff --git a/packages/utils/scss/svg/_fill.scss b/packages/utils/scss/svg/_fill.scss
index 98fb58844a6..f2dcd239865 100644
--- a/packages/utils/scss/svg/_fill.scss
+++ b/packages/utils/scss/svg/_fill.scss
@@ -34,15 +34,17 @@
 /// @group fill
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-svg-fill"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--svg--fill() {
-    @include module-render("utils-svg-fill") {
+    @include import-once("utils-svg-fill") {
 
         // fill utility classes
-        $kendo-utils-fill: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+        $kendo-utils-fill: map.get( $kendo-utils, "fill-stroke" ) !default;
         @include generate-utils( fill, fill, $kendo-utils-fill );
 
     }
diff --git a/packages/utils/scss/svg/_stroke.scss b/packages/utils/scss/svg/_stroke.scss
index 83cb53e3437..4318d0805ae 100644
--- a/packages/utils/scss/svg/_stroke.scss
+++ b/packages/utils/scss/svg/_stroke.scss
@@ -34,15 +34,17 @@
 /// @group stroke
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-svg-stroke"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--svg--stroke() {
-    @include module-render("utils-svg-stroke") {
+    @include import-once("utils-svg-stroke") {
 
         // stroke utility classes
-        $kendo-utils-stroke: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+        $kendo-utils-stroke: map.get( $kendo-utils, "fill-stroke" ) !default;
         @include generate-utils( stroke, stroke, $kendo-utils-stroke );
 
     }
diff --git a/packages/utils/scss/svg/index.import.scss b/packages/utils/scss/svg/index.import.scss
index e389f571617..83d2096cd42 100644
--- a/packages/utils/scss/svg/index.import.scss
+++ b/packages/utils/scss/svg/index.import.scss
@@ -1,5 +1,5 @@
-@import "./_fill.scss";
-@import "./_stroke.scss";
+@use "./_fill.scss" as *;
+@use "./_stroke.scss" as *;
 
 @mixin kendo-utils--svg() {
     @include kendo-utils--svg--fill();
diff --git a/packages/utils/scss/table/_border-collapse.scss b/packages/utils/scss/table/_border-collapse.scss
index 226f53b61d5..90723ca938e 100644
--- a/packages/utils/scss/table/_border-collapse.scss
+++ b/packages/utils/scss/table/_border-collapse.scss
@@ -10,15 +10,17 @@
 /// @group border-collapse
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-table-border-collapse"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--table--border-collapse() {
-    @include module-render("utils-table-border-collapse") {
+    @include import-once("utils-table-border-collapse") {
 
         // Border collapse utility classes
-        $kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !default;
+        $kendo-utils-border-collapse: map.get( $kendo-utils, "border-collapse" ) !default;
         @include generate-utils( border, border-collapse, $kendo-utils-border-collapse );
 
     }
diff --git a/packages/utils/scss/table/_table-layout.scss b/packages/utils/scss/table/_table-layout.scss
index 0437efc8c78..de1b362dbd9 100644
--- a/packages/utils/scss/table/_table-layout.scss
+++ b/packages/utils/scss/table/_table-layout.scss
@@ -10,15 +10,17 @@
 /// @group table-layout
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-table-table-layout"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--table--table-layout() {
-    @include module-render("utils-table-table-layout") {
+    @include import-once("utils-table-table-layout") {
 
         // Table layout utility classes
-        $kendo-utils-table-layout: k-map-get( $kendo-utils, "table-layout" ) !default;
+        $kendo-utils-table-layout: map.get( $kendo-utils, "table-layout" ) !default;
         @include generate-utils( table, table-layout, $kendo-utils-table-layout );
         @include generate-utils( table-layout, table-layout, $kendo-utils-table-layout );
 
diff --git a/packages/utils/scss/table/index.import.scss b/packages/utils/scss/table/index.import.scss
index a1446f3c4dd..80fd9b076d1 100644
--- a/packages/utils/scss/table/index.import.scss
+++ b/packages/utils/scss/table/index.import.scss
@@ -1,5 +1,8 @@
-@import "./_border-collapse.scss";
-@import "./_table-layout.scss";
+@forward "./_border-collapse.scss";
+@forward "./_table-layout.scss";
+
+@use "./_border-collapse.scss" as *;
+@use "./_table-layout.scss" as *;
 
 
 @mixin kendo-utils--table() {
diff --git a/packages/utils/scss/transform/_flip.scss b/packages/utils/scss/transform/_flip.scss
index e06af330859..f5ab14a59a7 100644
--- a/packages/utils/scss/transform/_flip.scss
+++ b/packages/utils/scss/transform/_flip.scss
@@ -12,15 +12,17 @@
 
 // TODO: consider globally horizontal vs h vs x
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-flip"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--transform--flip() {
-    @include module-render("utils-transform-flip") {
+    @include import-once("utils-transform-flip") {
 
         // Flip utility classes
-        $kendo-utils-flip: k-map-get( $kendo-utils, "flip" ) !default;
+        $kendo-utils-flip: map.get( $kendo-utils, "flip" ) !default;
         @if $kendo-utils-flip {
             .#{$kendo-prefix}flip-h { transform: scaleX( -1 ); }
             .\!#{$kendo-prefix}flip-h { transform: scaleX( -1 ) !important; } // stylelint-disable-line declaration-no-important
diff --git a/packages/utils/scss/transform/_origin.scss b/packages/utils/scss/transform/_origin.scss
index 603b152fc53..7aa034bf7fa 100644
--- a/packages/utils/scss/transform/_origin.scss
+++ b/packages/utils/scss/transform/_origin.scss
@@ -52,15 +52,17 @@
 /// @group transform-origin
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-origin"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--transform--origin() {
-    @include module-render("utils-transform-origin") {
+    @include import-once("utils-transform-origin") {
 
         // Transform origin utility classes
-        $kendo-utils-origin: k-map-get( $kendo-utils, "origin" ) !default;
+        $kendo-utils-origin: map.get( $kendo-utils, "origin" ) !default;
         @include generate-utils( origin, transform-origin, $kendo-utils-origin );
 
     }
diff --git a/packages/utils/scss/transform/_rotate.scss b/packages/utils/scss/transform/_rotate.scss
index 67f7eb21ad5..5a5570b9ad9 100644
--- a/packages/utils/scss/transform/_rotate.scss
+++ b/packages/utils/scss/transform/_rotate.scss
@@ -46,12 +46,14 @@
 /// @group transform
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-rotate"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--transform--rotate() {
-    @include module-render("utils-transform-rotate") {
+    @include import-once("utils-transform-rotate") {
 
         // Rotate utility classes
         $kendo-utils-rotate: map.get( $kendo-utils, "rotate" ) !default;
diff --git a/packages/utils/scss/transform/_scale.scss b/packages/utils/scss/transform/_scale.scss
index 47a482fa1f8..156e9b423a1 100644
--- a/packages/utils/scss/transform/_scale.scss
+++ b/packages/utils/scss/transform/_scale.scss
@@ -16,12 +16,14 @@
 /// @group transform
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-scale"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--transform--scale() {
-    @include module-render("utils-transform-scale") {
+    @include import-once("utils-transform-scale") {
 
         // Scale utility classes
         $kendo-utils-scale: map.get( $kendo-utils, "scale" ) !default;
diff --git a/packages/utils/scss/transform/_skew.scss b/packages/utils/scss/transform/_skew.scss
index b1ef9c15c5e..ee3e1cbc18c 100644
--- a/packages/utils/scss/transform/_skew.scss
+++ b/packages/utils/scss/transform/_skew.scss
@@ -22,12 +22,14 @@
 /// @group skew
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-skew"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--transform--skew() {
-    @include module-render("utils-transform-skew") {
+    @include import-once("utils-transform-skew") {
 
         // Transform skew utility classes
         $kendo-utils-skew: map.get( $kendo-utils, "skew" ) !default;
diff --git a/packages/utils/scss/transform/_translate.scss b/packages/utils/scss/transform/_translate.scss
index 976a9db2cb0..8cb11f21fe6 100644
--- a/packages/utils/scss/transform/_translate.scss
+++ b/packages/utils/scss/transform/_translate.scss
@@ -52,15 +52,17 @@
 /// @group transform
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-translate"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--transform--translate() {
-    @include module-render("utils-transform-translate") {
+    @include import-once("utils-transform-translate") {
 
         // Translate utility classes
-        $kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
+        $kendo-utils-translate: map.get( $kendo-utils, "translate" ) !default;
         $kendo-utils-translate-xy: (
             "0": ( 0, 0 ),
             "0-50": ( 0, 50% ),
diff --git a/packages/utils/scss/transform/index.import.scss b/packages/utils/scss/transform/index.import.scss
index 9a53adc9049..e7a3206f585 100644
--- a/packages/utils/scss/transform/index.import.scss
+++ b/packages/utils/scss/transform/index.import.scss
@@ -1,9 +1,12 @@
-@import "./_flip.scss";
-@import "./_origin.scss";
-@import "./_rotate.scss";
-@import "./_scale.scss";
-@import "./_skew.scss";
-@import "./_translate.scss";
+@forward "./_flip.scss";
+@forward "./_rotate.scss";
+
+@use "./_flip.scss" as *;
+@use "./_origin.scss" as *;
+@use "./_rotate.scss" as *;
+@use "./_scale.scss" as *;
+@use "./_skew.scss" as *;
+@use "./_translate.scss" as *;
 
 
 @mixin kendo-utils--transform() {
diff --git a/packages/utils/scss/typography/_font-family.scss b/packages/utils/scss/typography/_font-family.scss
index f124d2e9b17..442c8a9b559 100644
--- a/packages/utils/scss/typography/_font-family.scss
+++ b/packages/utils/scss/typography/_font-family.scss
@@ -1,10 +1,8 @@
-@import "@progress/kendo-theme-core/scss/index.import.scss";
-
-// Register
-@include module-register((name: "utils-typography-font-family"));
+@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
+@use "../_globals.scss" as *;
 
 @mixin kendo-utils--typography--font-family() {
-    @include module-render("utils-typography-font-family") {
+    @include import-once("utils-typography-font-family") {
 
         // Font family utility classes
         @include generate-utils( font-family, font-family, $kendo-font-families, $css-var: "font-family" );
diff --git a/packages/utils/scss/typography/_font-size.scss b/packages/utils/scss/typography/_font-size.scss
index 19b2567142d..37eea761af1 100644
--- a/packages/utils/scss/typography/_font-size.scss
+++ b/packages/utils/scss/typography/_font-size.scss
@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-core/scss/index.import.scss";
+@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
 
 /// This is equivalent to `font-size: 10px;`.
 /// @example font-size: 10px;
@@ -30,11 +30,10 @@
 /// @group font-size
 /// @contextType css
 
-// Register
-@include module-register((name: "utils-typography-font-size"));
+@use "../_mixins.scss" as *;
 
 @mixin kendo-utils--typography--font-size() {
-    @include module-render("utils-typography-font-size") {
+    @include import-once("utils-typography-font-size") {
 
         // Font size utility classes
         @include generate-utils( font-size, font-size, $kendo-font-sizes, $css-var: "font-size" );
diff --git a/packages/utils/scss/typography/_font-style.scss b/packages/utils/scss/typography/_font-style.scss
index 09c943c1a0f..a55659b5e5d 100644
--- a/packages/utils/scss/typography/_font-style.scss
+++ b/packages/utils/scss/typography/_font-style.scss
@@ -10,15 +10,17 @@
 /// @group font-style
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-typography-font-style"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--typography--font-style() {
-    @include module-render("utils-typography-font-style") {
+    @include import-once("utils-typography-font-style") {
 
         // Font style utility classes
-        $kendo-utils-font-style: k-map-get( $kendo-utils, "font-style" ) !default;
+        $kendo-utils-font-style: map.get( $kendo-utils, "font-style" ) !default;
         @include generate-utils( font-style, font-style, $kendo-utils-font-style, $css-var: "font-style" );
 
     }
diff --git a/packages/utils/scss/typography/_font-weight.scss b/packages/utils/scss/typography/_font-weight.scss
index 3abca710498..feb565e8ae8 100644
--- a/packages/utils/scss/typography/_font-weight.scss
+++ b/packages/utils/scss/typography/_font-weight.scss
@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-core/scss/index.import.scss";
+@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
 
 /// This is equivalent to `font-weight: 100;`.
 /// @example font-weight: 100;
@@ -54,11 +54,10 @@
 /// @group font-weight
 /// @contextType css
 
-// Register
-@include module-register((name: "utils-typography-font-weight"));
+@use "../_globals.scss" as *;
 
 @mixin kendo-utils--typography--font-weight() {
-    @include module-render("utils-typography-font-weight") {
+    @include import-once("utils-typography-font-weight") {
 
         // Font weight utility classes
         @include generate-utils( font, font-weight, $kendo-font-weights, $css-var: "font-weight" );
diff --git a/packages/utils/scss/typography/_letter-spacing.scss b/packages/utils/scss/typography/_letter-spacing.scss
index 9b3e023ba20..5b1b9369801 100644
--- a/packages/utils/scss/typography/_letter-spacing.scss
+++ b/packages/utils/scss/typography/_letter-spacing.scss
@@ -1,10 +1,8 @@
-@import "@progress/kendo-theme-core/scss/index.import.scss";
-
-// Register
-@include module-register((name: "utils-typography-letter-spacing"));
+@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
+@use "../_globals.scss" as *;
 
 @mixin kendo-utils--typography--letter-spacing() {
-    @include module-render("utils-typography-letter-spacing") {
+    @include import-once("utils-typography-letter-spacing") {
 
         // Letter spacing utility classes
         @include generate-utils( letter-spacing, letter-spacing, $kendo-letter-spacings, $css-var: "letter-spacing" );
diff --git a/packages/utils/scss/typography/_line-height.scss b/packages/utils/scss/typography/_line-height.scss
index 9e2c0c4c1eb..789a9689af1 100644
--- a/packages/utils/scss/typography/_line-height.scss
+++ b/packages/utils/scss/typography/_line-height.scss
@@ -1,10 +1,8 @@
-@import "@progress/kendo-theme-core/scss/index.import.scss";
-
-// Register
-@include module-register((name: "utils-typography-line-height"));
+@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
+@use "../_globals.scss" as *;
 
 @mixin kendo-utils--typography--line-height() {
-    @include module-render("utils-typography-line-height") {
+    @include import-once("utils-typography-line-height") {
 
         // Line height utility classes
         @include generate-utils( line-height, line-height, $kendo-line-heights, $css-var: "line-height" );
diff --git a/packages/utils/scss/typography/_list-style.scss b/packages/utils/scss/typography/_list-style.scss
index c72902c83ac..c6428bced07 100644
--- a/packages/utils/scss/typography/_list-style.scss
+++ b/packages/utils/scss/typography/_list-style.scss
@@ -16,15 +16,17 @@
 /// @group list-style
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-typography-list-style"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--typography--list-style-type() {
-    @include module-render("utils-typography-list-style") {
+    @include import-once("utils-typography-list-style") {
 
         // list-style-type utility classes
-        $kendo-utils-list-style-type: k-map-get( $kendo-utils, "list-style-type" ) !default;
+        $kendo-utils-list-style-type: map.get( $kendo-utils, "list-style-type" ) !default;
         @include generate-utils( list, list-style-type, $kendo-utils-list-style-type );
 
     }
diff --git a/packages/utils/scss/typography/_text-align.scss b/packages/utils/scss/typography/_text-align.scss
index 1cfe9e54674..50e4295419c 100644
--- a/packages/utils/scss/typography/_text-align.scss
+++ b/packages/utils/scss/typography/_text-align.scss
@@ -22,15 +22,17 @@
 /// @group text-align
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-typography-text-align"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--typography--text-align() {
-    @include module-render("utils-typography-text-align") {
+    @include import-once("utils-typography-text-align") {
 
         // Text align utility classes
-        $kendo-utils-text-align: k-map-get( $kendo-utils, "text-align" ) !default;
+        $kendo-utils-text-align: map.get( $kendo-utils, "text-align" ) !default;
 
         @include generate-utils( text, text-align, $kendo-utils-text-align );
 
diff --git a/packages/utils/scss/typography/_text-color.scss b/packages/utils/scss/typography/_text-color.scss
index 7e2e8f29307..dd7f7547d41 100644
--- a/packages/utils/scss/typography/_text-color.scss
+++ b/packages/utils/scss/typography/_text-color.scss
@@ -1,14 +1,15 @@
 // TODO: docs
+@use "sass:map";
+@use "../_globals.scss" as *;
 
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-typography-text-color"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--typography--text-color() {
-    @include module-render("utils-typography-text-color") {
+    @include import-once("utils-typography-text-color") {
 
         // Text color utility classes
-        $kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
+        $kendo-utils-text-color: map.get( $kendo-utils, "text-color" ) !default;
         @include generate-utils( text, color, $kendo-utils-text-color, $css-var: 'color' );
 
         // Legacy aliases
diff --git a/packages/utils/scss/typography/_text-decoration.scss b/packages/utils/scss/typography/_text-decoration.scss
index 095f4a3eacc..6b76415c2ce 100644
--- a/packages/utils/scss/typography/_text-decoration.scss
+++ b/packages/utils/scss/typography/_text-decoration.scss
@@ -22,15 +22,17 @@
 /// @group text-decoration
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-typography-text-decoration"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--typography--text-decoration() {
-    @include module-render("utils-typography-text-decoration") {
+    @include import-once("utils-typography-text-decoration") {
 
         // text-decoration utility classes
-        $kendo-utils-text-decoration: k-map-get( $kendo-utils, "text-decoration" ) !default;
+        $kendo-utils-text-decoration: map.get( $kendo-utils, "text-decoration" ) !default;
         @include generate-utils( text, text-decoration, $kendo-utils-text-decoration );
 
     }
diff --git a/packages/utils/scss/typography/_text-overflow.scss b/packages/utils/scss/typography/_text-overflow.scss
index c9640adfb56..a44aaea4b58 100644
--- a/packages/utils/scss/typography/_text-overflow.scss
+++ b/packages/utils/scss/typography/_text-overflow.scss
@@ -10,15 +10,17 @@
 /// @group text-overflow
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-typography-text-overflow"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--typography--text-overflow() {
-    @include module-render("utils-typography-text-overflow") {
+    @include import-once("utils-typography-text-overflow") {
 
         // Text overflow utility classes
-        $kendo-utils-text-overflow: k-map-get( $kendo-utils, "text-overflow" ) !default;
+        $kendo-utils-text-overflow: map.get( $kendo-utils, "text-overflow" ) !default;
         @include generate-utils( text, text-overflow, $kendo-utils-text-overflow );
 
 
diff --git a/packages/utils/scss/typography/_text-transform.scss b/packages/utils/scss/typography/_text-transform.scss
index 5a2db76d7b3..63177ecd428 100644
--- a/packages/utils/scss/typography/_text-transform.scss
+++ b/packages/utils/scss/typography/_text-transform.scss
@@ -16,15 +16,17 @@
 /// @group text-transform
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-typography-text-transform"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--typography--text-transform() {
-    @include module-render("utils-typography-text-transform") {
+    @include import-once("utils-typography-text-transform") {
 
         // Text transform utility classes
-        $kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !default;
+        $kendo-utils-text-transform: map.get( $kendo-utils, "text-transform" ) !default;
         @include generate-utils( text, text-transform, $kendo-utils-text-transform );
 
     }
diff --git a/packages/utils/scss/typography/_vertical-align.scss b/packages/utils/scss/typography/_vertical-align.scss
index 3ff39fdfa98..e30145b6a96 100644
--- a/packages/utils/scss/typography/_vertical-align.scss
+++ b/packages/utils/scss/typography/_vertical-align.scss
@@ -46,15 +46,17 @@
 /// @group vertical-align
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-typography-vertical-align"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--typography--vertical-align() {
-    @include module-render("utils-typography-vertical-align") {
+    @include import-once("utils-typography-vertical-align") {
 
         // vertical-align utility classes
-        $kendo-utils-vertical-align: k-map-get( $kendo-utils, "vertical-align" ) !default;
+        $kendo-utils-vertical-align: map.get( $kendo-utils, "vertical-align" ) !default;
         @include generate-utils( align, vertical-align, $kendo-utils-vertical-align );
 
     }
diff --git a/packages/utils/scss/typography/_white-space.scss b/packages/utils/scss/typography/_white-space.scss
index 18c60570853..051b802f9b0 100644
--- a/packages/utils/scss/typography/_white-space.scss
+++ b/packages/utils/scss/typography/_white-space.scss
@@ -34,15 +34,17 @@
 /// @group white-space
 /// @contextType css
 
+@use "sass:map";
+@use "../_globals.scss" as *;
+
 // Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-typography-white-space"));
+@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;
 
 @mixin kendo-utils--typography--white-space() {
-    @include module-render("utils-typography-white-space") {
+    @include import-once("utils-typography-white-space") {
 
         // White space utility classes
-        $kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default;
+        $kendo-utils-white-space: map.get( $kendo-utils, "white-space" ) !default;
 
         @include generate-utils( white-space, white-space, $kendo-utils-white-space );
         @include generate-utils( whitespace, white-space, $kendo-utils-white-space );
diff --git a/packages/utils/scss/typography/index.import.scss b/packages/utils/scss/typography/index.import.scss
index af1486f9fc4..1e6fd970c86 100644
--- a/packages/utils/scss/typography/index.import.scss
+++ b/packages/utils/scss/typography/index.import.scss
@@ -1,23 +1,44 @@
 // font family
-@import "./_font-family.scss";
-@import "./_font-size.scss";
+@forward "./_font-family.scss";
+@forward "./_font-size.scss";
 // font smoothing
-@import "./_font-style.scss";
-@import "./_font-weight.scss";
+@forward "./_font-style.scss";
+@forward "./_font-weight.scss";
 // font variant
 // letter spacing
-@import "./_letter-spacing.scss";
+@forward "./_letter-spacing.scss";
 // line height
-@import "./_line-height.scss";
-@import "./_list-style.scss";
-@import "./_text-align.scss";
-@import "./_text-color.scss";
-@import "./_text-decoration.scss";
-@import "./_text-overflow.scss";
-@import "./_text-transform.scss";
+@forward "./_line-height.scss";
+@forward "./_list-style.scss";
+@forward "./_text-align.scss";
+@forward "./_text-color.scss";
+@forward "./_text-decoration.scss";
+@forward "./_text-overflow.scss";
+@forward "./_text-transform.scss";
 // text indent
-@import "./_vertical-align.scss";
-@import "./_white-space.scss";
+@forward "./_vertical-align.scss";
+@forward "./_white-space.scss";
+
+// font family
+@use "./_font-family.scss" as *;
+@use "./_font-size.scss" as *;
+// font smoothing
+@use "./_font-style.scss" as *;
+@use "./_font-weight.scss" as *;
+// font variant
+// letter spacing
+@use "./_letter-spacing.scss" as *;
+// line height
+@use "./_line-height.scss" as *;
+@use "./_list-style.scss" as *;
+@use "./_text-align.scss" as *;
+@use "./_text-color.scss" as *;
+@use "./_text-decoration.scss" as *;
+@use "./_text-overflow.scss" as *;
+@use "./_text-transform.scss" as *;
+// text indent
+@use "./_vertical-align.scss" as *;
+@use "./_white-space.scss" as *;
 
 
 @mixin kendo-utils--typography() {