@progress/kendo-theme-utils 5.12.1-dev.1 → 5.12.1-dev.3

package/dist/all.scss

@@ -92,7 +92,7 @@ $equilateral-height: .8660254038 !default;
 //
 //  This lookup table is needed since there is no `pow` in SASS.
 // stylelint-disable-next-line scss/dollar-variable-default
-$linear-channel-values: (
+$_linear-channel-values: (
     0
     .0003035269835488375
     .000607053967097675
@@ -363,9 +363,9 @@ $wcag-light: white !default;
 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function k-color-luminance( $color ) {
-    $red: k-list-nth( $linear-channel-values, k-color-red( $color ) + 1 );
-    $green: k-list-nth( $linear-channel-values, k-color-green( $color ) + 1 );
-    $blue: k-list-nth( $linear-channel-values, k-color-blue( $color ) + 1 );
+    $red: k-list-nth( $_linear-channel-values, k-color-red( $color ) + 1 );
+    $green: k-list-nth( $_linear-channel-values, k-color-green( $color ) + 1 );
+    $blue: k-list-nth( $_linear-channel-values, k-color-blue( $color ) + 1 );
 
     @return .2126 * $red + .7152 * $green + .0722 * $blue;
 }
@@ -468,7 +468,7 @@ $kendo-color-level-step: 8% !default;
 }
 
 @function k-try-shade( $color, $level: 1 ) {
-    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $kendo-is-dark-theme, false );
 
     @if $_dark-theme {
         @return k-color-tint( $color, $level );
@@ -477,7 +477,7 @@ $kendo-color-level-step: 8% !default;
     @return k-color-shade( $color, $level );
 }
 @function k-try-tint( $color, $level: 1 ) {
-    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $kendo-is-dark-theme, false );
 
     @if $_dark-theme {
         @return k-color-shade( $color, $level );
@@ -488,7 +488,7 @@ $kendo-color-level-step: 8% !default;
 
 
 @function k-try-darken( $color, $amount ) {
-    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $kendo-is-dark-theme, false );
 
     @if $_dark-theme {
         @return k-color-lighten( $color, $amount );
@@ -497,7 +497,7 @@ $kendo-color-level-step: 8% !default;
 }
 
 @function k-try-lighten( $color, $amount ) {
-    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $kendo-is-dark-theme, false );
 
     @if $_dark-theme {
         @return k-color-darken( $color, $amount );
@@ -945,7 +945,11 @@ $_kendo-escape-class-name: (
 // #region @import "./_variables.scss"; -> packages/utils/scss/_variables.scss
 $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,
@@ -1019,6 +1023,15 @@ $kendo-sizing: k-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: (
@@ -1285,7 +1298,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,
@@ -1455,7 +1469,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": (),
@@ -1481,6 +1502,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": (
@@ -1498,16 +1526,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,
@@ -1802,6 +1829,10 @@ $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
 
 @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
 
+
+// Legacy aliases
+@include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+
 // #endregion
 // #region @import "./_display.scss"; -> packages/utils/scss/layout/_display.scss
 /// This is equivalent to `display: none;`. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
@@ -1864,8 +1895,13 @@ $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
 
 @include generate-utils( d, display, $kendo-utils-display );
 
+
 // Legacy alias
 @include generate-utils( display, display, $kendo-utils-display );
+.#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
+.\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
+.#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
+.\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
 
 // #endregion
 // #region @import "./_float.scss"; -> packages/utils/scss/layout/_float.scss
@@ -2065,25 +2101,25 @@ $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
 .#{$kendo-prefix}top-start,
 .#{$kendo-prefix}pos-top-start {
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
 }
 
 .#{$kendo-prefix}top-end,
 .#{$kendo-prefix}pos-top-end {
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
 }
 
 .#{$kendo-prefix}bottom-start,
 .#{$kendo-prefix}pos-bottom-start {
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
 }
 
 .#{$kendo-prefix}bottom-end,
 .#{$kendo-prefix}pos-bottom-end {
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
 }
 
 .#{$kendo-prefix}top-center,
@@ -2196,6 +2232,11 @@ $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !defaul
 
 @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; }
+
 // #endregion
 // #region @import "./_flex-wrap.scss"; -> packages/utils/scss/flex-grid/_flex-wrap.scss
 /// This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
@@ -2358,7 +2399,12 @@ $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !defa
 $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
 
 // #endregion
 // #region @import "./_grid-row-start-end.scss"; -> packages/utils/scss/flex-grid/_grid-row-start-end.scss
