@progress/kendo-theme-utils 9.1.1-dev.2 → 10.0.0-dev.1

package/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 );
 
     }

package/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 );

package/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 );
 
     }

package/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 );
 
     }

package/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 );
 
     }

package/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 );
 
 }

package/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 );
 
 }

package/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 );
 
 }

package/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 );
 
     }

package/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 );
 
 

package/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 );
 
     }

package/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 );
 
     }

package/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 );
 
     }

package/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 );
 
     }

package/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 );
 
     }

package/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 );
 
     }

package/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() {

package/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

package/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 );
 
     }

package/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 );
 
     }