@progress/kendo-theme-utils 6.0.2-dev.0 → 6.0.3

package/scss/layout/_position.scss

@@ -25,94 +25,8 @@
 /// @group position
 /// @contextType css
 
-$kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
-
-@include generate-utils( pos, position, $kendo-utils-position );
-
-// 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; }
-
-
-// TODO DOCS
-
-$kendo-utils-inset: k-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 );
-@include generate-utils( top, top, $kendo-utils-inset );
-@include generate-utils( right, right, $kendo-utils-inset );
-@include generate-utils( bottom, bottom, $kendo-utils-inset );
-@include generate-utils( left, left, $kendo-utils-inset );
-@include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
-@include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
-@include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
-@include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
-
-.#{$kendo-prefix}top-start,
-.#{$kendo-prefix}pos-top-start {
-    top: 0;
-    inset-inline-start: 0;
-}
 
-.#{$kendo-prefix}top-end,
-.#{$kendo-prefix}pos-top-end {
-    top: 0;
-    inset-inline-end: 0;
-}
-
-.#{$kendo-prefix}bottom-start,
-.#{$kendo-prefix}pos-bottom-start {
-    bottom: 0;
-    inset-inline-start: 0;
-}
-
-.#{$kendo-prefix}bottom-end,
-.#{$kendo-prefix}pos-bottom-end {
-    bottom: 0;
-    inset-inline-end: 0;
-}
-
-.#{$kendo-prefix}top-center,
-.#{$kendo-prefix}pos-top-center {
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-}
-.#{$kendo-prefix}middle-left,
-.#{$kendo-prefix}middle-start,
-.#{$kendo-prefix}pos-middle-start {
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-}
-.#{$kendo-prefix}middle-center {
-    top: 50%;
-    left: 50%;
-    transform: translateY(-50%);
-}
-.#{$kendo-prefix}middle-right,
-.#{$kendo-prefix}middle-end,
-.#{$kendo-prefix}pos-middle-end {
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-}
-.#{$kendo-prefix}bottom-center,
-.#{$kendo-prefix}pos-bottom-center {
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-}
+// TODO: inset docs
 
 
 /// This is equivalent to `top: 0;`.
@@ -135,7 +49,103 @@ $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
 /// @group position
 /// @contextType css
 
-@each $side in (top, right, bottom, left) {
-    .#{$kendo-prefix}#{$side},
-    .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+@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 );
+
+
+    // 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; }
+
+
+    // Inset utility classes
+    $kendo-utils-inset: k-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 );
+    @include generate-utils( top, top, $kendo-utils-inset );
+    @include generate-utils( right, right, $kendo-utils-inset );
+    @include generate-utils( bottom, bottom, $kendo-utils-inset );
+    @include generate-utils( left, left, $kendo-utils-inset );
+    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
+    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
+    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
+    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
+
+
+    // Legacy aliases
+    .#{$kendo-prefix}top-start,
+    .#{$kendo-prefix}pos-top-start {
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}top-end,
+    .#{$kendo-prefix}pos-top-end {
+        top: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}bottom-start,
+    .#{$kendo-prefix}pos-bottom-start {
+        bottom: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}bottom-end,
+    .#{$kendo-prefix}pos-bottom-end {
+        bottom: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}top-center,
+    .#{$kendo-prefix}pos-top-center {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .#{$kendo-prefix}middle-left,
+    .#{$kendo-prefix}middle-start,
+    .#{$kendo-prefix}pos-middle-start {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-center {
+        top: 50%;
+        left: 50%;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-right,
+    .#{$kendo-prefix}middle-end,
+    .#{$kendo-prefix}pos-middle-end {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}bottom-center,
+    .#{$kendo-prefix}pos-bottom-center {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+
+    // Position length utility classes
+    @each $side in (top, right, bottom, left) {
+        .#{$kendo-prefix}#{$side},
+        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+    }
+
 }

package/scss/layout/_visibility.scss

@@ -1,11 +1,16 @@
-// TODO DOCS
+// TODO: docs
+// TODO: consider visible and invisible vs visibility-visible and visibility-hidden
 
-$kendo-utils-visibility: k-map-get( $kendo-utils, "visibility" ) !default;
+@mixin kendo-utils--layout--visibility() {
 
-@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 );
 
