@progress/kendo-theme-core 6.1.1-dev.8 → 6.2.1-dev.0

package/dist/all.scss

@@ -1,82 +1,187 @@
 // This file is auto-generated. Do not edit!
-// baka:source packages/core/scss/all.scss
+// baka:source scss/all.scss
 
-// #region @import "./index.import.scss"; -> packages/core/scss/index.import.scss
-// #region @import "./functions/index.import.scss"; -> packages/core/scss/functions/index.import.scss
-// #region @import "../_variables.scss"; -> packages/core/scss/_variables.scss
+// #region @import "./index.import.scss"; -> scss/index.import.scss
+// #region @import "./functions/index.import.scss"; -> scss/functions/index.import.scss
+// #region @import "../_variables.scss"; -> scss/_variables.scss
 // Equilateral triangle variables
 $equilateral-index: 1.7320508076 !default;
 $equilateral-height: .8660254038 !default;
 
 // #endregion
 
-// #region @import "./_color.import.scss"; -> packages/core/scss/functions/_color.import.scss
+// #region @import "./_color.import.scss"; -> scss/functions/_color.import.scss
+/// Returns the alpha channel of a color.
+/// @param {Color} $color - The color to get the alpha channel for.
+/// @return {Number} - The alpha channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-alpha( rgba( 0, 0, 0, 0.5 ) ); // => 0.5
+///   @debug k-color-alpha( #000 ); // => 1
 @function k-color-alpha( $color ) {
     @return alpha( $color );
 }
 
+/// Returns the red channel of a color.
+/// @param {Color} $color - The color to get the red channel for.
+/// @return {Number} - The red channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-red( #ff0000 ); // => 255
 @function k-color-red( $color ) {
     @return red( $color );
 }
 
+/// Returns the green channel of a color.
+/// @param {Color} $color - The color to get the green channel for.
+/// @return {Number} - The green channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-green( #00ff00 ); // => 255
 @function k-color-green( $color ) {
     @return green( $color );
 }
 
+/// Returns the blue channel of a color.
+/// @param {Color} $color - The color to get the blue channel for.
+/// @return {Number} - The blue channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-blue( #0000ff ); // => 255
 @function k-color-blue( $color ) {
     @return blue( $color );
 }
 
+/// Returns the hue of a color.
+/// @param {Color} $color - The color to get the hue for.
+/// @return {Number} - The hue of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-hue( #e1d7d2 ); // => 20deg
 @function k-color-hue( $color ) {
     @return hue( $color );
 }
 
+/// Returns the saturation of a color.
+/// @param {Color} $color - The color to get the saturation for.
+/// @return {Number} - The saturation of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-saturation( #e1d7d2 ); // => 20%
 @function k-color-saturation( $color ) {
     @return saturation( $color );
 }
 
+/// Returns the lightness of a color.
+/// @param {Color} $color - The color to get the lightness for.
+/// @return {Number} - The lightness of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-lightness( #e1d7d2 ); // => 80%
 @function k-color-lightness( $color ) {
     @return lightness( $color );
 }
 
+/// Returns a color that is a mix of two colors.
+/// @param {Color} $color1 - The first color.
+/// @param {Color} $color2 - The second color.
+/// @param {Number} $weight - The weight of the first color in the mix.
+/// @return {Color} - The mixed color.
+///
+/// @example scss - Usage
+///   @debug k-color-mix( #f00, #00f ); // => #800080
 @function k-color-mix( $color1, $color2, $weight: 50% ) {
     @return mix( $color1, $color2, $weight );
 }
 
+/// Makes a color darker by decreasing its lightness.
+/// @param {Color} $color - The color to darken.
+/// @param {Number} $amount - The amount to darken the color.
+/// @return {Color} - The darkened color.
+///
+/// @example scss - Usage
+///   @debug k-color-darken( #f00, 10% ); // => #e60000
 @function k-color-darken( $color, $amount) {
     @return darken( $color, $amount );
 }
 
+/// Makes a color lighter by increasing its lightness.
+/// @param {Color} $color - The color to lighten.
+/// @param {Number} $amount - The amount to lighten the color.
+/// @return {Color} - The lightened color.
+///
+/// @example scss - Usage
+///   @debug k-color-lighten( #f00, 10% ); // => #ff1a1a
 @function k-color-lighten( $color, $amount) {
     @return lighten( $color, $amount );
 }
 
+/// Increases or decreases the hue of a color.
+/// @param {Color} $color - The color to adjust the hue for.
+/// @param {Number} $degrees - The amount to adjust the hue.
+/// @return {Color} - The adjusted color.
+///
+/// @example scss - Usage
+///   @debug k-color-adjust-hue( #f00, 10deg ); // => #ff1a00
 @function k-color-adjust-hue( $color, $degrees ) {
     @return adjust-hue( $color, $degrees );
 }
 
+/// Increases the saturation of a color.
+/// @param {Color} $color - The color to saturate.
+/// @param {Number} $amount - The amount to saturate the color.
+/// @return {Color} - The saturated color.
+///
+/// @example scss - Usage
+///   @debug k-color-saturate( #f00, 10% ); // => #ff3333
 @function k-color-saturate( $color, $amount ) {
     @return saturate( $color, $amount );
 }
 
+/// Decreases the saturation of a color.
+/// @param {Color} $color - The color to desaturate.
+/// @param {Number} $amount - The amount to desaturate the color.
+/// @return {Color} - The desaturated color.
+///
+/// @example scss - Usage
+///   @debug k-color-desaturate( #f00, 10% ); // => #e60000
 @function k-color-desaturate( $color, $amount ) {
     @return desaturate( $color, $amount );
 }
 
+/// Returns a gray color with the same lightness as the input color.
+/// @param {Color} $color - The color to convert to grayscale.
+/// @return {Color} - The grayscale color.
+///
+/// @example scss - Usage
+///   @debug k-color-grayscale( #f00 ); // => #808080
 @function k-color-grayscale( $color ) {
     @return grayscale( $color );
 }
 
+/// Returns the RGB complement of a color. This identical to adjusting the hue
+/// by 180 degrees.
+/// @param {Color} $color - The color to get the complement for.
+/// @return {Color} - The complement color.
+///
+/// @example scss - Usage
+///   @debug k-color-complement( #f00 ); // => #00ffff
 @function k-color-complement( $color ) {
     @return complement( $color );
 }
 
+/// Returns the inverse of a color.
+/// @param {Color} $color - The color to invert.
+/// @return {Color} - The inverted color.
+///
+/// @example scss - Usage
+///   @debug k-color-invert( #f00 ); // => #00ffff
 @function k-color-invert( $color ) {
     @return invert( $color );
 }
 
 // #endregion
-// #region @import "./_color-contrast.import.scss"; -> packages/core/scss/functions/_color-contrast.import.scss
+// #region @import "./_color-contrast.import.scss"; -> scss/functions/_color-contrast.import.scss
 // Adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657
 // Adapted from https://github.com/twbs/bootstrap/commit/03908ea37a55eaa44c12ce5694dddc1630c980b3
 
@@ -350,17 +455,31 @@ $_linear-channel-values: (
     1
 );
 
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
-// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
+/// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+/// @type Number
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 $wcag-min-contrast-ratio: 7 !default;
+/// Default dark color for WCAG 2.0.
+/// @type Color
+/// @group accessibility
 $wcag-dark: black !default;
