@progress/kendo-theme-utils 5.12.1-dev.0 → 5.12.1-dev.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-utils",
   "description": "Utility first library alongside Kendo UI",
-  "version": "5.12.1-dev.0",
+  "version": "5.12.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -32,13 +32,16 @@
   "scripts": {
     "build": "sass-build",
     "sass": "sass-build",
+    "docs": "node ../../scripts/sassdoc.js",
+    "predocs": "npm run resolve-variables",
+    "resolve-variables": "node ../../scripts/resolve-variables.js",
     "nuget-pack": "jq '.version' package.json | xargs nuget pack package.nuspec -Version",
     "nuget-push": "nuget push *.nupkg -ApiKey $NUGET_API_KEY -Source $NUGET_FEED -SkipDuplicate",
     "prepublishOnly": "node ../../scripts/themes-prepublish.js",
     "postpublish": "echo 'no postpublish for utils'"
   },
   "dependencies": {
-    "@progress/kendo-theme-core": "^5.12.1-dev.0"
+    "@progress/kendo-theme-core": "^5.12.1-dev.2"
   },
-  "gitHead": "342125ccbda2aec05866a2bb2c5e6e0c6f64b2e3"
+  "gitHead": "14365a5e53996a453f9d6ad72894a3e4666e6ede"
 }

package/scss/_functions.scss

@@ -1,37 +1 @@
-// Replace `$search` with `$replace` in `$string`
-// Used on our SVG icon backgrounds for custom forms.
-//
-// @author Hugo Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
-    @if type-of( $string ) == number {
-        $string: $string + "";
-    }
-
-    $index: str-index($string, $search);
-
-    @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-    }
-
-    @return $string;
-}
-
-
-$_kendo-escape-class-name: (
-    ".": "\\.",
-    "/": "\\/"
-);
-
-@function escape-class-name( $text ) {
-    $_text: $text;
-
-    @each $char, $rep in $_kendo-escape-class-name {
-        $_text: str-replace( $_text, unquote( $char ), unquote( $rep ) );
-    }
-
-    @return $_text;
-}
+@import "@progress/kendo-theme-core/scss/functions/index.import.scss";

package/scss/_mixins.scss

@@ -1,25 +1,25 @@
 @mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important ) {
     @if $values {
-        $_props: if( type-of($props) == list, $props, ( $props ) );
-        $_fn: if( function-exists( $function ), get-function( $function ), null );
+        $_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
+        $_fn: if( k-meta-function-exists( $function ), k-meta-get-function( $function ), null );
 
         @each $key, $val in $values {
-            $_key: escape-class-name( $key );
-            $_val: if( type-of($values) == list, $key, $val );
-            $_name: escape-class-name( $name );
+            $_key: k-escape-class-name( $key );
+            $_val: if( k-meta-type-of($values) == list, $key, $val );
+            $_name: k-escape-class-name( $name );
             $_selector: if( $_key == DEFAULT, #{$kendo-prefix}#{$_name}, #{$kendo-prefix}#{$_name}-#{$_key});
 
             @if $important != only {
                 .#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}: if( $_fn, call($_fn, $_val), $_val );
+                        #{$prop}: if( $_fn, k-meta-call($_fn, $_val), $_val );
                     }
                 }
             }
             @if $important {
                 .\!#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}:  if( $_fn, call($_fn, $_val), $_val ) !important; // sass-lint:disable-line no-important
+                        #{$prop}:  if( $_fn, k-meta-call($_fn, $_val), $_val ) !important; // sass-lint:disable-line no-important
                     }
                 }
             }

package/scss/_variables.scss

@@ -1,33 +1,49 @@
 $kendo-prefix: k- !default;
 $kendo-important: true !default;