-// 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

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-zindex: k-map-get( $kendo-utils, "zindex" ) !default;
+@mixin kendo-utils--layout--zindex() {
 
-@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

@@ -1,8 +1,20 @@
 @import "./_aspect-ratio.scss";
+@import "./_clear.scss";
 @import "./_display.scss";
 @import "./_float.scss";
-@import "./_clear.scss";
 @import "./_overflow.scss";
 @import "./_position.scss";
 @import "./_visibility.scss";
 @import "./_zindex.scss";
+
+
+@mixin kendo-utils--layout() {
+    @include kendo-utils--layout--aspect-ratio();
+    @include kendo-utils--layout--clear();
+    @include kendo-utils--layout--display();
+    @include kendo-utils--layout--float();
+    @include kendo-utils--layout--overflow();
+    @include kendo-utils--layout--position();
+    @include kendo-utils--layout--visibility();
+    @include kendo-utils--layout--zindex();
+}

package/scss/sizing/_height.scss

@@ -1,15 +1,17 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-height: k-map-get( $kendo-utils, "height" ) !default;
+@mixin kendo-utils--sizing--height() {
 
-@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 );
 
-$kendo-utils-min-height: k-map-get( $kendo-utils, "min-height" ) !default;
+    // 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 );
 
-@include generate-utils( min-h, min-height, $kendo-utils-min-height );
-
-
-$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

@@ -1,15 +1,17 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-width: k-map-get( $kendo-utils, "width" ) !default;
+@mixin kendo-utils--sizing--width() {
 
-@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 );
 
-$kendo-utils-min-width: k-map-get( $kendo-utils, "min-width" ) !default;
+    // 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 );
 
-@include generate-utils( min-w, min-width, $kendo-utils-min-width );
-
-
-$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/sizing/index.import.scss

@@ -1,2 +1,8 @@
-@import "./_width.scss";
 @import "./_height.scss";
+@import "./_width.scss";
+
+
+@mixin kendo-utils--sizing() {
+    @include kendo-utils--sizing--height();
+    @include kendo-utils--sizing--width();
+}

package/scss/spacing/_margin.scss

@@ -1,11 +1,15 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
+@mixin kendo-utils--spacing--margin() {
 
-@include generate-utils( m, margin, $kendo-utils-margin );
-@include generate-utils( mt, margin-top, $kendo-utils-margin );
-@include generate-utils( mr, margin-right, $kendo-utils-margin );
-@include generate-utils( mb, margin-bottom, $kendo-utils-margin );
-@include generate-utils( ml, margin-left, $kendo-utils-margin );
-@include generate-utils( mx, margin-inline, $kendo-utils-margin );
-@include generate-utils( my, margin-block, $kendo-utils-margin );
+    // Margin utility classes
+    $kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
+    @include generate-utils( m, margin, $kendo-utils-margin );
+    @include generate-utils( mt, margin-top, $kendo-utils-margin );
+    @include generate-utils( mr, margin-right, $kendo-utils-margin );
+    @include generate-utils( mb, margin-bottom, $kendo-utils-margin );
+    @include generate-utils( ml, margin-left, $kendo-utils-margin );
+    @include generate-utils( mx, margin-inline, $kendo-utils-margin );
+    @include generate-utils( my, margin-block, $kendo-utils-margin );
+
+}

package/scss/spacing/_padding.scss

@@ -1,11 +1,15 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
+@mixin kendo-utils--spacing--padding() {
 
-@include generate-utils( p, padding, $kendo-utils-padding );
-@include generate-utils( pt, padding-top, $kendo-utils-padding );
-@include generate-utils( pr, padding-right, $kendo-utils-padding );
-@include generate-utils( pb, padding-bottom, $kendo-utils-padding );
-@include generate-utils( pl, padding-left, $kendo-utils-padding );
-@include generate-utils( px, padding-inline, $kendo-utils-padding );
-@include generate-utils( py, padding-block, $kendo-utils-padding );
+    // Padding utility classes
+    $kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
+    @include generate-utils( p, padding, $kendo-utils-padding );
+    @include generate-utils( pt, padding-top, $kendo-utils-padding );
+    @include generate-utils( pr, padding-right, $kendo-utils-padding );
+    @include generate-utils( pb, padding-bottom, $kendo-utils-padding );
+    @include generate-utils( pl, padding-left, $kendo-utils-padding );
+    @include generate-utils( px, padding-inline, $kendo-utils-padding );
+    @include generate-utils( py, padding-block, $kendo-utils-padding );
+
+}

package/scss/spacing/_space-between.scss

@@ -0,0 +1,18 @@
+// TODO: docs
+
+@mixin kendo-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 );
+
+        .#{$kendo-prefix}space-x-#{$_key} > * + * {
+            margin-inline-start: $value;
+        }
+        .#{$kendo-prefix}space-y-#{$_key} > * + * {
+            margin-block-start: $value;
+        }
+    }
+
+}

package/scss/spacing/index.import.scss

@@ -1,3 +1,10 @@
 @import "./_margin.scss";
 @import "./_padding.scss";
 @import "./_space-between.scss";
+
+
+@mixin kendo-utils--spacing() {
+    @include kendo-utils--spacing--margin();
+    @include kendo-utils--spacing--padding();
+    @include kendo-utils--spacing--space-between();
+}

