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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-utils",
   "description": "Utility first library alongside Kendo UI",
-  "version": "6.0.2",
+  "version": "6.0.4-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -41,7 +41,7 @@
     "postpublish": "echo 'no postpublish for utils'"
   },
   "dependencies": {
-    "@progress/kendo-theme-core": "^6.0.2"
+    "@progress/kendo-theme-core": "^6.0.4-dev.0"
   },
-  "gitHead": "ba4938b03e5055885c80f922a872f6d7031e5c61"
+  "gitHead": "15583e94f67633d6680efd66700436332e389175"
 }

package/scss/_variables.scss

@@ -368,7 +368,17 @@ $kendo-utils: (
         max: max-content,
         fr: minmax( 0, 1fr ),
     ),
-    "gap": $kendo-spacing,
+    "gap": k-map-merge( $kendo-spacing, (
+        // sass-lint:disable-block indentation
+        // TODO: remove this extension once we fix docs
+        xs: k-map-get( $kendo-spacing, 1 ),
+        sm: k-map-get( $kendo-spacing, 2 ),
+        md: k-map-get( $kendo-spacing, 3 ),
+        lg: k-map-get( $kendo-spacing, 4 ),
+        xl: k-map-get( $kendo-spacing, 6 ),
+        thin: k-map-get( $kendo-spacing, 0.5 ), // sass-lint:disable-line leading-zero
+        hair: k-map-get( $kendo-spacing, 1px )
+    )),
     "align-content": (
         normal: normal,
         stretch: stretch,
@@ -446,8 +456,28 @@ $kendo-utils: (
     ),
 
     // Spacing
-    "margin": $kendo-spacing,
-    "padding": $kendo-spacing,
+    "margin": k-map-merge( $kendo-spacing, (
+        // sass-lint:disable-block indentation
+        // TODO: remove this extension once we fix docs
+        xs: k-map-get( $kendo-spacing, 1 ),
+        sm: k-map-get( $kendo-spacing, 2 ),
+        md: k-map-get( $kendo-spacing, 3 ),
+        lg: k-map-get( $kendo-spacing, 4 ),
+        xl: k-map-get( $kendo-spacing, 6 ),
+        thin: k-map-get( $kendo-spacing, 0.5 ), // sass-lint:disable-line leading-zero
+        hair: k-map-get( $kendo-spacing, 1px )
+    )),
+    "padding": k-map-merge( $kendo-spacing, (
+        // sass-lint:disable-block indentation
+        // TODO: remove this extension once we fix docs
+        xs: k-map-get( $kendo-spacing, 1 ),
+        sm: k-map-get( $kendo-spacing, 2 ),
+        md: k-map-get( $kendo-spacing, 3 ),
+        lg: k-map-get( $kendo-spacing, 4 ),
+        xl: k-map-get( $kendo-spacing, 6 ),
+        thin: k-map-get( $kendo-spacing, 0.5 ), // sass-lint:disable-line leading-zero
+        hair: k-map-get( $kendo-spacing, 1px )
+    )),
     "space-between": (),
 
     // Sizing
@@ -496,7 +526,7 @@ $kendo-utils: (
 
     // Typography
     "font-family": (),
-    "font-size": (),
+    "font-size": $kendo-font-sizes,
     "font-smoothing": (),
     "font-style": (
         italic: italic,

package/scss/accessibility/_screen-readers.scss

@@ -1,28 +1,33 @@
-$kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;
+@mixin kendo-utils--accessibility--screen-readers() {
 
-@if $kendo-utils-accessibility {
-    /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
-    /// @name .k-sr-only
-    /// @group accessibility
-    .#{$kendo-prefix}sr-only {
-        margin: -1px;
-        padding: 0;
-        width: 1px;
-        height: 1px;
-        border-width: 0;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        position: absolute;
-    }
+    // Screen readers utility classes
+    $kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;
+
+    @if $kendo-utils-accessibility {
+        /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+        /// @name .k-sr-only
+        /// @group accessibility
+        .#{$kendo-prefix}sr-only {
+            margin: -1px;
+            padding: 0;
+            width: 1px;
+            height: 1px;
+            border-width: 0;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            position: absolute;
+        }
 
-    .#{$kendo-prefix}not-sr-only {
-        margin: 0;
-        padding: 0;
-        width: auto;
-        height: auto;
-        border-width: 0;
-        overflow: visible;
-        clip: auto;
-        position: static;
+        .#{$kendo-prefix}not-sr-only {
+            margin: 0;
+            padding: 0;
+            width: auto;
+            height: auto;
+            border-width: 0;
+            overflow: visible;
+            clip: auto;
+            position: static;
+        }
     }
+
 }

package/scss/accessibility/index.import.scss

@@ -1 +1,5 @@
 @import "./_screen-readers.scss";
+
+@mixin kendo-utils--accessibility() {
+    @include kendo-utils--accessibility--screen-readers();
+}

package/scss/all.scss

@@ -1 +1,3 @@
 @import "./index.import.scss";
+
+@include kendo-utils();

package/scss/background/_background-color.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
+@mixin kendo-utils--background--background-color() {
 
-@include generate-utils( bg, background-color, $kendo-utils-background-color );
+    // Background color utility classes
+    $kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
+    @include generate-utils( bg, background-color, $kendo-utils-background-color );
+
+}

package/scss/background/index.import.scss

@@ -1 +1,6 @@
 @import "./_background-color.scss";
+
+
+@mixin kendo-utils--background() {
+    @include kendo-utils--background--background-color();
+}

package/scss/border/_border-color.scss

@@ -1,11 +1,15 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
+@mixin kendo-utils--border--border-color() {
 
-@include generate-utils( border, border-color, $kendo-utils-border-color );
-@include generate-utils( border-t, border-top-color, $kendo-utils-border-color );
-@include generate-utils( border-r, border-right-color, $kendo-utils-border-color );
-@include generate-utils( border-b, border-bottom-color, $kendo-utils-border-color );
-@include generate-utils( border-l, border-left-color, $kendo-utils-border-color );
-@include generate-utils( border-x, border-inline-color, $kendo-utils-border-color );
-@include generate-utils( border-y, border-block-color, $kendo-utils-border-color );
+    // Border color utility classes
+    $kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
+    @include generate-utils( border, border-color, $kendo-utils-border-color );
+    @include generate-utils( border-t, border-top-color, $kendo-utils-border-color );
+    @include generate-utils( border-r, border-right-color, $kendo-utils-border-color );
+    @include generate-utils( border-b, border-bottom-color, $kendo-utils-border-color );
+    @include generate-utils( border-l, border-left-color, $kendo-utils-border-color );
+    @include generate-utils( border-x, border-inline-color, $kendo-utils-border-color );
+    @include generate-utils( border-y, border-block-color, $kendo-utils-border-color );
+
+}

package/scss/border/_border-radius.scss

@@ -1,13 +1,17 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-border-radius: k-map-get( $kendo-utils, "border-radius" ) !default;
+@mixin kendo-utils--border--border-radius() {
 
-@include generate-utils( rounded, border-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-tl, border-top-left-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-tr, border-top-right-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-br, border-bottom-right-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-bl, border-bottom-left-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-t, ( border-top-left-radius, border-top-right-radius ), $kendo-utils-border-radius );
-@include generate-utils( rounded-r, ( border-top-right-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
-@include generate-utils( rounded-b, ( border-bottom-left-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
-@include generate-utils( rounded-l, ( border-top-left-radius, border-bottom-left-radius ), $kendo-utils-border-radius );
+    // Border radius utility classes
+    $kendo-utils-border-radius: k-map-get( $kendo-utils, "border-radius" ) !default;
+    @include generate-utils( rounded, border-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-tl, border-top-left-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-tr, border-top-right-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-br, border-bottom-right-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-bl, border-bottom-left-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-t, ( border-top-left-radius, border-top-right-radius ), $kendo-utils-border-radius );
+    @include generate-utils( rounded-r, ( border-top-right-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
+    @include generate-utils( rounded-b, ( border-bottom-left-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
+    @include generate-utils( rounded-l, ( border-top-left-radius, border-bottom-left-radius ), $kendo-utils-border-radius );
+
+}

package/scss/border/_border-style.scss

@@ -1,11 +1,15 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-border-style: k-map-get( $kendo-utils, "border-style" ) !default;
+@mixin kendo-utils--border--border-style() {
 
-@include generate-utils( border, border-style, $kendo-utils-border-style );
-@include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
-@include generate-utils( border-r, border-right-style, $kendo-utils-border-style );
-@include generate-utils( border-b, border-bottom-style, $kendo-utils-border-style );
-@include generate-utils( border-l, border-left-style, $kendo-utils-border-style );
-@include generate-utils( border-x, border-inline-style, $kendo-utils-border-style );
-@include generate-utils( border-y, border-block-style, $kendo-utils-border-style );
+    // Border style utility classes
+    $kendo-utils-border-style: k-map-get( $kendo-utils, "border-style" ) !default;
+    @include generate-utils( border, border-style, $kendo-utils-border-style );
+    @include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
+    @include generate-utils( border-r, border-right-style, $kendo-utils-border-style );
+    @include generate-utils( border-b, border-bottom-style, $kendo-utils-border-style );
+    @include generate-utils( border-l, border-left-style, $kendo-utils-border-style );
+    @include generate-utils( border-x, border-inline-style, $kendo-utils-border-style );
+    @include generate-utils( border-y, border-block-style, $kendo-utils-border-style );
+
+}

package/scss/border/_border-width.scss

@@ -1,18 +1,22 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
+@mixin kendo-utils--border--border-width() {
 
-@include generate-utils( border, border-width, $kendo-utils-border-width );
-@include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
-@include generate-utils( border-r, border-right-width, $kendo-utils-border-width );
-@include generate-utils( border-b, border-bottom-width, $kendo-utils-border-width );
-@include generate-utils( border-l, border-left-width, $kendo-utils-border-width );
-@include generate-utils( border-x, border-inline-width, $kendo-utils-border-width );
-@include generate-utils( border-y, border-block-width, $kendo-utils-border-width );
+    // Border width utility classes
+    $kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
+    @include generate-utils( border, border-width, $kendo-utils-border-width );
+    @include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
+    @include generate-utils( border-r, border-right-width, $kendo-utils-border-width );
+    @include generate-utils( border-b, border-bottom-width, $kendo-utils-border-width );
+    @include generate-utils( border-l, border-left-width, $kendo-utils-border-width );
+    @include generate-utils( border-x, border-inline-width, $kendo-utils-border-width );
+    @include generate-utils( border-y, border-block-width, $kendo-utils-border-width );
 
 
-// Legacy aliases
-@include generate-utils( border-top, border-top-width, $kendo-utils-border-width );
-@include generate-utils( border-right, border-right-width, $kendo-utils-border-width );
-@include generate-utils( border-bottom, border-bottom-width, $kendo-utils-border-width );
-@include generate-utils( border-left, border-left-width, $kendo-utils-border-width );
+    // Legacy aliases
+    @include generate-utils( border-top, border-top-width, $kendo-utils-border-width );
+    @include generate-utils( border-right, border-right-width, $kendo-utils-border-width );
+    @include generate-utils( border-bottom, border-bottom-width, $kendo-utils-border-width );
+    @include generate-utils( border-left, border-left-width, $kendo-utils-border-width );
+
+}

package/scss/border/_outline-color.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
+@mixin kendo-utils--border--outline-color() {
 
-@include generate-utils( outline, outline-color, $kendo-utils-outline-color );
+    // Outline color utility classes
+    $kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
+    @include generate-utils( outline, outline-color, $kendo-utils-outline-color );
+
+}

package/scss/border/_outline-offset.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-outline-offset: k-map-get( $kendo-utils, "outline-offset" ) !default;
+@mixin kendo-utils--border--outline-offset() {
 
-@include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );
+    // Outline offset utility classes
+    $kendo-utils-outline-offset: k-map-get( $kendo-utils, "outline-offset" ) !default;
+    @include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );
+
+}

package/scss/border/_outline-style.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-outline-style: k-map-get( $kendo-utils, "outline-style" ) !default;
+@mixin kendo-utils--border--outline-style() {
 
-@include generate-utils( outline, outline-style, $kendo-utils-outline-style );
+    // Outline style utility classes
+    $kendo-utils-outline-style: k-map-get( $kendo-utils, "outline-style" ) !default;
+    @include generate-utils( outline, outline-style, $kendo-utils-outline-style );
+
+}

package/scss/border/_outline-width.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-outline-width: k-map-get( $kendo-utils, "outline-width" ) !default;
+@mixin kendo-utils--border--outline-width() {
 
-@include generate-utils( outline, outline-width, $kendo-utils-outline-width );
+    // Outline width utility classes
+    $kendo-utils-outline-width: k-map-get( $kendo-utils, "outline-width" ) !default;
+    @include generate-utils( outline, outline-width, $kendo-utils-outline-width );
+
+}

package/scss/border/index.import.scss

@@ -1,8 +1,20 @@
-@import "./_border-width.scss";
-@import "./_border-style.scss";
 @import "./_border-color.scss";
 @import "./_border-radius.scss";
-@import "./_outline-width.scss";
-@import "./_outline-style.scss";
+@import "./_border-style.scss";
+@import "./_border-width.scss";
 @import "./_outline-color.scss";
 @import "./_outline-offset.scss";
+@import "./_outline-style.scss";
+@import "./_outline-width.scss";
+
+
+@mixin kendo-utils--border() {
+    @include kendo-utils--border--border-color();
+    @include kendo-utils--border--border-radius();
+    @include kendo-utils--border--border-style();
+    @include kendo-utils--border--border-width();
+    @include kendo-utils--border--outline-color();
+    @include kendo-utils--border--outline-offset();
+    @include kendo-utils--border--outline-style();
+    @include kendo-utils--border--outline-width();
+}

package/scss/flex-grid/_align-content.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-align-content: k-map-get( $kendo-utils, "align-content" ) !default;
+@mixin kendo-utils--flex-grid--align-content() {
 
-@include generate-utils( align-content, align-content, $kendo-utils-align-content );
+    // Align content utility classes
+    $kendo-utils-align-content: k-map-get( $kendo-utils, "align-content" ) !default;
+    @include generate-utils( align-content, align-content, $kendo-utils-align-content );
+
+}

package/scss/flex-grid/_align-items.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-align-items: k-map-get( $kendo-utils, "align-items" ) !default;
+@mixin kendo-utils--flex-grid--align-items() {
 
-@include generate-utils( align-items, align-items, $kendo-utils-align-items );
+    // Align items utility classes
+    $kendo-utils-align-items: k-map-get( $kendo-utils, "align-items" ) !default;
+    @include generate-utils( align-items, align-items, $kendo-utils-align-items );
+
+}

package/scss/flex-grid/_align-self.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-align-self: k-map-get( $kendo-utils, "align-self" ) !default;
+@mixin kendo-utils--flex-grid--align-self() {
 
-@include generate-utils( align-self, align-self, $kendo-utils-align-self );
+    // Align self utility classes
+    $kendo-utils-align-self: k-map-get( $kendo-utils, "align-self" ) !default;
+    @include generate-utils( align-self, align-self, $kendo-utils-align-self );
+
+}

package/scss/flex-grid/_flex-basis.scss

@@ -8,8 +8,11 @@
 /// @group flex-basis
 /// @contextType css
 
-// Flex basis utility classes
-$kendo-utils-flex-basis: k-map-get( $kendo-utils, "flex-basis" ) !default;
+@mixin kendo-utils--flex-grid--flex-basis() {
 
-@include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );
-@include generate-utils( flex-basis, flex-basis, $kendo-utils-flex-basis );
+    // Flex basis utility classes
+    $kendo-utils-flex-basis: k-map-get( $kendo-utils, "flex-basis" ) !default;
+    @include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );
+    @include generate-utils( flex-basis, flex-basis, $kendo-utils-flex-basis );
+
+}

package/scss/flex-grid/_flex-direction.scss

@@ -18,12 +18,15 @@
 /// @group flex-direction
 /// @contextType css
 
-// Flex direction utility classes
-$kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
+@mixin kendo-utils--flex-grid--flex-direction() {
 
-@include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );
+    // Flex direction utility classes
+    $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
+    @include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );
 
 
-// Legacy aliases
-.#{$kendo-prefix}flex-column { @extend .#{$kendo-prefix}flex-col !optional; }
-.#{$kendo-prefix}flex-column-reverse { @extend .#{$kendo-prefix}flex-col-reverse !optional; }
+    // Legacy aliases
+    .#{$kendo-prefix}flex-column { @extend .#{$kendo-prefix}flex-col !optional; }
+    .#{$kendo-prefix}flex-column-reverse { @extend .#{$kendo-prefix}flex-col-reverse !optional; }
+
+}

package/scss/flex-grid/_flex-grow.scss

@@ -8,8 +8,11 @@
 /// @group flex-grow
 /// @contextType css
 
-// Flex grow utility classes
-$kendo-utils-flex-grow: k-map-get( $kendo-utils, "flex-grow" ) !default;
+@mixin kendo-utils--flex-grid--flex-grow() {
 
-@include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );
-@include generate-utils( flex-grow, flex-grow, $kendo-utils-flex-grow );
+    // Flex grow utility classes
+    $kendo-utils-flex-grow: k-map-get( $kendo-utils, "flex-grow" ) !default;
+    @include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );
+    @include generate-utils( flex-grow, flex-grow, $kendo-utils-flex-grow );
+
+}

package/scss/flex-grid/_flex-shrink.scss

@@ -8,8 +8,11 @@
 /// @group flex-shrink
 /// @contextType css
 
-// Flex shrink utility classes
-$kendo-utils-flex-shrink: k-map-get( $kendo-utils, "flex-shrink" ) !default;
+@mixin kendo-utils--flex-grid--flex-shrink() {
 
-@include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );
-@include generate-utils( flex-shrink, flex-shrink, $kendo-utils-flex-shrink );
+    // Flex shrink utility classes
+    $kendo-utils-flex-shrink: k-map-get( $kendo-utils, "flex-shrink" ) !default;
+    @include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );
+    @include generate-utils( flex-shrink, flex-shrink, $kendo-utils-flex-shrink );
+
+}

