@progress/kendo-theme-utils 8.2.0 → 9.0.0-dev.1

package/scss/layout/_position.scss

@@ -28,23 +28,30 @@
 /// @group position
 /// @contextType css
 
-@mixin kendo-utils--layout--position() {
-
-    // Position utility classes
-    $kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
-    @include generate-utils( pos, position, $kendo-utils-position );
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-position"));
 
-    // Legacy aliases
-    .#{$kendo-prefix}static { @extend .#{$kendo-prefix}pos-static !optional; }
-    .\!#{$kendo-prefix}static { @extend .\!#{$kendo-prefix}pos-static !optional; }
-    .#{$kendo-prefix}relative { @extend .#{$kendo-prefix}pos-relative !optional; }
-    .\!#{$kendo-prefix}relative { @extend .\!#{$kendo-prefix}pos-relative !optional; }
-    .#{$kendo-prefix}absolute { @extend .#{$kendo-prefix}pos-absolute !optional; }
-    .\!#{$kendo-prefix}absolute { @extend .\!#{$kendo-prefix}pos-absolute !optional; }
-    .#{$kendo-prefix}fixed { @extend .#{$kendo-prefix}pos-fixed !optional; }
-    .\!#{$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; }
-
-}
+@mixin kendo-utils--layout--position() {
+    @include module-render("utils-layout-position") {
+
+        // Position utility classes
+        $kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
+        @include generate-utils( pos, position, $kendo-utils-position );
+
+
+        // Legacy aliases
+        .#{$kendo-prefix}static { @extend .#{$kendo-prefix}pos-static !optional; }
+        .\!#{$kendo-prefix}static { @extend .\!#{$kendo-prefix}pos-static !optional; }
+        .#{$kendo-prefix}relative { @extend .#{$kendo-prefix}pos-relative !optional; }
+        .\!#{$kendo-prefix}relative { @extend .\!#{$kendo-prefix}pos-relative !optional; }
+        .#{$kendo-prefix}absolute { @extend .#{$kendo-prefix}pos-absolute !optional; }
+        .\!#{$kendo-prefix}absolute { @extend .\!#{$kendo-prefix}pos-absolute !optional; }
+        .#{$kendo-prefix}fixed { @extend .#{$kendo-prefix}pos-fixed !optional; }
+        .\!#{$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; }
+        
+    }
+}

package/scss/layout/_visibility.scss

@@ -16,16 +16,22 @@
 /// @group visibility
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-visibility"));
+
 @mixin kendo-utils--layout--visibility() {
+    @include module-render("utils-layout-visibility") {
 
-    // Visibility utility classes
-    $kendo-utils-visibility: k-map-get( $kendo-utils, "visibility" ) !default;
-    @include generate-utils( visibility, visibility, $kendo-utils-visibility );
+        // Visibility utility classes
+        $kendo-utils-visibility: k-map-get( $kendo-utils, "visibility" ) !default;
+        @include generate-utils( visibility, visibility, $kendo-utils-visibility );
 
-    // Legacy aliases
-    .#{$kendo-prefix}visible { @extend .#{$kendo-prefix}visibility-visible !optional; }
-    .\!#{$kendo-prefix}visible { @extend .\!#{$kendo-prefix}visibility-visible !optional; }
-    .#{$kendo-prefix}invisible { @extend .#{$kendo-prefix}visibility-hidden !optional; }
-    .\!#{$kendo-prefix}invisible { @extend .\!#{$kendo-prefix}visibility-hidden !optional; }
+        // Legacy aliases
+        .#{$kendo-prefix}visible { @extend .#{$kendo-prefix}visibility-visible !optional; }
+        .\!#{$kendo-prefix}visible { @extend .\!#{$kendo-prefix}visibility-visible !optional; }
+        .#{$kendo-prefix}invisible { @extend .#{$kendo-prefix}visibility-hidden !optional; }
+        .\!#{$kendo-prefix}invisible { @extend .\!#{$kendo-prefix}visibility-hidden !optional; }
 
+    }
 }

package/scss/layout/_zindex.scss