@@ -2377,7 +2423,12 @@ $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
 $kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
 
 @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
+
+
+// Legacy aliases
 @include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
+.#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
+.\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
 
 // #endregion
 // #region @import "./_grid-auto-flow.scss"; -> packages/utils/scss/flex-grid/_grid-auto-flow.scss
@@ -2573,6 +2624,10 @@ $kendo-utils-font-size: k-map-get( $kendo-utils, "font-size" ) !default;
 
 @include generate-utils( font-size, font-size, $kendo-utils-font-size );
 
+
+// Legacy aliases
+@include generate-utils( fs, font-size, $kendo-utils-font-size );
+
 // #endregion
 // font smoothing
 // #region @import "./_font-style.scss"; -> packages/utils/scss/typography/_font-style.scss
@@ -2590,12 +2645,18 @@ $kendo-utils-font-weight: k-map-get( $kendo-utils, "font-weight" ) !default;
 
 @include generate-utils( font, font-weight, $kendo-utils-font-weight );
 
+
+// Legacy aliases
+@include generate-utils( font-weight, font-weight, $kendo-utils-font-weight );
+
 // #endregion
 // font variant
 // letter spacing
 // line height
 // list style
 // #region @import "./_text-align.scss"; -> packages/utils/scss/typography/_text-align.scss
+// Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
+
 /// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
 /// @name .k-text-left
 /// @group text-align
@@ -2622,10 +2683,21 @@ $kendo-utils-text-align: k-map-get( $kendo-utils, "text-align" ) !default;
 @include generate-utils( text, text-align, $kendo-utils-text-align );
 
 // #endregion
-// text color
+// #region @import "./_text-color.scss"; -> packages/utils/scss/typography/_text-color.scss
+// TODO DOCS
+
+$kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
+
+@include generate-utils( text, color, $kendo-utils-text-color );
+
+
+// Legacy aliases
+@include generate-utils( color, color, $kendo-utils-text-color );
+
+// #endregion
 // text decoration
 // #region @import "./_text-transform.scss"; -> packages/utils/scss/typography/_text-transform.scss
-// TODO DOCS
+// Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.
 
 /// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
 /// @name k-text-lowercase
@@ -2652,6 +2724,8 @@ $kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !defaul
 // text indent
 // vertical align
 // #region @import "./_white-space.scss"; -> packages/utils/scss/typography/_white-space.scss
+// White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
+
 /// This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
 /// @name .k-white-space-normal
 /// @group white-space
@@ -2686,11 +2760,32 @@ $kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !defaul
 $kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default;
 
 @include generate-utils( white-space, white-space, $kendo-utils-white-space );
+@include generate-utils( whitespace, white-space, $kendo-utils-white-space );
+
+
+// Legacy aliases
+.#{$kendo-prefix}text-nowrap { @extend .#{$kendo-prefix}white-space-nowrap !optional; }
+
+// #endregion
+
+
+/// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
+/// @name .k-text-ellipsis
+/// @group text
+.#{$kendo-prefix}text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line
+
+// #endregion
+// #region @import "./background/index.import.scss"; -> packages/utils/scss/background/index.import.scss
+// #region @import "./_background-color.scss"; -> packages/utils/scss/background/_background-color.scss
+// TODO DOCS
+
+$kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
+
+@include generate-utils( bg, background-color, $kendo-utils-background-color );
 
 // #endregion
 
 // #endregion
-// background
 // #region @import "./border/index.import.scss"; -> packages/utils/scss/border/index.import.scss
 // #region @import "./_border-width.scss"; -> packages/utils/scss/border/_border-width.scss
 // TODO DOCS
@@ -2705,6 +2800,13 @@ $kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
 @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 );
+
 // #endregion
 // #region @import "./_border-style.scss"; -> packages/utils/scss/border/_border-style.scss
 // TODO DOCS
@@ -3083,6 +3185,8 @@ $kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
 
 // #endregion
 // #region @import "./_pointer-events.scss"; -> packages/utils/scss/interactivity/_pointer-events.scss
+// Pointer-events documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
+
 /// This is equivalent to `pointer-events: none;`. The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
 /// @name .k-pointer-events-none
 /// @group pointer-events
@@ -3100,6 +3204,8 @@ $kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !defaul
 
 // #endregion
 // #region @import "./_resize.scss"; -> packages/utils/scss/interactivity/_resize.scss
+// Resize documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/resize.
+
 /// This is equivalent to `resize: both;`. The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
 /// @name .k-resize
 /// @group resize

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-utils",
   "description": "Utility first library alongside Kendo UI",