package/scss/flex-grid/_flex-wrap.scss

@@ -13,7 +13,10 @@
 /// @group flex-wrap
 /// @contextType css
 
-// Flex wrap utility classes
-$kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
+@mixin kendo-utils--flex-grid--flex-wrap() {
 
-@include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );
+    // Flex wrap utility classes
+    $kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
+    @include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );
+
+}

package/scss/flex-grid/_flex.scss

@@ -18,7 +18,10 @@
 /// @group flex
 /// @contextType css
 
-// Flex utility classes
-$kendo-utils-flex: k-map-get( $kendo-utils, "flex" ) !default;
+@mixin kendo-utils--flex-grid--flex() {
 
-@include generate-utils( flex, flex, $kendo-utils-flex );
+    // Flex utility classes
+    $kendo-utils-flex: k-map-get( $kendo-utils, "flex" ) !default;
+    @include generate-utils( flex, flex, $kendo-utils-flex );
+
+}

package/scss/flex-grid/_gap.scss

@@ -1,7 +1,11 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
+@mixin kendo-utils--flex-grid--gap() {
 
-@include generate-utils( gap, gap, $kendo-utils-gap );
-@include generate-utils( gap-x, column-gap, $kendo-utils-gap );
-@include generate-utils( gap-y, row-gap, $kendo-utils-gap );
+    // Gap utility classes
+    $kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
+    @include generate-utils( gap, gap, $kendo-utils-gap );
+    @include generate-utils( gap-x, column-gap, $kendo-utils-gap );
+    @include generate-utils( gap-y, row-gap, $kendo-utils-gap );
+
+}