@@ -40,10 +40,16 @@
 /// @group zindex
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-layout-zindex"));
+
 @mixin kendo-utils--layout--zindex() {
+    @include module-render("utils-layout-zindex") {
 
-    // Z-index utility classes
-    $kendo-utils-zindex: k-map-get( $kendo-utils, "zindex" ) !default;
-    @include generate-utils( z, z-index, $kendo-utils-zindex );
+        // Z-index utility classes
+        $kendo-utils-zindex: k-map-get( $kendo-utils, "zindex" ) !default;
+        @include generate-utils( z, z-index, $kendo-utils-zindex );
 
+    }
 }

package/scss/layout/index.import.scss

@@ -28,3 +28,7 @@
     @include kendo-utils--layout--visibility();
     @include kendo-utils--layout--zindex();
 }
+
+@mixin kendo-utils--layout--responsive($key) {
+    @include kendo-utils--layout--display--responsive($key);
+}

package/scss/responsive-layout/_col-gap.scss

@@ -0,0 +1,28 @@
+@mixin kendo-utils--responsive-layout--col-gap() {
+
+    // Columns gap
+    $kendo-utils-col-gap: k-map-get( $kendo-utils, "gap" ) !default;
+
+    @each $key, $val in $kendo-utils-col-gap {
+        $_key: k-escape-class-name( $key );
+        .k-col-gap-#{$_key} {
+            --kendo-col-gap: #{$val};
+        }
+    }
+
+}
+
+@mixin kendo-utils--responsive-layout--col-gap--responsive($breakpoint) {
+
+    // Columns gap responsive
+    $kendo-utils-col-gap: k-map-get( $kendo-utils, "gap" ) !default;
+
+    @each $key, $val in $kendo-utils-col-gap {
+        $_key: k-escape-class-name( $key );
+        .k-col-gap-#{$breakpoint}-#{$_key} {
+            --kendo-col-gap: #{$val};
+        }
+    }
+}
+
+

package/scss/responsive-layout/_col.scss

@@ -0,0 +1,48 @@
+@mixin kendo-utils--responsive-layout--col() {
+
+    // Column
+    .k-col {
+        flex: 1 0 0%;
+    }
+
+    // Column Sizes
+    @for $i from 1 through 100 {
+	    .k-col-size-#{$i} {
+            flex: 0 0 auto;
+            width: $i * 1%;
+        }
+	}
+
+    @each $i, $n in $kendo-fraction-classes {
+        .k-col-size-#{$i} {
+            flex: 0 0 auto;
+            width: $n;
+        }
+    }
+
+}
+
+@mixin kendo-utils--responsive-layout--col--responsive($key) {
+
+    // Column responsive
+    .k-col-#{$key} {
+        flex: 1 0 0%;
+    }
+
+    // Column Sizes responsive
+    @for $i from 1 through 100 {
+        .k-col-#{$key}-size-#{$i} {
+            flex: 0 0 auto;
+            width: $i * 1%;
+        }
+    }
+
+    @each $i, $n in $kendo-fraction-classes {
+        .k-col-#{$key}-size-#{$i} {
+            flex: 0 0 auto;
+            width: $n;
+        }
+    }
+}
+
+

package/scss/responsive-layout/_container.scss