-  "version": "5.12.1-dev.1",
+  "version": "5.12.1-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -41,7 +41,7 @@
     "postpublish": "echo 'no postpublish for utils'"
   },
   "dependencies": {
-    "@progress/kendo-theme-core": "^5.12.1-dev.1"
+    "@progress/kendo-theme-core": "^5.12.1-dev.3"
   },
-  "gitHead": "1810e01c441cc3328d74864b2bfcb82167a3a0c1"
+  "gitHead": "8c82f49a750901799f12f09ca977f65b74ff9577"
 }

package/scss/_variables.scss

@@ -1,6 +1,10 @@
 $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,
@@ -74,6 +78,15 @@ $kendo-sizing: k-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: (
@@ -340,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,
@@ -510,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": (),
@@ -536,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": (
@@ -553,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,

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-width.scss

@@ -9,3 +9,10 @@ $kendo-utils-border-width: k-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/flex-grid/_flex-direction.scss

@@ -22,3 +22,8 @@
 $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/_grid-column-start-end.scss

@@ -13,4 +13,9 @@ $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !defa
 $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

package/scss/flex-grid/_grid-row-start-end.scss

@@ -13,4 +13,9 @@ $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
 $kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
 
 @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
+
+
+// Legacy aliases
 @include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
+.#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
+.\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format

package/scss/index.import.scss

@@ -8,7 +8,7 @@
 @import "./spacing/index.import.scss";
 @import "./sizing/index.import.scss";
 @import "./typography/index.import.scss";
-// background
+@import "./background/index.import.scss";
 @import "./border/index.import.scss";
 // effects
 // filter

package/scss/interactivity/_pointer-events.scss

@@ -1,3 +1,5 @@
+// Pointer-events documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
+
 /// This is equivalent to `pointer-events: none;`. The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
 /// @name .k-pointer-events-none
 /// @group pointer-events

package/scss/interactivity/_resize.scss

@@ -1,3 +1,5 @@
+// Resize documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/resize.
+
 /// This is equivalent to `resize: both;`. The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
 /// @name .k-resize
 /// @group resize

package/scss/layout/_aspect-ratio.scss

@@ -23,3 +23,7 @@
 $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
 
 @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+
+
+// Legacy aliases
+@include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio );

package/scss/layout/_display.scss

@@ -58,5 +58,10 @@ $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
 
 @include generate-utils( d, display, $kendo-utils-display );
 
+
 // Legacy alias
 @include generate-utils( display, display, $kendo-utils-display );
+.#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
+.\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
+.#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
+.\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format

package/scss/layout/_position.scss

@@ -61,25 +61,25 @@ $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
 .#{$kendo-prefix}top-start,
 .#{$kendo-prefix}pos-top-start {
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
 }
 
 .#{$kendo-prefix}top-end,
 .#{$kendo-prefix}pos-top-end {
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
 }
 
 .#{$kendo-prefix}bottom-start,
 .#{$kendo-prefix}pos-bottom-start {
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
 }
 
 .#{$kendo-prefix}bottom-end,
 .#{$kendo-prefix}pos-bottom-end {
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
 }
 
 .#{$kendo-prefix}top-center,

package/scss/typography/_font-size.scss

@@ -3,3 +3,7 @@
 $kendo-utils-font-size: k-map-get( $kendo-utils, "font-size" ) !default;
 
 @include generate-utils( font-size, font-size, $kendo-utils-font-size );
+
+
+// Legacy aliases
+@include generate-utils( fs, font-size, $kendo-utils-font-size );

package/scss/typography/_font-weight.scss

@@ -3,3 +3,7 @@
 $kendo-utils-font-weight: k-map-get( $kendo-utils, "font-weight" ) !default;
 
 @include generate-utils( font, font-weight, $kendo-utils-font-weight );
+
+
+// Legacy aliases
+@include generate-utils( font-weight, font-weight, $kendo-utils-font-weight );

package/scss/typography/_text-align.scss

@@ -1,3 +1,5 @@
+// Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
+
 /// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
 /// @name .k-text-left
 /// @group text-align

package/scss/typography/_text-color.scss

@@ -0,0 +1,9 @@
+// TODO DOCS
+
+$kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
+
+@include generate-utils( text, color, $kendo-utils-text-color );
+
+
+// Legacy aliases
+@include generate-utils( color, color, $kendo-utils-text-color );

package/scss/typography/_text-transform.scss

@@ -1,4 +1,4 @@
-// TODO DOCS
+// Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.
 
 /// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
 /// @name k-text-lowercase