package/scss/flex-grid/_grid-auto-columns.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-grid-auto-columns: k-map-get( $kendo-utils, "grid-auto-columns" ) !default;
+@mixin kendo-utils--flex-grid--grid-auto-columns() {
 
-@include generate-utils( grid-auto-cols, grid-auto-columns, $kendo-utils-grid-auto-columns );
+    // Grid auto columns utility classes
+    $kendo-utils-grid-auto-columns: k-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

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-grid-auto-flow: k-map-get( $kendo-utils, "grid-auto-flow" ) !default;
+@mixin kendo-utils--flex-grid--grid-auto-flow() {
 
-@include generate-utils( grid-flow, grid-auto-flow, $kendo-utils-grid-auto-flow );
+    // Grid auto flow utility classes
+    $kendo-utils-grid-auto-flow: k-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

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-grid-auto-rows: k-map-get( $kendo-utils, "grid-auto-rows" ) !default;
+@mixin kendo-utils--flex-grid--grid-auto-rows() {
 
-@include generate-utils( grid-auto-rows, grid-auto-rows, $kendo-utils-grid-auto-rows );
+    // Grid auto rows utility classes
+    $kendo-utils-grid-auto-rows: k-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

@@ -1,21 +1,25 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
+@mixin kendo-utils--flex-grid--grid-column-start-end() {
 
-@include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
+    // Grid column start utility classes
+    $kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
+    @include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
 
 
-$kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
+    // Grid column end utility classes
+    $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
+    @include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
 
-@include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
 
+    // Grid column span utility classes
+    $kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
+    @include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
 
-$kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
 
-@include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
+    // Legacy aliases
+    @include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span );
+    .#{$kendo-prefix}colspan-all { @extend .#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format
+    .\!#{$kendo-prefix}colspan-all { @extend .\!#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format
 
-
-// Legacy aliases
-@include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span );
-.#{$kendo-prefix}colspan-all { @extend .#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format
-.\!#{$kendo-prefix}colspan-all { @extend .\!#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format
+}