@@ -0,0 +1,22 @@
+@mixin kendo-utils--responsive-layout--container() {
+
+    // Page Container
+    .k-container,
+    .k-container-fluid {
+        margin: 0 auto;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+    }
+
+}
+
+@mixin kendo-utils--responsive-layout--container--responsive($key, $val) {
+
+    // Page Container responsive
+    .k-container {
+        max-width: var(--kendo-container-#{$key}-max-width, #{$val});
+    }
+
+}

package/scss/responsive-layout/_row.scss

@@ -0,0 +1,21 @@
+@mixin kendo-utils--responsive-layout--row() {
+
+    // Row
+    .k-row {
+        margin-top: calc( -1 * var(--kendo-col-gap, 0) );
+        margin-left: calc( -.5 * var(--kendo-col-gap, 0) );
+        margin-right: calc( -.5 * var(--kendo-col-gap, 0) );
+        display: flex;
+        flex-flow: row wrap;
+        box-sizing: border-box;
+
+        > * {
+            margin-top: var(--kendo-col-gap, 0);
+            padding-left: calc( var(--kendo-col-gap, 0) * .5 );
+            padding-right: calc( var(--kendo-col-gap, 0) * .5 );
+            width: 100%;
+            box-sizing: border-box;
+        }
+    }
+
+}

package/scss/responsive-layout/index.import.scss

@@ -0,0 +1,25 @@
+@import "./_container.scss";
+@import "./_row.scss";
+@import "./_col.scss";
+@import "./_col-gap.scss";
+
+
+@mixin kendo-utils--responsive-layout() {
+    @include kendo-utils--responsive-layout--container();
+    @include kendo-utils--responsive-layout--row();
+    @include kendo-utils--responsive-layout--col();
+    @include kendo-utils--responsive-layout--col-gap();
+
+    @each $key, $val in $kendo-breakpoints {
+        @include kendo-breakpoint-up($key) {
+            @include kendo-utils--responsive-layout--col--responsive($key);
+            @include kendo-utils--responsive-layout--col-gap--responsive($key);
+        }
+    }
+
+    @each $key, $val in $kendo-container-max-widths {
+        @include kendo-breakpoint-up($key) {
+            @include kendo-utils--responsive-layout--container--responsive($key, $val);
+        }
+    }
+}

package/scss/sizing/_height.scss

@@ -142,18 +142,24 @@
 /// @group height
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-sizing-height"));
+
 @mixin kendo-utils--sizing--height() {
+    @include module-render("utils-sizing-height") {
 
-    // Height utility classes
-    $kendo-utils-height: k-map-get( $kendo-utils, "height" ) !default;
-    @include generate-utils( h, height, $kendo-utils-height );
+        // Height utility classes
+        $kendo-utils-height: k-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;
-    @include generate-utils( min-h, min-height, $kendo-utils-min-height );
+        // Min height utility classes
+        $kendo-utils-min-height: k-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;
-    @include generate-utils( max-h, max-height, $kendo-utils-max-height );
+        // Max height utility classes
+        $kendo-utils-max-height: k-map-get( $kendo-utils, "max-height" ) !default;
+        @include generate-utils( max-h, max-height, $kendo-utils-max-height );
 
+    }
 }

package/scss/sizing/_width.scss

@@ -142,18 +142,24 @@
 /// @group width
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-sizing-width"));
+
 @mixin kendo-utils--sizing--width() {
+    @include module-render("utils-sizing-width") {
 
-    // Width utility classes
-    $kendo-utils-width: k-map-get( $kendo-utils, "width" ) !default;
-    @include generate-utils( w, width, $kendo-utils-width );
+        // Width utility classes
+        $kendo-utils-width: k-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;
-    @include generate-utils( min-w, min-width, $kendo-utils-min-width );
+        // Min-width utility classes
+        $kendo-utils-min-width: k-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;
-    @include generate-utils( max-w, max-width, $kendo-utils-max-width );
+        // Max-width utility classes
+        $kendo-utils-max-width: k-map-get( $kendo-utils, "max-width" ) !default;
+        @include generate-utils( max-w, max-width, $kendo-utils-max-width );
 
+    }
 }

package/scss/spacing/_margin.scss

@@ -544,16 +544,22 @@
 /// @group margin
 /// @contextType css
 
-@mixin kendo-utils--spacing--margin() {
-
-    // Margin utility classes
-    $kendo-utils-margin: k-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" );
-    @include generate-utils( mb, margin-bottom, $kendo-utils-margin, $css-var: "spacing" );
-    @include generate-utils( ml, margin-left, $kendo-utils-margin, $css-var: "spacing" );
-    @include generate-utils( mx, margin-inline, $kendo-utils-margin, $css-var: "spacing" );
-    @include generate-utils( my, margin-block, $kendo-utils-margin, $css-var: "spacing" );
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-spacing-margin"));
 
+@mixin kendo-utils--spacing--margin() {
+    @include module-render("utils-spacing-margin") {
+
+        // Margin utility classes
+        $kendo-utils-margin: k-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" );
+        @include generate-utils( mb, margin-bottom, $kendo-utils-margin, $css-var: "spacing" );
+        @include generate-utils( ml, margin-left, $kendo-utils-margin, $css-var: "spacing" );
+        @include generate-utils( mx, margin-inline, $kendo-utils-margin, $css-var: "spacing" );
+        @include generate-utils( my, margin-block, $kendo-utils-margin, $css-var: "spacing" );
+
+    }
 }

package/scss/spacing/_padding.scss

@@ -460,16 +460,31 @@
 /// @group padding
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-spacing-padding"));
+
 @mixin kendo-utils--spacing--padding() {
+    @include module-render("utils-spacing-padding") {
+
+        // Padding utility classes
+        $kendo-utils-padding: k-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" );
+        @include generate-utils( pb, padding-bottom, $kendo-utils-padding, $css-var: "spacing" );
+        @include generate-utils( pl, padding-left, $kendo-utils-padding, $css-var: "spacing" );
+        @include generate-utils( px, padding-inline, $kendo-utils-padding, $css-var: "spacing" );
+        @include generate-utils( py, padding-block, $kendo-utils-padding, $css-var: "spacing" );
+
+    }
+}
+
+@mixin kendo-utils--spacing--padding--responsive($key) {
 
-    // Padding utility classes
+    // Padding responsive utility classes
     $kendo-utils-padding: k-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" );
-    @include generate-utils( pb, padding-bottom, $kendo-utils-padding, $css-var: "spacing" );
-    @include generate-utils( pl, padding-left, $kendo-utils-padding, $css-var: "spacing" );
-    @include generate-utils( px, padding-inline, $kendo-utils-padding, $css-var: "spacing" );
-    @include generate-utils( py, padding-block, $kendo-utils-padding, $css-var: "spacing" );
+    @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,18 +1,24 @@
 // TODO: docs
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-spacing-space-between"));
+
 @mixin kendo-utils--spacing--space-between() {
+    @include module-render("utils-spacing-space-between") {
 
-    // Space between utility classes
-    $kendo-utils-space-between: k-map-get( $kendo-utils, "space-between" ) !default;
-    @each $key, $value in $kendo-utils-space-between {
-        $_key: k-escape-class-name( $key );
+        // Space between utility classes
+        $kendo-utils-space-between: k-map-get( $kendo-utils, "space-between" ) !default;
+        @each $key, $value in $kendo-utils-space-between {
+            $_key: k-escape-class-name( $key );
 
-        .#{$kendo-prefix}space-x-#{$_key} > * + * {
-            margin-inline-start: $value;
-        }
-        .#{$kendo-prefix}space-y-#{$_key} > * + * {
-            margin-block-start: $value;
+            .#{$kendo-prefix}space-x-#{$_key} > * + * {
+                margin-inline-start: $value;
+            }
+            .#{$kendo-prefix}space-y-#{$_key} > * + * {
+                margin-block-start: $value;
+            }
         }
-    }
 
+    }
 }