+/// Default light color for WCAG 2.0.
+/// @type Color
+/// @group accessibility
 $wcag-light: white !default;
 
-// Calculate the luminance for a color.
-// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// Calculate the relative luminance for a color.
+/// @param {Color} $color - The color to calculate the relative luminance for.
+/// @return {Number} - The relative luminance for the color.
+///
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+/// @link 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 );
@@ -369,9 +488,15 @@ $wcag-light: white !default;
     @return .2126 * $red + .7152 * $green + .0722 * $blue;
 }
 
-// Calculate the luminance for a color.
-// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// Calculates contrast ratio between two colors
+/// @param {Color} $background - The background color
+/// @param {Color} $foreground - The foreground color
+/// @return {Number} - The contrast ratio between the two colors
+///
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function k-color-contrast-ratio( $background, $foreground ) {
     // sass-lint:disable-block variable-name-format
     $backLum: k-color-luminance( $background ) + .05;
@@ -380,15 +505,34 @@ $wcag-light: white !default;
     @return k-math-div( k-math-max( $backLum, $foreLum ), k-math-min( $backLum, $foreLum ) );
 }
 
+/// Checks if a color is dark
+/// @param {Color} $color - The color to check
+/// @return {Boolean} - True if the color is dark, false otherwise
+///
+/// @group accessibility
 @function k-is-dark( $color ) {
     @return if( k-color-luminance( $color ) < .5, true, false );
 }
+
+/// Checks if a color is light
+/// @param {Color} $color - The color to check
+/// @return {Boolean} - True if the color is light, false otherwise
+///
+/// @group accessibility
 @function k-is-light( $color ) {
     @return if( k-color-luminance( $color ) < .5, false, true );
 }
 
 
-// Contrast functions
+/// Calculates the contrast ratio between a background color and a foreground color.
+/// If the contrast ratio is not high enough, it will return the color with the highest contrast ratio.
+/// @param {Color} $background - The background color
+/// @param {Color} $dark - The dark color to use as a fallback
+/// @param {Color} $light - The light color to use as a fallback
+/// @param {Number} $min-ratio - The minimum contrast ratio to reach
+/// @return {Color} - The color with the highest contrast ratio
+///
+/// @group accessibility
 @function k-contrast-color( $background, $dark: $wcag-dark, $light: $wcag-light, $min-ratio: $wcag-min-contrast-ratio ) {
     $foregrounds: $light, $dark, #ffffff, #000000;
     $max-ratio: 0;
@@ -436,13 +580,18 @@ $wcag-light: white !default;
 }
 
 // #endregion
-// #region @import "./_color-manipulation.import.scss"; -> packages/core/scss/functions/_color-manipulation.import.scss
+// #region @import "./_color-manipulation.import.scss"; -> scss/functions/_color-manipulation.import.scss
+$kendo-light-color-level-step: 8% !default;
+$kendo-dark-color-level-step: 16% !default;
+
 /// Set a specific jump point for requesting color jumps
 /// @group color-system
 /// @access private
 $kendo-color-level-step: 8% !default;
 
 @function k-color-level( $color, $level: 0 ) {
+    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
+    $_color-level-step: if( $_dark-theme, $kendo-dark-color-level-step, $kendo-light-color-level-step );
 
     @if ( $level == 0 ) or ( $level == 0% ) {
         @return $color;
@@ -456,16 +605,41 @@ $kendo-color-level-step: 8% !default;
         @return k-color-mix( $base, $color, $level );
     }
 
-    @return k-color-mix( $base, $color, $level * $kendo-color-level-step );
+    @return k-color-mix( $base, $color, k-math-clamp( $level * $_color-level-step, 0%, 100% ) );
 }
 
+/// Makes a color lighter by mixing it with white
+/// @param {Color} $color - The color to lighten
+/// @param {Number} $level - The amount to lighten the color
+/// @return {Color} - The lightened color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-color-tint( #f00, 1 ); // => #ff1a1a
 @function k-color-tint( $color, $level: 1 ) {
     @return k-color-level( $color, -$level );
 }
+
+/// Makes a color darker by mixing it with black
+/// @param {Color} $color - The color to darken
+/// @param {Number} $level - The amount to darken the color
+/// @return {Color} - The darkened color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-color-shade( #f00, 1 ); // => #e60000
 @function k-color-shade( $color, $level: 1 ) {
     @return k-color-level( $color, $level );
 }
 
+/// Shades the color in light themes and tints it in dark themes
+/// @param {Color} $color - The color to shade or tint
+/// @param {Number} $level - The amount to shade or tint the color
+/// @return {Color} - The shaded or tinted color
+///
+/// @group color-system
 @function k-try-shade( $color, $level: 1 ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -475,6 +649,13 @@ $kendo-color-level-step: 8% !default;
 
     @return k-color-shade( $color, $level );
 }
+
+/// Tints the color in light themes and shades it in dark themes
+/// @param {Color} $color - The color to tint or shade
+/// @param {Number} $level - The amount to tint or shade the color
+/// @return {Color} - The tinted or shaded color
+///
+/// @group color-system
 @function k-try-tint( $color, $level: 1 ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -485,7 +666,12 @@ $kendo-color-level-step: 8% !default;
     @return k-color-tint( $color, $level );
 }
 
-
+/// Darkens the color in light themes and lightens it in dark themes
+/// @param {Color} $color - The color to darken or lighten
+/// @param {Number} $level - The amount to darken or lighten the color
+/// @return {Color} - The darkened or lightened color
+///
+/// @group color-system
 @function k-try-darken( $color, $amount ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -495,6 +681,12 @@ $kendo-color-level-step: 8% !default;
     @return k-color-darken( $color, $amount );
 }
 
+/// Lightens the color in light themes and darkens it in dark themes
+/// @param {Color} $color - The color to lighten or darken
+/// @param {Number} $level - The amount to lighten or darken the color
+/// @return {Color} - The lightened or darkened color
+///
+/// @group color-system
 @function k-try-lighten( $color, $amount ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -504,6 +696,15 @@ $kendo-color-level-step: 8% !default;
     @return k-color-lighten( $color, $amount );
 }
 
+/// Converts a color with alpha to solid color mixed with a background color
+/// @param {Color} $color - The color to convert
+/// @param {Color} $bg - The background color
+/// @return {Color} - The converted color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
 @function k-rgba-to-mix( $color, $bg ) {
     $percent: k-color-alpha( $color ) * 100%;
 
@@ -516,7 +717,7 @@ $kendo-color-level-step: 8% !default;
 }
 
 // #endregion
-// #region @import "./_custom-properties.import.scss"; -> packages/core/scss/functions/_custom-properties.import.scss
+// #region @import "./_custom-properties.import.scss"; -> scss/functions/_custom-properties.import.scss
 @function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
     $_prefix: $prefix;
     $_var: $var;
@@ -556,7 +757,7 @@ $kendo-color-level-step: 8% !default;
 }
 
 // #endregion
