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

package/scss/responsive-layout/_col.scss

@@ -1,3 +1,5 @@
+@use "../_globals.scss" as *;
+
 @mixin kendo-utils--responsive-layout--col() {
 
     // Column

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/scss/transform/_rotate.scss

@@ -46,22 +46,18 @@
 /// @group transform
 /// @contextType css
 
-// Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-rotate"));
+@use "sass:map";
+@use "../_globals.scss" as *;
 
-// stylelint-disable scss/at-function-pattern
-@function _rotate( $val ) {
-    @return rotate( $val );
-}
-// stylelint-enable scss/at-function-pattern
+// Register
+@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: k-map-get( $kendo-utils, "rotate" ) !default;
-        @include generate-utils( rotate, transform, $kendo-utils-rotate, _rotate );
+        $kendo-utils-rotate: map.get( $kendo-utils, "rotate" ) !default;
+        @include generate-utils( rotate, transform, $kendo-utils-rotate, k-rotate );
 
     }
 }

package/scss/transform/_scale.scss

@@ -16,30 +16,20 @@
 /// @group transform
 /// @contextType css
 
-// Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-scale"));
+@use "sass:map";
+@use "../_globals.scss" as *;
 
-// stylelint-disable scss/at-function-pattern
-@function _scale( $val ) {
-    @return scale( $val );
-}
-@function _scale-x( $val ) {
-    @return scaleX( $val );
-}
-@function _scale-y( $val ) {
-    @return scaleY( $val );
-}
-// stylelint-enable scss/at-function-pattern
+// Register
+@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: k-map-get( $kendo-utils, "scale" ) !default;
-        @include generate-utils( scale, transform, $kendo-utils-scale, _scale );
-        @include generate-utils( scale-x, transform, $kendo-utils-scale, _scale-x );
-        @include generate-utils( scale-y, transform, $kendo-utils-scale, _scale-y );
+        $kendo-utils-scale: map.get( $kendo-utils, "scale" ) !default;
+        @include generate-utils( scale, transform, $kendo-utils-scale, k-scale );
+        @include generate-utils( scale-x, transform, $kendo-utils-scale, k-scale-x );
+        @include generate-utils( scale-y, transform, $kendo-utils-scale, k-scale-y );
 
     }
 }

package/scss/transform/_skew.scss

@@ -22,26 +22,19 @@
 /// @group skew
 /// @contextType css
 
-// Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-skew"));
+@use "sass:map";
+@use "../_globals.scss" as *;
 
-// stylelint-disable scss/at-function-pattern
-@function _skew-x( $val ) {
-    @return skewX( $val );
-}
-@function _skew-y( $val ) {
-    @return skewY( $val );
-}
-// stylelint-enable scss/at-function-pattern
+// Register
+@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: k-map-get( $kendo-utils, "skew" ) !default;
-        @include generate-utils( skew-x, transform, $kendo-utils-skew, _skew-x );
-        @include generate-utils( skew-y, transform, $kendo-utils-skew, _skew-y );
+        $kendo-utils-skew: map.get( $kendo-utils, "skew" ) !default;
+        @include generate-utils( skew-x, transform, $kendo-utils-skew, k-skew-x );
+        @include generate-utils( skew-y, transform, $kendo-utils-skew, k-skew-y );
 
     }
 }

package/scss/transform/_translate.scss

@@ -52,27 +52,17 @@
 /// @group transform
 /// @contextType css
 
-// Register
-@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
-@include module-register((name: "utils-transform-translate"));
+@use "sass:map";
+@use "../_globals.scss" as *;
 
-// stylelint-disable scss/at-function-pattern
-@function _translate( $val ) {
-    @return translate( $val );
-}
-@function _translate-x( $val ) {
-    @return translateX( $val );
-}
-@function _translate-y( $val ) {
-    @return translateY( $val );
-}
-// stylelint-enable scss/at-function-pattern
+// Register
+@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% ),
@@ -84,9 +74,9 @@
             "100-50": ( 100%, 50% ),
             "100-100": ( 100%, 100% )
         ) !default;
-        @include generate-utils( translate, transform, $kendo-utils-translate-xy, _translate );
-        @include generate-utils( translate-x, transform, $kendo-utils-translate, _translate-x );
-        @include generate-utils( translate-y, transform, $kendo-utils-translate, _translate-y );
+        @include generate-utils( translate, transform, $kendo-utils-translate-xy, k-translate );
+        @include generate-utils( translate-x, transform, $kendo-utils-translate, k-translate-x );
+        @include generate-utils( translate-y, transform, $kendo-utils-translate, k-translate-y );
 
     }
 }

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

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

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

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

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

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

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