fix: organize utils to generate classes upon explicit mixin invocation

packages/utils/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;
+        }
     }
+
 }

packages/utils/scss/accessibility/index.import.scss

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

packages/utils/scss/all.scss

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

packages/utils/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 );
+
+}

packages/utils/scss/background/index.import.scss

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

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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();
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}

packages/utils/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; }
+
+}

packages/utils/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 );
+
+}

packages/utils/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 );
+
+}