-// #region @import "./_escape-string.import.scss"; -> packages/core/scss/functions/_escape-string.import.scss
+// #region @import "./_escape-string.import.scss"; -> scss/functions/_escape-string.import.scss
 $_kendo-svg-escaped-characters: (
     ("%", "%25"),
     ("<", "%3c"),
@@ -566,7 +767,11 @@ $_kendo-svg-escaped-characters: (
     (")", "%29")
 ) !default;
 
-// See https://codepen.io/kevinweber/pen/dXWoRw
+/// Escapes SVG characters in a string
+/// @param {String} $string - The string to escape
+/// @return {String} - The escaped string
+///
+/// @link https://codepen.io/kevinweber/pen/dXWoRw
 @function k-escape-svg($string) {
     @if k-string-index($string, "data:image/svg+xml") {
         @each $char, $encoded in $_kendo-svg-escaped-characters {
@@ -589,6 +794,9 @@ $_kendo-escape-class-name: (
     "/": "\\/"
 );
 
+/// Escapes special characters in a class name
+/// @param {String} $text - The string to escape
+/// @return {String} - The escaped string
 @function k-escape-class-name( $text ) {
     $_text: $text;
 
@@ -600,41 +808,111 @@ $_kendo-escape-class-name: (
 }
 
 // #endregion
-// #region @import "./_lang.import.scss"; -> packages/core/scss/functions/_lang.import.scss
+// #region @import "./_lang.import.scss"; -> scss/functions/_lang.import.scss
+/// Returns the value of a variable if it is not null,
+/// otherwise returns the fallback value.
+/// @param {Any} $var - The variable to check.
+/// @param {Any} $fallback - The fallback value.
+/// @return {Any} - The value of the variable or the fallback value.
+///
+/// @example scss - Usage
+///   $foo: null;
+///   @debug k-if-var( $foo, "bar" ); // => "bar"
+///   $foo: "baz";
+///   @debug k-if-var( $foo, "bar" ); // => "baz"
 @function k-if-var( $var, $fallback ) {
     @return if( $var != null, $var, $fallback );
 }
 
 // #endregion
-// #region @import "./_list.import.scss"; -> packages/core/scss/functions/_list.import.scss
+// #region @import "./_list.import.scss"; -> scss/functions/_list.import.scss
+/// Returns a copy of `$list` with `$val` appended to the end.
+/// @param {List} $list - The list to process.
+/// @param {Any} $val - The value to append to `$list`.
+/// @param {String} $separator - The separator to use between `$list` and `$val`.
+/// @return {List} - A copy of `$list` with `$val` appended to the end.
+///
+/// @example scss - Usage
+///   @debug k-list-append( ( "foo", "bar" ), "baz" ); // => "foo, bar, baz"
 @function k-list-append( $list, $val, $separator: auto ) {
     @return append( $list, $val, $separator );
 }
 
+/// Checks whether `$list` contains `$value`.
+/// @param {List} $list - The list to check.
+/// @param {Any} $value - The value to check for.
+/// @return {Boolean} - Whether `$list` contains `$value`.
+///
+/// @example scss - Usage
+///   @debug k-list-includes( ( "foo", "bar" ), "foo" ); // => true
+///   @debug k-list-includes( ( "foo", "bar" ), "baz" ); // => false
 @function k-list-includes( $list, $value ) {
     @return k-list-index( $list, $value ) != null;
 }
 
+/// Returns the index of `$value` in `$list`.
+/// @param {List} $list - The list to check.
+/// @param {Any} $value - The value to check for.
+/// @return {Number} - The index of `$value` in `$list`.
+///
+/// @example scss - Usage
+///   @debug k-list-index( ( "foo", "bar" ), "foo" ); // => 1
 @function k-list-index( $list, $value ) {
     @return index( $list, $value );
 }
 
+/// Returns whether `$list` is bracketed.
+/// @param {List} $list - The list to check.
+/// @return {Boolean} - Whether `$list` is bracketed.
+///
+/// @example scss - Usage
+///   @debug k-list-is-bracketed( ( "foo", "bar" ) ); // => false
+///   @debug k-list-is-bracketed( [ "foo", "bar" ] ); // => true
 @function k-list-is-bracketed( $list ) {
     @return is-bracketed( $list );
 }
 
+/// Joins two lists together.
+/// @param {List} $list1 - The first list to join.
+/// @param {List} $list2 - The second list to join.
+/// @param {String} $separator - The separator to use between `$list1` and `$list2`.
+/// @param {Boolean} $bracketed - Whether the result should be bracketed.
+/// @return {List} - The joined list.
+///
+/// @example scss - Usage
+///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ) ); // => "foo, bar, baz, qux"
+///   @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ), " " ); // => "foo bar baz qux"
 @function k-list-join( $list1, $list2, $separator: auto, $bracketed: auto ) {
     @return join( $list1, $list2, $separator, $bracketed );
 }
 
+/// Returns the length of `$list`.
+/// @param {List} $list - The list to check.
+/// @return {Number} - The length of `$list`.
+///
+/// @example scss - Usage
+///   @debug k-list-length( ( "foo", "bar" ) ); // => 2
 @function k-list-length( $list ) {
     @return length( $list );
 }
 
+/// Returns the nth item in `$list`.
+/// @param {List} $list - The list to check.
+/// @param {Number} $n - The index of the item to return.
+/// @return {Any} - The nth item in `$list`.
+///
+/// @example scss - Usage
+///   @debug k-list-nth( ( "foo", "bar" ), 1 ); // => "foo"
 @function k-list-nth( $list, $n ) {
     @return nth( $list, $n );
 }
 
+/// Reverse the order of items in `$list`.
+/// @param {List} $list - The list to reverse.
+/// @return {List} - The reversed list.
+///
+/// @example scss - Usage
+///   @debug k-list-reverse( ( "foo", "bar" ) ); // => "bar, foo"
 @function k-list-reverse( $list: null ) {
     $result: ();
 
@@ -653,64 +931,185 @@ $_kendo-escape-class-name: (
     @return $result;
 }
 
+/// Returns the separator of `$list`.
+/// @param {List} $list - The list to check.
+/// @return {String} - The separator of `$list`.
+///
+/// @example scss - Usage
+///   @debug k-list-separator( ( "foo", "bar" ) ); // => ","
 @function k-list-separator( $list ) {
     @return list-separator( $list );
 }
 
+/// Returns a copy of `$list` with `$val` inserted at `$n`.
+/// @param {List} $list - The list to process.
+/// @param {Number} $n - The index at which to insert `$val`.
+/// @param {Any} $val - The value to insert.
+/// @return {List} - A copy of `$list` with `$val` inserted at `$n`.
+///
+/// @example scss - Usage
+///   @debug k-list-set-nth( ( "foo", "bar" ), 1, "baz" ); // => "baz, bar"
 @function k-list-set-nth( $list, $n, $value ) {
     @return set-nth( $list, $n, $value );
 }
 
+/// Combines two lists into a single list of two-item lists.
+/// @param {List} $list1 - The first list to combine.
+/// @param {List} $list2 - The second list to combine.
+/// @return {List} - A list of two-item lists.
+///
+/// @example scss - Usage
+///   @debug k-list-zip( ( "foo", "bar" ), ( "baz", "qux" ) ); // => ((foo, baz), (bar, qux))
 @function k-list-zip( $lists... ) {
     @return zip( $lists... );
 }
 
 // #endregion
-// #region @import "./_math.import.scss"; -> packages/core/scss/functions/_math.import.scss
+// #region @import "./_math.import.scss"; -> scss/functions/_math.import.scss
+/// Returns the absolute value of a number.
+/// @param {Number} $number - The number to get the absolute value of.
+/// @return {Number} - The absolute value of `$number`.
+///
+/// @example scss - Usage
+///   @debug k-math-abs( -10 ); // => 10
 @function k-math-abs( $number ) {
     @return abs( $number );
 }
 
+/// Returns the smallest integer greater than or equal to a number.
+/// @param {Number} $number - The number to get the ceiling of.
+/// @return {Number} - The ceiling of `$number`.
+///
+/// @example scss - Usage
+///   @debug k-math-ceil( 10.1 ); // => 11
 @function k-math-ceil( $number ) {
     @return ceil( $number );
 }
 
-@function k-math-clamp( $value, $min, $max ) {
-    @return k-math-max( $min, k-math-min( $max, $value ) );
-}
-
+/// Returns the largest integer less than or equal to a number.
+/// @param {Number} $number - The number to get the floor of.
+/// @return {Number} - The floor of `$number`.
+///
+/// @example scss - Usage
+///   @debug k-math-floor( 10.9 ); // => 10
+@function k-math-floor( $number ) {
+    @return floor( $number );
+}
+
+/// Restricts `$number` to the range between `$min` and `$max`. If `$number` is
+/// less than `$min`, `$min` is returned. If `$number` is greater than `$max`,
+/// `$max` is returned. Otherwise, `$number` is returned.
+/// @param {Number} $number - The number to clamp.
+/// @param {Number} $min - The minimum value.
+/// @param {Number} $max - The maximum value.
+/// @return {Number} - The clamped number.
+///
+/// @example scss - Usage
+///   @debug k-math-clamp( 10, 0, 5 ); // => 5
+@function k-math-clamp( $number, $min, $max ) {
+    @return k-math-max( $min, k-math-min( $max, $number ) );
+}
+
+/// Returns whether two numbers have compatible units.
+/// @param {Number} $a - The first number.
+/// @param {Number} $b - The second number.
+/// @return {Boolean} - Whether the numbers have compatible units.
+///
+/// @example scss - Usage
+///   @debug k-math-compatible( 10px, 10px ); // => true
+///   @debug k-math-compatible( 10px, 10em ); // => false
 @function k-math-compatible( $a, $b ) {
     @return comparable( $a, $b );
 }
 
+/// Returns the quotient of two numbers.
+/// @param {Number} $a - The dividend.
+/// @param {Number} $b - The divisor.
+/// @return {Number} - The quotient of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-div( 10, 2 ); // => 5
+///   @debug k-math-div( 10px, 2 ); // => 5px
 @function k-math-div( $a, $b )  {
     @return ( $a / $b );
 }
 
+/// Returns whether `$number` has no units.
+/// @param {Number} $number - The number to check.
+/// @return {Boolean} - Whether `$number` has no units.
+///
+/// @example scss - Usage
+///   @debug k-math-is-unitless( 10 ); // => true
+///   @debug k-math-is-unitless( 10px ); // => false
 @function k-math-is-unitless( $number ) {
     @return unitless( $number );
 }
 
+/// Returns the larger of two numbers.
+/// @param {Number} $a - The first number.
+/// @param {Number} $b - The second number.
+/// @return {Number} - The larger of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-max( 10, 20 ); // => 20
+///   @debug k-math-max( 10px, 20px ); // => 20px
 @function k-math-max( $a, $b ) {
     @return max( $a, $b );
 }
 
+/// Returns the smaller of two numbers.
+/// @param {Number} $a - The first number.
+/// @param {Number} $b - The second number.
+/// @return {Number} - The smaller of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-min( 10, 20 ); // => 10
+///   @debug k-math-min( 10px, 20px ); // => 10px
 @function k-math-min( $a, $b ) {
     @return min( $a, $b );
 }
 
+/// Returns the remainder of two numbers.
+/// @param {Number} $a - The dividend.
+/// @param {Number} $b - The divisor.
+/// @return {Number} - The remainder of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-mod( 10, 3 ); // => 1
+///   @debug k-math-mod( 10px, 3 ); // => 1px
 @function k-math-mod( $a, $b ) {
     @return ( $a % $b );
 }
 
+/// Returns the product of two numbers.
+/// @param {Number} $a - The first number.
+/// @param {Number} $b - The second number.
+/// @return {Number} - The product of `$a` and `$b`.
+///
+/// @example scss - Usage
+///   @debug k-math-mul( 10, 2 ); // => 20
+///   @debug k-math-mul( 10px, 2 ); // => 20px
 @function k-math-mul( $a, $b ) {
     @return ( $a * $b );
 }
 
+/// Converts a unitless number to a percentage.
+/// @param {Number} $number - The number to convert.
+/// @return {Number} - The percentage.
+///
+/// @example scss - Usage
+///   @debug k-math-percentage( 0.5 ); // => 50%
 @function k-math-percentage( $number ) {
-    @return ( $number * 100% );
+    @return percentage( $number );
 }
 
+/// Returns the result of raising `$x` to the power of `$n`.
+/// @param {Number} $x - The base.
+/// @param {Number} $n - The exponent.
+/// @return {Number} - The result of raising `$x` to the power of `$n`.
+///
+/// @example scss - Usage
+///   @debug k-math-pow( 2, 3 ); // => 8
 @function k-math-pow( $x, $n ) {
     $ret: 1;
 
@@ -732,10 +1131,12 @@ $_kendo-escape-class-name: (
 
 }
 
-@function k-math-percentage( $number ) {
-    @return percentage( $number );
-}
-
+/// Returns a random number between 0 and 1.
+/// @param {Number} $limit - The upper limit of the random number.
+/// @return {Number} - A random number between 0 and 1.
+///
+/// @example scss - Usage
+///   @debug k-math-random(); // => 0.123456789
 @function k-math-random( $limit: null ) {
     @if ( $limit == null ) {
         @return random();
@@ -744,6 +1145,14 @@ $_kendo-escape-class-name: (
     @return random( $limit );
 }
 
+/// Returns the result of rounding `$number` to the nearest integer
+/// using the specified `$precision`.
+/// @param {Number} $number - The number to round.
+/// @param {Number} $precision - The number of decimal places to round to.
+/// @return {Number} - The rounded number.
+///
+/// @example scss - Usage
+///   @debug k-math-round( 10.123456789, 3 ); // => 10.123
 @function k-math-round( $number, $precision: 0 ) {
 
     @if ( $precision == 0 ) {
@@ -755,10 +1164,22 @@ $_kendo-escape-class-name: (
     @return k-math-div( round( $number * $pow ), $pow );
 }
 
+/// Returns a string representation of `$number`'s unit.
+/// @param {Number} $number - The number to get the unit of.
+/// @return {String} - The unit of `$number`.
+///
+/// @example scss - Usage
+///   @debug k-math-unit( 10px ); // => px
 @function k-math-unit( $number ) {
     @return unit( $number );
 }
 
+/// Remove the unit from a number.
+/// @param {Number} $number - The number to remove the unit from.
+/// @return {Number} - The unitless number.
+///
+/// @example scss - Usage
+///   @debug k-math-strip-unit( 10px ); // => 10
 @function k-math-strip-unit($number) {
     @if ( k-meta-type-of( $number ) == "number" ) and not k-math-is-unitless( $number ) {
         @return k-math-div( $number, 1 * k-math-unit( $number) );
@@ -768,7 +1189,13 @@ $_kendo-escape-class-name: (
 }
 
 // #endregion
-// #region @import "./_map.import.scss"; -> packages/core/scss/functions/_map.import.scss
+// #region @import "./_map.import.scss"; -> scss/functions/_map.import.scss
+/// Returns the value at `$key` in `$map`.
+/// @param {Map} $map - The map to get the value from.
+/// @param {Any} $key - The key to get the value for.
+///
+/// @example scss - Usage
+///   @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
 @function k-map-get( $map, $keys... ) {
     @each $key in $keys {
         $map: map-get( $map, $key );
@@ -776,14 +1203,35 @@ $_kendo-escape-class-name: (
     @return $map;
 }
 
+/// Returns whether `$map` has a value at `$key`.
+/// @param {Map} $map - The map to check.
+/// @param {Any} $key - The key to check.
+/// @return {Boolean} - Whether `$map` has a value at `$key`.
+///
+/// @example scss - Usage
+///   @debug k-map-has( ( "foo": "bar" ), "foo" ); // => true
+///   @debug k-map-has( ( "foo": "bar" ), "bar" ); // => false
 @function k-map-has-key( $map, $key ) {
     @return map-has-key( $map, $key );
 }
 
+/// Returns a comma separated list of the keys in `$map`.
+/// @param {Map} $map - The map to get the keys from.
+/// @return {List} - A comma separated list of the keys in `$map`.
+///
+/// @example scss - Usage
+///   @debug k-map-keys( ( "foo": "bar", "baz": "qux" ) ); // => "foo, baz"
 @function k-map-keys( $map ) {
     @return map-keys( $map );
 }
 
+/// Returns a map with the keys and values from `$map` and `$args`.
+/// @param {Map} $map - The map to merge.
+/// @param {Map} $args - The map to merge into `$map`.
+/// @return {Map} - A map with the keys and values from `$map` and `$args`.
+///
+/// @example scss - Usage
+///   @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
 @function k-map-merge( $map, $args... ) {
     @each $arg in $args {
         $map: map-merge( $map, $arg );
@@ -791,117 +1239,337 @@ $_kendo-escape-class-name: (
     @return $map;
 }
 
+/// Returns a map with the keys and values from `$map` except for `$keys`.
+/// @param {Map} $map - The map to remove keys from.
+/// @param {Any} $keys - The keys to remove from `$map`.
+/// @return {Map} - A map with the keys and values from `$map` except for `$keys`.
+///
+/// @example scss - Usage
+///   @debug k-map-remove( ( "foo": "bar", "baz": "qux" ), "foo" ); // => ( "baz": "qux" )
 @function k-map-remove( $map, $keys... ) {
     @return map-remove( $map, $keys... );
 }
 
+/// Sets a single key and value in `$map`.
+/// @param {Map} $map - The map to set the value in.
+/// @param {Any} $key - The key to set the value for.
+/// @param {Any} $value - The value to set.
+/// @return {Map} - A map with the key and value set.
+///
+/// @example scss - Usage
+///   @debug k-map-set( ( "foo": "bar" ), "baz", "qux" ); // => ( "foo": "bar", "baz": "qux" )
 @function k-map-set( $map, $key, $value ) {
     @return k-map-merge( $map, ( $key: $value ) );
 }
 
+/// Returns a comma separated list of the values in `$map`.
+/// @param {Map} $map - The map to get the values from.
+/// @return {List} - A comma separated list of the values in `$map`.
+///
+/// @example scss - Usage
+///   @debug k-map-values( ( "foo": "bar", "baz": "qux" ) ); // => "bar, qux"
 @function k-map-values( $map ) {
     @return map-values( $map );
 }
 
 // #endregion
-// #region @import "./_meta.import.scss"; -> packages/core/scss/functions/_meta.import.scss
+// #region @import "./_meta.import.scss"; -> scss/functions/_meta.import.scss
 // Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
 
+/// A wrapper around the `call()` function.
+/// Calls the function `$function` with the arguments `$args`.
+/// @param {Function} $function - The function to call.
+/// @param {List} $args - The arguments to pass to `$function`.
+/// @return {Any} - The result of calling `$function` with `$args`.
+///
+/// @example scss - Usage
+///   @debug k-meta-call( k-meta-get-function( "k-string-replace" ), "foo bar", "bar", "baz" ); // => "foo baz"
 @function k-meta-call( $function, $args... ) {
     @return call( $function, $args... );
 }
 
+/// A wrapper around the `function-exists()` function.
+/// Returns whether a function with the name `$name` exists.
+/// @param {String} $name - The name of the function to check.
+/// @return {Boolean} - Whether a function with the name `$name` exists.
+///
+/// @example scss - Usage
+///   @debug k-meta-function-exists( "k-string-replace" ); // => true
 @function k-meta-function-exists( $name ) {
     @return function-exists( $name );
 }
 
+/// A wrapper around the `get-function()` function.
+/// Returns the function with the name `$name`.
+/// @param {String} $name - The name of the function to get.
+/// @param {Boolean} $css - Whether to return the CSS representation of the function.
+/// @param {Module} $module - The module to get the function from.
+/// @return {Function} - The function with the name `$name`.
+///
+/// @example scss - Usage
+///   @debug k-meta-get-function( "k-string-replace" ); // => Function
 @function k-meta-get-function( $name, $args... ) {
     @return get-function( $name, $args... );
 }
 
+/// A wrapper around the `inspect()` function.
+/// Returns a string representation of `$value`.
+/// @param {Any} $value - The value to inspect.
+/// @return {String} - A string representation of `$value`.
+///
+/// @example scss - Usage
+///   @debug k-meta-inspect( "foo bar" ); // => "foo bar"
 @function k-meta-inspect( $value ) {
     @return inspect( $value );
 }
 
+/// A wrapper around the `keywords()` function.
+/// Returns a map of the keywords in `$args`.
+/// @param {List} $args - The arguments to process.
+/// @return {Map} - A map of the keywords in `$args`.
+///
+/// @example scss - Usage
+///   @debug k-meta-keywords( ( "foo" "bar" "baz" "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
 @function k-meta-keywords( $args ) {
     @return keywords( $args );
 }
 
+/// A wrapper around the `type-of()` function.
+/// Returns the type of `$value`.
+/// @param {Any} $value - The value to get the type of.
+/// @return {String} - The type of `$value`.
+///
+/// @example scss - Usage
+///   @debug k-meta-type-of( "foo bar" ); // => "string"
 @function k-meta-type-of( $value ) {
     @return type-of( $value );
 }
 
+/// A wrapper around the `variable-exists()` function.
+/// Returns whether a variable with the name `$name` exists.
+/// @param {String} $name - The name of the variable to check.
+/// @return {Boolean} - Whether a variable with the name `$name` exists.
+///
+/// @example scss - Usage
+///   @debug k-meta-variable-exists( "foo" ); // => true
 @function k-meta-variable-exists( $name ) {
     @return variable-exists( $name );
 }
 
+/// Checks whether `$value` is a <number> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a number.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/number
+///
+/// @example scss - Usage
+///   @debug k-meta-is-number( 1 ); // => true
+///   @debug k-meta-is-number( "foo" ); // => false
 @function k-meta-is-number( $value ) {
     @return k-meta-type-of( $value ) == "number";
 }
 
+/// Checks whether `$value` is a <integer> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a integer.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/integer
+///
+/// @example scss - Usage
+///   @debug k-meta-is-integer( 1 ); // => true
+///   @debug k-meta-is-integer( 1.5 ); // => false
 @function k-meta-is-integer( $value ) {
     @return k-meta-is-number( $value ) and k-math-round( $value ) == $value;
 }
 
+/// Checks whether `$value` is a <time> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a time.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
+///
+/// @example scss - Usage
+///   @debug k-meta-is-time( 1s ); // => true
+///   @debug k-meta-is-time( 1 ); // => false
 @function k-meta-is-time( $value ) {
     @return k-meta-is-number( $value ) and k-string-index( "ms" "s", k-math-unit( $value ) ) != null;
 }
 
+/// Checks whether `$value` is a valid duration period.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a duration.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
+///
+/// @example scss - Usage
+///   @debug k-meta-is-duration( 1s ); // => true
+///   @debug k-meta-is-duration( 1 ); // => false
 @function k-meta-is-duration( $value ) {
     @return k-meta-is-time( $value );
 }
 
+/// Checks whether `$value` is a <angle> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a angle.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+///
+/// @example scss - Usage
+///   @debug k-meta-is-angle( 1deg ); // => true
+///   @debug k-meta-is-angle( 1 ); // => false
 @function k-meta-is-angle( $value ) {
     @return k-meta-is-number( $value ) and k-string-index( "deg" "rad" "grad" "turn", k-math-unit( $value ) ) != null;
 }
 
+/// Checks whether `$value` is a <frequency> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a frequency.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
+///
+/// @example scss - Usage
+///   @debug k-meta-is-frequency( 1Hz ); // => true
+///   @debug k-meta-is-frequency( 1 ); // => false
 @function k-meta-is-frequency( $value ) {
     @return k-meta-is-number( $value ) and k-string-index( "Hz" "kHz", k-math-unit( $value ) ) != null;
 }
 
+/// Checks whether `$value` is a relative <length> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a relative length.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_font
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport
+///
+/// @example scss - Usage
+///   @debug k-meta-is-relative-length( 1em ); // => true
+///   @debug k-meta-is-relative-length( 1ch ); // => true
+///   @debug k-meta-is-relative-length( 1 ); // => false
 @function k-meta-is-relative-length( $value ) {
     @return k-meta-is-number( $value ) and k-string-index( "em" "ex" "ch" "rem" "vw" "vh" "vmin" "vmax", k-math-unit( $value ) ) != null;
 }
 
+/// Checks whether `$value` is an absolute <length> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is an absolute length.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#absolute_length_units
+///
+/// @example scss - Usage
+///   @debug k-meta-is-absolute-length( 1cm ); // => true
+///   @debug k-meta-is-absolute-length( 1 ); // => false
 @function k-meta-is-absolute-length( $value ) {
     @return k-meta-is-number( $value ) and k-string-index( "cm" "mm" "in" "px" "pt" "pc", k-math-unit( $value ) ) != null;
 }
 
+/// Checks whether `$value` is a <percentage> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a percentage.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
+///
+/// @example scss - Usage
+///   @debug k-meta-is-percentage( 1% ); // => true
+///   @debug k-meta-is-percentage( 1 ); // => false
 @function k-meta-is-percentage( $value ) {
     @return k-meta-is-number( $value ) and k-math-unit( $value ) == "%";
 }
 
+/// Checks whether `$value` is a <length> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a length.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length
+///
+/// @example scss - Usage
+///   @debug k-meta-is-length( 1em ); // => true
+///   @debug k-meta-is-length( 1cm ); // => true
+///   @debug k-meta-is-length( 1 ); // => false
 @function k-meta-is-length( $value ) {
     @return k-meta-is-relative-length( $value ) or k-meta-is-absolute-length( $value );
 }
 
+/// Checks whether `$value` is a <resolution> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a resolution.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
+///
+/// @example scss - Usage
+///   @debug k-meta-is-resolution( 1dpi ); // => true
+///   @debug k-meta-is-resolution( 1 ); // => false
 @function k-meta-is-resolution( $value ) {
     @return k-meta-is-number( $value ) and k-string-index( "dpi" "dpcm" "dppx", k-math-unit( $value ) ) != null;
 }
 
+/// Checks whether `$value` is a <position> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a position.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
+///
+/// @example scss - Usage
+///   @debug k-meta-is-position( center ); // => true
 @function k-meta-is-position( $value ) {
     @return k-meta-is-length( $value ) or k-meta-is-percentage( $value ) or k-string-index( "top" "right" "bottom" "left" "center", $value ) != null;
 }
 
 // #endregion
-// #region @import "./_string.import.scss"; -> packages/core/scss/functions/_string.import.scss
+// #region @import "./_string.import.scss"; -> scss/functions/_string.import.scss
+/// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
+/// @param {String} $string - The string to process.
+/// @param {String} $substring - The substring to look for.
+/// @return {Number} - The first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
+///
+/// @example scss - Usage
+///   @debug k-string-index( "foo bar", "bar" ); // => 5
 @function k-string-index( $string, $substring ) {
     @return str-index( $string, $substring );
 }
 
+/// Returns a copy of `$string` with `$insert` inserted at `$index`.
+/// @param {String} $string - The string to process.
+/// @param {String} $insert - The string to insert.
+/// @param {Number} $index - The index at which to insert `$insert`.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-insert( "foo bar", "baz", 5 ); // => "foo baz bar"
 @function k-string-insert( $string, $insert, $index ) {
     @return str-insert( $string, $insert, $index );
 }
 
+/// Returns the length of `$string`.
+/// @param {String} $string - The string to process.
+/// @return {Number} - The length of `$string`.
+///
+/// @example scss - Usage
+///   @debug k-string-length( "foo bar" ); // => 7
 @function k-string-length( $string ) {
     @return str-length( $string );
 }
 
+/// Returns a copy of `$string` with quotes added.
+/// @param {String} $string - The string to process.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-quote( "foo bar" ); // => "foo bar"
 @function k-string-quote( $string ) {
     @return quote( $string );
 }
 
-// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+/// Returns a copy of `$string` with all occurrences of `$search`
+/// replaced by `$replace`.
+/// @param {String} $string - The string to process.
+/// @param {String} $search - The substring to look for.
+/// @param {String} $replace - The replacement string.
+/// @return {String} - The resulting string.
+///
+/// @link https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+///
+/// @example scss - Usage
+///   @debug k-string-replace( "foo bar", "bar", "baz" ); // => "foo baz"
 @function k-string-replace( $string, $search, $replace: "" ) {
     @if k-meta-type-of( $string ) == number {
         $string: $string + "";
@@ -916,22 +1584,53 @@ $_kendo-escape-class-name: (
     @return $string;
 }
 
+/// Returns a substring of `$string` starting at `$start-at` and ending at `$end-at`.
+/// @param {String} $string - The string to process.
+/// @param {Number} $start-at - The index at which to start the substring.
+/// @param {Number} $end-at - The index at which to end the substring.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-slice( "foo bar", 5 ); // => "bar"
 @function k-string-slice( $string, $start-at, $end-at: -1 ) {
     @return str-slice( $string, $start-at, $end-at );
 }
 
+/// Returns a copy of `$string` with all uppercase letters converted to lowercase.
+/// @param {String} $string - The string to process.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-to-lower-case( "FOO BAR" ); // => "foo bar"
 @function k-string-to-lower-case( $string ) {
     @return to-lower-case( $string );
 }
 
+/// Returns a copy of `$string` with all lowercase letters converted to uppercase.
+/// @param {String} $string - The string to process.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-to-upper-case( "foo bar" ); // => "FOO BAR"
 @function k-string-to-upper-case( $string ) {
     @return to-upper-case( $string );
 }
 
+/// Returns a unique identifier.
+/// @return {String} - The unique identifier.
+///
+/// @example scss - Usage
+///   @debug k-string-unique-id(); // => UNIQUE_ID
 @function k-string-unique-id() {
     @return unique-id();
 }
 
+/// Returns a copy of `$string` with quotes removed.
+/// @param {String} $string - The string to process.
+/// @return {String} - The resulting string.
+///
+/// @example scss - Usage
+///   @debug k-string-unquote( "foo bar" ); // => foo bar
 @function k-string-unquote( $string ) {
     @return unquote( $string );
 }
@@ -939,8 +1638,8 @@ $_kendo-escape-class-name: (
 // #endregion
 
 // #endregion
-// #region @import "./color-system/index.import.scss"; -> packages/core/scss/color-system/index.import.scss
-// #region @import "./_functions.import.scss"; -> packages/core/scss/color-system/_functions.import.scss
+// #region @import "./color-system/index.import.scss"; -> scss/color-system/index.import.scss
+// #region @import "./_functions.import.scss"; -> scss/color-system/_functions.import.scss
 @function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
     $result: ();
 
@@ -1034,25 +1733,131 @@ $_kendo-escape-class-name: (
 }
 
 // #endregion
-// #region @import "./_mixins.import.scss"; -> packages/core/scss/color-system/_mixins.import.scss
+// #region @import "./_mixins.import.scss"; -> scss/color-system/_mixins.import.scss
 
 // #endregion
-// #region @import "./_variables.scss"; -> packages/core/scss/color-system/_variables.scss
+// #region @import "./_variables.scss"; -> scss/color-system/_variables.scss
 // Color constants
+
+/// The color white.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
 $kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+
+/// The color black.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
 $kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
 
+/// The color transparent.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
 $kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
 
+/// A gradient that goes from transparent to black.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
 $kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from transparent to white.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
 $kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from black to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
 $kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from white to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
 $kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
 
+/// A gradient that cycles through the colors of the rainbow.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
 $kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
 
 // #endregion
-// #region @import "./_palettes.scss"; -> packages/core/scss/color-system/_palettes.scss
+// #region @import "./_palettes.scss"; -> scss/color-system/_palettes.scss
+/// Color palettes to be used in the Kendo UI themes.
+/// @access private
+/// @type Record<String, ColorMap>
+/// @prop {ColorMap} neutral - The neutral palette
+/// @prop {ColorMap} marsala - The marsala palette
+/// @prop {ColorMap} bootstrapGray - The Bootstrap gray palette
+/// @prop {ColorMap} bootstrapBlue - The Bootstrap blue palette
+/// @prop {ColorMap} bootstrapIndigo - The Bootstrap indigo palette
+/// @prop {ColorMap} bootstrapPurple - The Bootstrap purple palette
+/// @prop {ColorMap} bootstrapPink - The Bootstrap pink palette
+/// @prop {ColorMap} bootstrapRed - The Bootstrap red palette
+/// @prop {ColorMap} bootstrapOrange - The Bootstrap orange palette
+/// @prop {ColorMap} bootstrapYellow - The Bootstrap yellow palette
+/// @prop {ColorMap} bootstrapGreen - The Bootstrap green palette
+/// @prop {ColorMap} bootstrapTeal - The Bootstrap teal palette
+/// @prop {ColorMap} bootstrapCyan - The Bootstrap cyan palette
+/// @prop {ColorMap} fluentNeutral - The Fluent neutral palette
+/// @prop {ColorMap} materialGray - The Material gray palette
+/// @prop {ColorMap} materialBlueGray - The Material blue gray palette
+/// @prop {ColorMap} materialRed - The Material red palette
+/// @prop {ColorMap} materialPink - The Material pink palette
+/// @prop {ColorMap} materialPurple - The Material purple palette
+/// @prop {ColorMap} materialDeepPurple - The Material deep purple palette
+/// @prop {ColorMap} materialIndigo - The Material indigo palette
+/// @prop {ColorMap} materialBlue - The Material blue palette
+/// @prop {ColorMap} materialLightBlue - The Material light blue palette
+/// @prop {ColorMap} materialCyan - The Material cyan palette
+/// @prop {ColorMap} materialTeal - The Material teal palette
+/// @prop {ColorMap} materialGreen - The Material green palette
+/// @prop {ColorMap} materialLightGreen - The Material light green palette
+/// @prop {ColorMap} materialLime - The Material lime palette
+/// @prop {ColorMap} materialYellow - The Material yellow palette
+/// @prop {ColorMap} materialAmber - The Material amber palette
+/// @prop {ColorMap} materialOrange - The Material orange palette
+/// @prop {ColorMap} materialDeepOrange - The Material deep orange palette
+/// @prop {ColorMap} materialBrown - The Material brown palette
+/// @prop {ColorMap} primerGray - The Primer gray palette
+/// @prop {ColorMap} primerBlue - The Primer blue palette
+/// @prop {ColorMap} primerGreen - The Primer green palette
+/// @prop {ColorMap} primerYellow - The Primer yellow palette
+/// @prop {ColorMap} primerOrange - The Primer orange palette
+/// @prop {ColorMap} primerRed - The Primer red palette
+/// @prop {ColorMap} primerPurple - The Primer purple palette
+/// @prop {ColorMap} primerPink - The Primer pink palette
+/// @prop {ColorMap} primerCoral - The Primer coral palette
+/// @prop {ColorMap} tailwindNeutral - The Tailwind neutral palette
+/// @prop {ColorMap} tailwindSlate - The Tailwind slate palette
+/// @prop {ColorMap} tailwindGray - The Tailwind gray palette
+/// @prop {ColorMap} tailwindZinc - The Tailwind zinc palette
+/// @prop {ColorMap} tailwindStone - The Tailwind stone palette
+/// @prop {ColorMap} tailwindRed - The Tailwind red palette
+/// @prop {ColorMap} tailwindOrange - The Tailwind orange palette
+/// @prop {ColorMap} tailwindAmber - The Tailwind amber palette
+/// @prop {ColorMap} tailwindYellow - The Tailwind yellow palette
+/// @prop {ColorMap} tailwindLime - The Tailwind lime palette
+/// @prop {ColorMap} tailwindGreen - The Tailwind green palette
+/// @prop {ColorMap} tailwindEmerald - The Tailwind emerald palette
+/// @prop {ColorMap} tailwindTeal - The Tailwind teal palette
+/// @prop {ColorMap} tailwindCyan - The Tailwind cyan palette
+/// @prop {ColorMap} tailwindSky - The Tailwind sky palette
+/// @prop {ColorMap} tailwindBlue - The Tailwind blue palette
+/// @prop {ColorMap} tailwindIndigo - The Tailwind indigo palette
+/// @prop {ColorMap} tailwindViolet - The Tailwind violet palette
+/// @prop {ColorMap} tailwindPurple - The Tailwind purple palette
+/// @prop {ColorMap} tailwindFuchsia - The Tailwind fuchsia palette
+/// @prop {ColorMap} tailwindPink - The Tailwind pink palette
+/// @prop {ColorMap} tailwindRose - The Tailwind rose palette
+///
+/// @group color-system
 $kendo-palettes: (
 
     // Kendo
@@ -1972,8 +2777,8 @@ $kendo-palettes: (
 // #endregion
 
 // #endregion
-// #region @import "./mixins/index.import.scss"; -> packages/core/scss/mixins/index.import.scss
-// #region @import "./_border-radius.scss"; -> packages/core/scss/mixins/_border-radius.scss
+// #region @import "./mixins/index.import.scss"; -> scss/mixins/index.import.scss
+// #region @import "./_border-radius.scss"; -> scss/mixins/_border-radius.scss
 // Border radius
 @mixin border-radius( $radius: null ) {
     @if $kendo-enable-rounded {
@@ -2034,7 +2839,7 @@ $kendo-palettes: (
 }
 
 // #endregion
-// #region @import "./_box-shadow.scss"; -> packages/core/scss/mixins/_box-shadow.scss
+// #region @import "./_box-shadow.scss"; -> scss/mixins/_box-shadow.scss
 @mixin box-shadow( $shadow... ) {
     @if $kendo-enable-shadows and k-list-nth($shadow, 1) {
         box-shadow: $shadow;
@@ -2042,7 +2847,7 @@ $kendo-palettes: (
 }
 
 // #endregion
-// #region @import "./_data-uri.scss"; -> packages/core/scss/mixins/_data-uri.scss
+// #region @import "./_data-uri.scss"; -> scss/mixins/_data-uri.scss
 /// A list of files converted to data URIs
 /// @access private
 $_kendo-data-uris: () !default;
@@ -2062,7 +2867,7 @@ $_kendo-data-uris: () !default;
 }
 
 // #endregion
-// #region @import "./_disabled.scss"; -> packages/core/scss/mixins/_disabled.scss
+// #region @import "./_disabled.scss"; -> scss/mixins/_disabled.scss
 // Disabled
 @mixin disabled( $kendo-disabled-styling ) {
     outline: none;
@@ -2074,7 +2879,7 @@ $_kendo-data-uris: () !default;
 }
 
 // #endregion
-// #region @import "./_focus-indicator.scss"; -> packages/core/scss/mixins/_focus-indicator.scss
+// #region @import "./_focus-indicator.scss"; -> scss/mixins/_focus-indicator.scss
 @mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow" ) {
     @if $kendo-enable-focus-contrast and k-list-nth($indicator, 1) {
         @include box-shadow( if( $inset, inset, null ) 0 0 0 2px if( $themeable, currentColor, rgb( 0, 0, 0 ) ) );
@@ -2084,7 +2889,7 @@ $_kendo-data-uris: () !default;
 }
 
 // #endregion
-// #region @import "./_gradient.scss"; -> packages/core/scss/mixins/_gradient.scss
+// #region @import "./_gradient.scss"; -> scss/mixins/_gradient.scss
 @mixin linear-gradient( $gradient: null ) {
     @if $gradient and $kendo-enable-gradients {
         @if $gradient == none {
@@ -2123,7 +2928,7 @@ $_kendo-data-uris: () !default;
 }
 
 // #endregion
-// #region @import "./_hide-scrollbar.scss"; -> packages/core/scss/mixins/_hide-scrollbar.scss
+// #region @import "./_hide-scrollbar.scss"; -> scss/mixins/_hide-scrollbar.scss
 $kendo-scrollbar-width: 17px !default;
 
 @mixin hide-scrollbar( $dir: "right", $max-scrollbar: 100px ) {
@@ -2144,7 +2949,7 @@ $kendo-scrollbar-width: 17px !default;
 }
 
 // #endregion
-// #region @import "./_import-once.scss"; -> packages/core/scss/mixins/_import-once.scss
+// #region @import "./_import-once.scss"; -> scss/mixins/_import-once.scss
 /// A list of exported modules.
 /// @access private
 $_kendo-imported-modules: () !default;
@@ -2161,7 +2966,7 @@ $_kendo-imported-modules: () !default;
 }
 
 // #endregion
-// #region @import "./_typography.scss"; -> packages/core/scss/mixins/_typography.scss
+// #region @import "./_typography.scss"; -> scss/mixins/_typography.scss
 @mixin typography( $font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null ) {
     font-size: $font-size;
     font-family: $font-family;
@@ -2186,8 +2991,8 @@ $_kendo-imported-modules: () !default;
 }
 
 // #endregion
-// #region @import "./module-system/index.import.scss"; -> packages/core/scss/module-system/index.import.scss
-// #region @import "./_components.scss"; -> packages/core/scss/module-system/_components.scss
+// #region @import "./module-system/index.import.scss"; -> scss/module-system/index.import.scss
+// #region @import "./_components.scss"; -> scss/module-system/_components.scss
 $kendo-components: (
     // Typography and utils
     "typography",
@@ -2331,7 +3136,7 @@ $kendo-components: (
 ) !default;
 
 // #endregion
-// #region @import "./_dependencies.scss"; -> packages/core/scss/module-system/_dependencies.scss
+// #region @import "./_dependencies.scss"; -> scss/module-system/_dependencies.scss
 $_kendo-dependencies: (
     action-sheet: (
         "icon",
@@ -2859,8 +3664,8 @@ $_imported: ();
 @include verify-dependencies();
 
 // #endregion
-// #region @import "./styles/index.import.scss"; -> packages/core/scss/styles/index.import.scss
-// #region @import "./_accessibility.scss"; -> packages/core/scss/styles/_accessibility.scss
+// #region @import "./styles/index.import.scss"; -> scss/styles/index.import.scss
+// #region @import "./_accessibility.scss"; -> scss/styles/_accessibility.scss
 @mixin kendo-core--styles--accessibility() {
 
     /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
@@ -2877,7 +3682,7 @@ $_imported: ();
 }
 
 // #endregion
-// #region @import "./_asp-fallback.scss"; -> packages/core/scss/styles/_asp-fallback.scss
+// #region @import "./_asp-fallback.scss"; -> scss/styles/_asp-fallback.scss
 @mixin kendo-core--styles--asp-fallback() {
 
     .k-theme-test-class,
@@ -2888,7 +3693,7 @@ $_imported: ();
 }
 
 // #endregion
-// #region @import "./_layout"; -> packages/core/scss/styles/_layout.scss
+// #region @import "./_layout"; -> scss/styles/_layout.scss
 @mixin kendo-core--styles--layout() {
 
     // Basic layout
@@ -2986,7 +3791,7 @@ $_imported: ();
 }
 
 // #endregion
-// #region @import "./_normalize.scss"; -> packages/core/scss/styles/_normalize.scss
+// #region @import "./_normalize.scss"; -> scss/styles/_normalize.scss
 @mixin kendo-core--styles--normalize() {
 
     // Hidden attribute
@@ -3014,7 +3819,7 @@ $_imported: ();
 }
 
 // #endregion
-// #region @import "./_variables.scss"; -> packages/core/scss/_variables.scss
+// #region @import "./_variables.scss"; -> scss/_variables.scss
 // File already imported_once. Skipping output.
 // #endregion