package/scss/spacing/index.import.scss

@@ -10,3 +10,7 @@
     @include kendo-utils--spacing--padding();
     @include kendo-utils--spacing--space-between();
 }
+
+@mixin kendo-utils--spacing--responsive($key) {
+    @include kendo-utils--spacing--padding--responsive($key)
+}

package/scss/svg/_fill.scss

@@ -34,10 +34,16 @@
 /// @group fill
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-svg-fill"));
+
 @mixin kendo-utils--svg--fill() {
+    @include module-render("utils-svg-fill") {
 
-    // fill utility classes
-    $kendo-utils-fill: k-map-get( $kendo-utils, "fill-stroke" ) !default;
-    @include generate-utils( fill, fill, $kendo-utils-fill );
+        // fill utility classes
+        $kendo-utils-fill: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+        @include generate-utils( fill, fill, $kendo-utils-fill );
 
+    }
 }

package/scss/svg/_stroke.scss

@@ -34,10 +34,16 @@
 /// @group stroke
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-svg-stroke"));
+
 @mixin kendo-utils--svg--stroke() {
+    @include module-render("utils-svg-stroke") {
 
-    // stroke utility classes
-    $kendo-utils-stroke: k-map-get( $kendo-utils, "fill-stroke" ) !default;
-    @include generate-utils( stroke, stroke, $kendo-utils-stroke );
+        // stroke utility classes
+        $kendo-utils-stroke: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+        @include generate-utils( stroke, stroke, $kendo-utils-stroke );
 
+    }
 }

package/scss/table/_border-collapse.scss

@@ -10,10 +10,16 @@
 /// @group border-collapse
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-table-border-collapse"));
+
 @mixin kendo-utils--table--border-collapse() {
+    @include module-render("utils-table-border-collapse") {
 
-    // Border collapse utility classes
-    $kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !default;
-    @include generate-utils( border, border-collapse, $kendo-utils-border-collapse );
+        // Border collapse utility classes
+        $kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !default;
+        @include generate-utils( border, border-collapse, $kendo-utils-border-collapse );
 
+    }
 }