-$kendo-colors: () !default;
+
+$kendo-theme-colors: () !default;
+
+$kendo-font-sizes: () !default;
+
 $kendo-spacing: (
+    // sass-lint:disable-block leading-zero
     0: 0,
-    0.5: .125rem, // sass-lint:disable-line leading-zero
+    1px: 1px,
+    0.5: .125rem,
     1: .25rem,
     1.5: .375rem,
     2: .5rem,
-    2.5: 6.25rem,
+    2.5: .625rem,
     3: .75rem,
     3.5: .875rem,
     4: 1rem,
+    4.5: 1.125rem,
     5: 1.25rem,
+    5.5: 1.375rem,
     6: 1.5rem,
+    6.5: 1.625rem,
     7: 1.75rem,
+    7.5: 1.875rem,
     8: 2rem,
     9: 2.25rem,
     10: 2.5rem,
     11: 2.75rem,
     12: 3rem,
+    13: 3.25rem,
     14: 3.5rem,
+    15: 3.75rem,
     16: 4rem,
+    17: 4.25rem,
+    18: 4.5rem,
+    19: 4.75rem,
     20: 5rem,
-    24: 6rem,
-    px: 1px,
-    thin: .125rem,
-    hair: .0625rem
+    21: 5.25rem,
+    22: 5.5rem,
+    23: 5.75rem,
+    24: 6rem
 ) !default;