package/scss/table/_border-collapse.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !default;
+@mixin kendo-utils--table--border-collapse() {
 
-@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,8 +10,11 @@
 /// @group table-layout
 /// @contextType css
 
-// Table layout utility classes
-$kendo-utils-table-layout: k-map-get( $kendo-utils, "table-layout" ) !default;
+@mixin kendo-utils--table--table-layout() {
 
-@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/table/index.import.scss

@@ -1,2 +1,8 @@
 @import "./_border-collapse.scss";
 @import "./_table-layout.scss";
+
+
+@mixin kendo-utils--table() {
+    @include kendo-utils--table--border-collapse();
+    @include kendo-utils--table--table-layout();
+}

package/scss/transform/_flip.scss

@@ -8,20 +8,25 @@
 /// @group transform
 /// @contextType css
 
-// Flip utility classes
-$kendo-utils-flip: k-map-get( $kendo-utils, "flip" ) !default;
+// TODO: consider globally horizontal vs h vs x
 
-@if $kendo-utils-flip {
-    .#{$kendo-prefix}flip-h { transform: scaleX( -1 ); }
-    .\!#{$kendo-prefix}flip-h { transform: scaleX( -1 ) !important; } // sass-lint:disable-line no-important
-    .#{$kendo-prefix}flip-v { transform: scaleY( -1 ); }
-    .\!#{$kendo-prefix}flip-v { transform: scaleY( -1 ) !important; } // sass-lint:disable-line 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; } // sass-lint:disable-line no-important
+@mixin kendo-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; } // sass-lint:disable-line no-important
+        .#{$kendo-prefix}flip-v { transform: scaleY( -1 ); }
+        .\!#{$kendo-prefix}flip-v { transform: scaleY( -1 ) !important; } // sass-lint:disable-line 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; } // sass-lint:disable-line 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; }
+    }
 
-    // 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

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-origin: k-map-get( $kendo-utils, "origin" ) !default;
+@mixin kendo-utils--transform--origin() {
 
-@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

@@ -38,12 +38,16 @@
 /// @group transform
 /// @contextType css
 
-$kendo-utils-rotate: k-map-get( $kendo-utils, "rotate" ) !default;
-
 // sass-lint:disable function-name-format
 @function __rotate( $val ) {
     @return rotate( $val );
 }
 // sass-lint:enable function-name-format
 
-@include generate-utils( rotate, transform, $kendo-utils-rotate, __rotate );
+@mixin kendo-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 );
+
+}

package/scss/transform/_scale.scss

@@ -13,8 +13,6 @@
 /// @group transform
 /// @contextType css
 
-$kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
-
 // sass-lint:disable function-name-format
 @function __scale( $val ) {
     @return scale( $val );
@@ -27,6 +25,12 @@ $kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
 }
 // sass-lint:enable function-name-format
 
-@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 );
+@mixin kendo-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 );
+
+}

package/scss/transform/_skew.scss

@@ -1,6 +1,4 @@
-// TODO DOCS
-
-$kendo-utils-skew: k-map-get( $kendo-utils, "skew" ) !default;
+// TODO: docs
 
 // sass-lint:disable function-name-format
 @function __skew-x( $val ) {
@@ -11,5 +9,11 @@ $kendo-utils-skew: k-map-get( $kendo-utils, "skew" ) !default;
 }
 // sass-lint:enable function-name-format
 
-@include generate-utils( skew-x, transform, $kendo-utils-skew, __skew-x );
-@include generate-utils( skew-y, transform, $kendo-utils-skew, __skew-y );
+@mixin kendo-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 );
+
+}

package/scss/transform/_translate.scss

@@ -43,19 +43,6 @@
 /// @group transform
 /// @contextType css
 
-$kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
-$kendo-utils-translate-xy: (
-    "0": ( 0, 0 ),
-    "0-50": ( 0, 50% ),
-    "0-100": ( 0, 100% ),
-    "50-0": ( 50%, 0 ),
-    "50-50": ( 50%, 50% ),
-    "50-100": ( 50%, 100% ),
-    "100-0": ( 100%, 0 ),
-    "100-50": ( 100%, 50% ),
-    "100-100": ( 100%, 100% )
-) !default;
-
 // sass-lint:disable function-name-format
 @function __translate( $val ) {
     @return translate( $val );
@@ -68,6 +55,23 @@ $kendo-utils-translate-xy: (
 }
 // sass-lint:enable function-name-format
 
-@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 );
+@mixin kendo-utils--transform--translate() {
+
+    // Translate utility classes
+    $kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
+    $kendo-utils-translate-xy: (
+        "0": ( 0, 0 ),
+        "0-50": ( 0, 50% ),
+        "0-100": ( 0, 100% ),
+        "50-0": ( 50%, 0 ),
+        "50-50": ( 50%, 50% ),
+        "50-100": ( 50%, 100% ),
+        "100-0": ( 100%, 0 ),
+        "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 );
+
+}

package/scss/transform/index.import.scss

@@ -1,6 +1,16 @@
 @import "./_flip.scss";
-@import "./_scale.scss";
+@import "./_origin.scss";
 @import "./_rotate.scss";
-@import "./_translate.scss";
+@import "./_scale.scss";
 @import "./_skew.scss";
-@import "./_origin.scss";
+@import "./_translate.scss";
+
+
+@mixin kendo-utils--transform() {
+    @include kendo-utils--transform--flip();
+    @include kendo-utils--transform--origin();
+    @include kendo-utils--transform--rotate();
+    @include kendo-utils--transform--scale();
+    @include kendo-utils--transform--skew();
+    @include kendo-utils--transform--translate();
+}