package/scss/table/_table-layout.scss

@@ -10,11 +10,17 @@
 /// @group table-layout
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-table-table-layout"));
+
 @mixin kendo-utils--table--table-layout() {
+    @include module-render("utils-table-table-layout") {
 
-    // Table layout utility classes
-    $kendo-utils-table-layout: k-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 );
+        // Table layout utility classes
+        $kendo-utils-table-layout: k-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/transform/_flip.scss

@@ -12,23 +12,29 @@
 
 // TODO: consider globally horizontal vs h vs x
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-transform-flip"));
+
 @mixin kendo-utils--transform--flip() {
+    @include module-render("utils-transform-flip") {
 
-    // Flip utility classes
-    $kendo-utils-flip: k-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
-        .#{$kendo-prefix}flip-v { transform: scaleY( -1 ); }
-        .\!#{$kendo-prefix}flip-v { transform: scaleY( -1 ) !important; } // stylelint-disable-line declaration-no-important
-        .#{$kendo-prefix}flip-h.#{$kendo-prefix}flip-v { transform: scale( -1, -1 ); }
-        .\!#{$kendo-prefix}flip-h.\!#{$kendo-prefix}flip-v { transform: scale( -1, -1 ) !important; } // stylelint-disable-line declaration-no-important
+        // Flip utility classes
+        $kendo-utils-flip: k-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
+            .#{$kendo-prefix}flip-v { transform: scaleY( -1 ); }
+            .\!#{$kendo-prefix}flip-v { transform: scaleY( -1 ) !important; } // stylelint-disable-line declaration-no-important
+            .#{$kendo-prefix}flip-h.#{$kendo-prefix}flip-v { transform: scale( -1, -1 ); }
+            .\!#{$kendo-prefix}flip-h.\!#{$kendo-prefix}flip-v { transform: scale( -1, -1 ) !important; } // stylelint-disable-line declaration-no-important
 
-        // Legacy aliases
-        .#{$kendo-prefix}flip-x { @extend .#{$kendo-prefix}flip-h !optional; }
-        .\!#{$kendo-prefix}flip-x { @extend .\!#{$kendo-prefix}flip-h !optional; }
-        .#{$kendo-prefix}flip-y { @extend .#{$kendo-prefix}flip-v !optional; }
-        .\!#{$kendo-prefix}flip-y { @extend .\!#{$kendo-prefix}flip-v !optional; }
-    }
+            // Legacy aliases
+            .#{$kendo-prefix}flip-x { @extend .#{$kendo-prefix}flip-h !optional; }
+            .\!#{$kendo-prefix}flip-x { @extend .\!#{$kendo-prefix}flip-h !optional; }
+            .#{$kendo-prefix}flip-y { @extend .#{$kendo-prefix}flip-v !optional; }
+            .\!#{$kendo-prefix}flip-y { @extend .\!#{$kendo-prefix}flip-v !optional; }
+        }
 
+    }
 }

package/scss/transform/_origin.scss

@@ -52,10 +52,16 @@
 /// @group transform-origin
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-transform-origin"));
+
 @mixin kendo-utils--transform--origin() {
+    @include module-render("utils-transform-origin") {
 
-    // Transform origin utility classes
-    $kendo-utils-origin: k-map-get( $kendo-utils, "origin" ) !default;
-    @include generate-utils( origin, transform-origin, $kendo-utils-origin );
+        // Transform origin utility classes
+        $kendo-utils-origin: k-map-get( $kendo-utils, "origin" ) !default;
+        @include generate-utils( origin, transform-origin, $kendo-utils-origin );
 
+    }
 }

package/scss/transform/_rotate.scss

@@ -46,6 +46,10 @@
 /// @group transform
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-transform-rotate"));
+
 // stylelint-disable scss/at-function-pattern
 @function _rotate( $val ) {
     @return rotate( $val );
@@ -53,9 +57,11 @@
 // stylelint-enable scss/at-function-pattern
 
 @mixin kendo-utils--transform--rotate() {
+    @include module-render("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 );
+        // Rotate utility classes
+        $kendo-utils-rotate: k-map-get( $kendo-utils, "rotate" ) !default;
+        @include generate-utils( rotate, transform, $kendo-utils-rotate, _rotate );
 
+    }
 }