-$kendo-sizing: map-merge( $kendo-spacing, (
+
+$kendo-sizing: k-map-merge( $kendo-spacing, (
     // sass-lint:disable-block indentation
     "auto": auto,
     "1/2": 50%,
@@ -62,6 +78,15 @@ $kendo-sizing: map-merge( $kendo-spacing, (
     "fit": fit-content
 )) !default;
 
+$kendo-border-radii: (
+    DEFAULT: .25rem,
+    0: 0,
+    sm: .125rem,
+    md: .25rem,
+    lg: .5rem,
+    full: 9999px
+) !default;
+
 //
 
 $kendo-utils: (
@@ -72,8 +97,9 @@ $kendo-utils: (
     // Layout
     "aspect-ratio": (
         auto: auto,
-        square: unquote("1 / 1"),
-        video: unquote("16 / 9")
+        1: 1,
+        square: k-string-unquote("1 / 1"),
+        video: k-string-unquote("16 / 9")
     ),
     "container": (),
     "columns": (),
@@ -272,7 +298,7 @@ $kendo-utils: (
         10: span 10 / span 10,
         11: span 11 / span 11,
         12: span 12 / span 12,
-        full: unquote("1 / -1"),
+        full: k-string-unquote("1 / -1"),
         auto: auto
     ),
     "grid-row-start": (
@@ -327,7 +353,8 @@ $kendo-utils: (
         row: row,
         col: column,
         row-dense: row dense,
-        col-dense: column dense
+        col-dense: column dense,
+        unset: unset
     ),
     "grid-auto-columns": (
         auto: auto,
@@ -424,7 +451,7 @@ $kendo-utils: (
     "space-between": (),
 
     // Sizing
-    "width": map-merge( $kendo-sizing, (
+    "width": k-map-merge( $kendo-sizing, (
         // sass-lint:disable-block indentation
         screen: 100vw
     )),
@@ -445,7 +472,7 @@ $kendo-utils: (
         max: max-content,
         fit: fit-content
     ),
-    "height": map-merge( $kendo-sizing, (
+    "height": k-map-merge( $kendo-sizing, (
         // sass-lint:disable-block indentation
         screen: 100vh
     )),
@@ -497,7 +524,14 @@ $kendo-utils: (
         center,
         justify
     ),
-    "text-color": (),
+    "text-color": k-map-merge( $kendo-theme-colors, (
+        // sass-lint:disable-block indentation
+        "inherit": inherit,
+        "current": currentColor,
+        "transparent": transparent,
+        "black": black,
+        "white": white
+    )),
     "text-decoration": (),
     "text-decoration-width": (),
     "text-decoration-style": (),
@@ -523,6 +557,13 @@ $kendo-utils: (
     "word-break": (),
 
     // Background
+    "background-color": k-map-merge( $kendo-theme-colors, (
+        // sass-lint:disable-block indentation
+        "inherit": inherit,
+        "transparent": transparent,
+        "black": black,
+        "white": white
+    )),
 
     // Border
     "border-width": (
@@ -540,16 +581,15 @@ $kendo-utils: (
         hidden,
         none
     ),
-    "border-color": (),
-    "border-radius": (
-        DEFAULT: .25rem,
-        0: 0,
-        sm: .125rem,
-        md: .25rem,
-        lg: .5rem,
-        none: 0,
-        full: 9999px
-    ),
+    "border-color": k-map-merge( $kendo-theme-colors, (
+        // sass-lint:disable-block indentation
+        "inherit": inherit,
+        "current": currentColor,
+        "transparent": transparent,
+        "black": black,
+        "white": white
+    )),
+    "border-radius": $kendo-border-radii,
     "outline-width": (
         DEFAULT: 1px,
         0: 0,
@@ -596,13 +636,15 @@ $kendo-utils: (
     // Transform
     "flip": true,
     "scale": (
-        "0",
-        ".25",
-        ".5",
-        ".75",
-        "1",
-        "1.25",
-        "1.5"
+        // sass-lint:disable-block leading-zero
+        0: 0,
+        0.25: .25,
+        0.5: .5,
+        0.75: .75,
+        1: 1,
+        1.25: 1.25,
+        1.5: 1.5,
+        2: 2
     ),
     "rotate": (
         0: 0deg,
@@ -614,7 +656,7 @@ $kendo-utils: (
         270: 270deg,
         315: 315deg
     ),
-    "translate": map-remove( $kendo-sizing, "auto", "min", "max", "fit" ),
+    "translate": k-map-remove( $kendo-sizing, "auto", "min", "max", "fit" ),
     "skew": (
         0: 0deg,
         1: 1deg,

package/scss/accessibility/_screen-readers.scss

@@ -1,8 +1,8 @@
-$kendo-utils-accessibility: map-get( $kendo-utils, "accessibility" ) !default;
+$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
-    /// @description This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
     /// @group accessibility
     .#{$kendo-prefix}sr-only {
         margin: -1px;

package/scss/background/_background-color.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$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

@@ -0,0 +1 @@
+@import "./_background-color.scss";

package/scss/border/_border-color.scss

@@ -1,6 +1,6 @@
 // TODO DOCS
 
-$kendo-utils-border-color: map-get( $kendo-utils, "border-color" ) !default;
+$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 );

package/scss/border/_border-radius.scss

@@ -1,6 +1,6 @@
 // TODO DOCS
 
-$kendo-utils-border-radius: map-get( $kendo-utils, "border-radius" ) !default;
+$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 );

package/scss/border/_border-style.scss

@@ -1,6 +1,6 @@
 // TODO DOCS
 
-$kendo-utils-border-style: map-get( $kendo-utils, "border-style" ) !default;
+$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 );

package/scss/border/_border-width.scss

@@ -1,6 +1,6 @@
 // TODO DOCS
 
-$kendo-utils-border-width: map-get( $kendo-utils, "border-width" ) !default;
+$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 );
@@ -9,3 +9,10 @@ $kendo-utils-border-width: map-get( $kendo-utils, "border-width" ) !default;
 @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 );

package/scss/border/_outline-color.scss

@@ -1,5 +1,5 @@
 // TODO DOCS
 
-$kendo-utils-outline-color: map-get( $kendo-utils, "outline-color" ) !default;
+$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,5 @@
 // TODO DOCS
 
-$kendo-utils-outline-offset: map-get( $kendo-utils, "outline-offset" ) !default;
+$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,5 @@
 // TODO DOCS
 
-$kendo-utils-outline-style: map-get( $kendo-utils, "outline-style" ) !default;
+$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,5 @@
 // TODO DOCS
 
-$kendo-utils-outline-width: map-get( $kendo-utils, "outline-width" ) !default;
+$kendo-utils-outline-width: k-map-get( $kendo-utils, "outline-width" ) !default;
 
 @include generate-utils( outline, outline-width, $kendo-utils-outline-width );

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

@@ -1,5 +1,5 @@
 // TODO DOCS
 
-$kendo-utils-align-content: map-get( $kendo-utils, "align-content" ) !default;
+$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,5 @@
 // TODO DOCS
 
-$kendo-utils-align-items: map-get( $kendo-utils, "align-items" ) !default;
+$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,5 @@
 // TODO DOCS
 
-$kendo-utils-align-self: map-get( $kendo-utils, "align-self" ) !default;
+$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

@@ -1,14 +1,15 @@
+/// This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
 /// @name .k-flex-basis-auto
-/// @description This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
 /// @group flex-basis
+/// @contextType css
 
-// TODO DOCS
-
+/// This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
 /// @name .k-flex-basis-0
-/// @description This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
 /// @group flex-basis
+/// @contextType css
 
-$kendo-utils-flex-basis: map-get( $kendo-utils, "flex-basis" ) !default;
+// 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

@@ -1,19 +1,29 @@
+/// This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
 /// @name .k-flex-row
-/// @description This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
 /// @group flex-direction
+/// @contextType css
 
+/// This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
 /// @name .k-flex-row-reverse
-/// @description This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
 /// @group flex-direction
+/// @contextType css
 
+/// This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
 /// @name .k-flex-col
-/// @description This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
 /// @group flex-direction
+/// @contextType css
 
+/// This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
 /// @name .k-flex-col-reverse
-/// @description This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
 /// @group flex-direction
+/// @contextType css
 
-$kendo-utils-flex-direction: map-get( $kendo-utils, "flex-direction" ) !default;
+// 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; }

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

@@ -1,12 +1,15 @@
+/// This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
 /// @name .k-flex-grow
-/// @description This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
 /// @group flex-grow
+/// @contextType css
 
+/// This is equivalent to `flex-grow: 0`. The item will not grow.
 /// @name .k-flex-grow-0
-/// @description This is equivalent to `flex-grow: 0`. The item will not grow.
 /// @group flex-grow
+/// @contextType css
 
-$kendo-utils-flex-grow: map-get( $kendo-utils, "flex-grow" ) !default;
+// 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

@@ -1,12 +1,15 @@
+/// This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
 /// @name .k-flex-shrink
-/// @description This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
 /// @group flex-shrink
+/// @contextType css
 
+/// This is equivalent to `flex-shrink: 0`. The item will not shrink.
 /// @name .k-flex-shrink-0
-/// @description This is equivalent to `flex-shrink: 0`. The item will not shrink.
 /// @group flex-shrink
+/// @contextType css
 
-$kendo-utils-flex-shrink: map-get( $kendo-utils, "flex-shrink" ) !default;
+// 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

@@ -1,15 +1,19 @@
+/// This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
 /// @name .k-flex-wrap
-/// @description This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
 /// @group flex-wrap
+/// @contextType css
 
+/// This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line.
 /// @name .k-flex-nowrap
-/// @description This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line.
 /// @group flex-wrap
+/// @contextType css
 
+/// This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top.
 /// @name .k-flex-wrap-reverse
-/// @description This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top.
 /// @group flex-wrap
+/// @contextType css
 
-$kendo-utils-flex-wrap: map-get( $kendo-utils, "flex-wrap" ) !default;
+// 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

@@ -1,19 +1,24 @@
+/// This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space. This is similar to `flex: 1 1 auto` except it is allowed to shrink beyond its initial size.
 /// @name .k-flex-1
-/// @description This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space. This is similar to `flex: 1 1 auto` except it is allowed to shrink beyond its initial size.
 /// @group flex
+/// @contextType css
 
+/// This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`.
 /// @name .k-flex-auto
-/// @description This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`.
 /// @group flex
+/// @contextType css
 
+/// This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis.
 /// @name .k-flex-initial
-/// @description This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis.
 /// @group flex
+/// @contextType css
 
+/// This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible. This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation.
 /// @name .k-flex-none
-/// @description This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible. This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation.
 /// @group flex
+/// @contextType css
 
-$kendo-utils-flex: map-get( $kendo-utils, "flex" ) !default;
+// 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,6 +1,6 @@
 // TODO DOCS
 
-$kendo-utils-gap: map-get( $kendo-utils, "gap" ) !default;
+$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 );

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

@@ -1,5 +1,5 @@
 // TODO DOCS
 
-$kendo-utils-grid-auto-columns: map-get( $kendo-utils, "grid-auto-columns" ) !default;
+$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,5 @@
 // TODO DOCS
 
-$kendo-utils-grid-auto-flow: map-get( $kendo-utils, "grid-auto-flow" ) !default;
+$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,5 @@
 // TODO DOCS
 
-$kendo-utils-grid-auto-rows: map-get( $kendo-utils, "grid-auto-rows" ) !default;
+$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 );