@progress/kendo-theme-core 14.2.0-dev.0 → 14.2.0-dev.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "14.2.0-dev.0",
+  "version": "14.2.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,6 +45,5 @@
   },
   "directories": {
     "doc": "docs"
-  },
-  "gitHead": "2bc240b1c4ee65e6dc269fe4586ed2cabc5ba318"
+  }
 }

package/scss/border-radii/index.scss

@@ -52,6 +52,10 @@ $kendo-border-radii: $default-border-radii !default;
 $kendo-border-radii: map.merge($default-border-radii, $kendo-border-radii);
 
 
+/// Returns a CSS variable reference for a border-radius token.
+/// @param {String} $key - The border-radius key from $kendo-border-radii.
+/// @return {String} CSS variable reference for the given border-radius token.
+/// @group functions
 @function k-border-radius($key) {
     @return var(--kendo-border-radius-#{$key});
 }

package/scss/color-system/_functions.scss

@@ -90,7 +90,7 @@
 /// @param {String} $theme - The theme the colors will be generated for
 /// @return {Map} - A map with the generated keys and values
 ///
-/// @group color-system
+/// @group functions
 @function k-generate-color-variations( $name, $color, $theme: null ) {
     $result: ();
 
@@ -212,7 +212,7 @@
 /// @param {String} $key - The name of a color/key in the $kendo-colors map
 /// @return {String} - CSS variable with the actual color as a fallback
 ///
-/// @group color-system
+/// @group functions
 @function k-color($key) {
     @return var(--kendo-color-#{$key});
 }

package/scss/elevation/index.scss

@@ -36,6 +36,10 @@ $kendo-elevation: map.merge($default-elevation, $kendo-elevation);
     @return #{$result};
 }
 
+/// Returns a CSS variable reference for an elevation shadow level.
+/// @param {Number} $level - The elevation level key from $kendo-elevation.
+/// @return {String} CSS variable reference for the given elevation level.
+/// @group functions
 @function k-elevation($level) {
     @return var(--kendo-elevation-#{$level});
 }
@@ -46,10 +50,13 @@ $kendo-elevation-bg-lightness-step: 0.015 !default;
 // Each elevation-bg level increases oklch chroma by level * this value.
 $kendo-elevation-bg-chroma-step: 0.001 !default;
 
-// The background color for a given elevation level is calculated by increasing the lightness and chroma of the base background color
-// by a step multiplied by the elevation level, but only if the base background color is light (for light themes) or dark (for dark themes).
-// This is achieved by multiplying the steps by a clamp function that returns 1 when the background color is in the appropriate range and 0 otherwise.
-// clamp(0, (0.5 - l) * 99999, 1) → 1 when bg is dark, 0 when light
+/// Returns an elevated background color expression using oklch relative color syntax.
+/// The lightness and chroma are increased per elevation level, but only when the
+/// base color is in the appropriate light/dark range.
+/// @param {Number} $level - The elevation level that drives lightness and chroma increase.
+/// @param {Color} $color - The base background color.
+/// @return {String} An oklch relative color expression that represents the elevated background.
+/// @group functions
 @function k-elevation-bg($level, $color) {
     $_result: "oklch(from #{$color} calc(l + #{$level} * #{$kendo-elevation-bg-lightness-step} * clamp(0, (0.5 - l) * 99999, 1)) calc(c + #{$level} * #{$kendo-elevation-bg-chroma-step} * clamp(0, (0.5 - l) * 99999, 1)) h)";
     @return #{$_result};

package/scss/functions/_color.scss

@@ -10,6 +10,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// 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.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-red( #ff0000 ); // => 255
@@ -23,6 +24,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// 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.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-green( #00ff00 ); // => 255
@@ -36,6 +38,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// 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.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-blue( #0000ff ); // => 255
@@ -49,6 +52,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// Returns the hue of a color.
 /// @param {Color} $color - The color to get the hue for.
 /// @return {Number} - The hue of the color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-hue( #e1d7d2 ); // => 20deg
@@ -62,6 +66,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// Returns the saturation of a color.
 /// @param {Color} $color - The color to get the saturation for.
 /// @return {Number} - The saturation of the color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-saturation( #e1d7d2 ); // => 20%
@@ -75,6 +80,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// Returns the lightness of a color.
 /// @param {Color} $color - The color to get the lightness for.
 /// @return {Number} - The lightness of the color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-lightness( #e1d7d2 ); // => 80%
@@ -90,6 +96,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color2 - The second color.
 /// @param {Number} $weight - The weight of the first color in the mix.
 /// @return {Color} - The mixed color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-mix( #f00, #00f ); // => #800080
@@ -101,6 +108,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to darken.
 /// @param {Number} $amount - The amount to darken the color.
 /// @return {Color} - The darkened color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-darken( #f00, 10% ); // => #e60000
@@ -112,6 +120,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to lighten.
 /// @param {Number} $amount - The amount to lighten the color.
 /// @return {Color} - The lightened color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-lighten( #f00, 10% ); // => #ff1a1a
@@ -123,6 +132,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to adjust the hue for.
 /// @param {Number} $degrees - The amount to adjust the hue.
 /// @return {Color} - The adjusted color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-adjust-hue( #f00, 10deg ); // => #ff1a00
@@ -134,6 +144,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to saturate.
 /// @param {Number} $amount - The amount to saturate the color.
 /// @return {Color} - The saturated color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-saturate( #f00, 10% ); // => #ff3333
@@ -145,6 +156,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to desaturate.
 /// @param {Number} $amount - The amount to desaturate the color.
 /// @return {Color} - The desaturated color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-desaturate( #f00, 10% ); // => #e60000
@@ -152,6 +164,13 @@ $kendo-dark-color-level-step: 16% !default;
     @return color.adjust( $color, $saturation: - $amount );
 }
 
+/// Mixes a color with white or black based on a level value.
+/// Negative levels tint toward white, positive levels shade toward black.
+/// @param {Color} $color - The color to adjust.
+/// @param {Number} $level [0] - Shade/tint level. Negative = tint, positive = shade. Accepts numeric steps or percentages.
+/// @param {Boolean} $_is-dark-theme [$kendo-is-dark-theme] - Internal dark-theme flag, controls step size.
+/// @return {Color} - The adjusted color.
+/// @group functions
 @function k-color-level( $color, $level: 0, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
     $_color-level-step: if( $_dark-theme, $kendo-dark-color-level-step, $kendo-light-color-level-step );
@@ -176,7 +195,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to lighten the color
 /// @return {Color} - The lightened color
 ///
-/// @group color-system
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-tint( #f00, 1 ); // => #ff1a1a
@@ -189,7 +208,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to darken the color
 /// @return {Color} - The darkened color
 ///
-/// @group color-system
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-shade( #f00, 1 ); // => #e60000
@@ -202,7 +221,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to shade or tint the color
 /// @return {Color} - The shaded or tinted color
 ///
-/// @group color-system
+/// @group functions
 @function k-try-shade( $color, $level: 1, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
@@ -218,7 +237,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to tint or shade the color
 /// @return {Color} - The tinted or shaded color
 ///
-/// @group color-system
+/// @group functions
 @function k-try-tint( $color, $level: 1, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
@@ -234,7 +253,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to darken or lighten the color
 /// @return {Color} - The darkened or lightened color
 ///
-/// @group color-system
+/// @group functions
 @function k-try-darken( $color, $amount, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
@@ -249,7 +268,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to lighten or darken the color
 /// @return {Color} - The lightened or darkened color
 ///
-/// @group color-system
+/// @group functions
 @function k-try-lighten( $color, $amount, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
@@ -264,7 +283,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $bg - The background color
 /// @return {Color} - The converted color
 ///
-/// @group color-system
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
@@ -567,7 +586,7 @@ $wcag-light: white !default;
 /// @param {Color} $color - The color to calculate the relative luminance for.
 /// @return {Number} - The relative luminance for the color.
 ///
-/// @group accessibility
+/// @group functions
 ///
 /// @link https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@@ -584,7 +603,7 @@ $wcag-light: white !default;
 /// @param {Color} $foreground - The foreground color
 /// @return {Number} - The contrast ratio between the two colors
 ///
-/// @group accessibility
+/// @group functions
 ///
 /// @link https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@@ -599,7 +618,7 @@ $wcag-light: white !default;
 /// @param {Color} $color - The color to check
 /// @return {Boolean} - True if the color is dark, false otherwise
 ///
-/// @group accessibility
+/// @group functions
 @function k-is-dark( $color ) {
     @return if( k-color-luminance( $color ) < .5, true, false );
 }
@@ -608,7 +627,7 @@ $wcag-light: white !default;
 /// @param {Color} $color - The color to check
 /// @return {Boolean} - True if the color is light, false otherwise
 ///
-/// @group accessibility
+/// @group functions
 @function k-is-light( $color ) {
     @return if( k-color-luminance( $color ) < .5, false, true );
 }
@@ -622,7 +641,7 @@ $wcag-light: white !default;
 /// @param {Number} $min-ratio - The minimum contrast ratio to reach
 /// @return {Color} - The color with the highest contrast ratio
 ///
-/// @group accessibility
+/// @group functions
 @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;

package/scss/functions/_default.scss

@@ -7,6 +7,7 @@
 /// @param {String} $default - The default value to compare against.
 /// @param {String | List} $current - The current value to check. Can be a single value or a list of values.
 /// @return {String | Null} - Returns "&," when values match, null otherwise.
+/// @group functions
 
 @function k-when-default($default, $current) {
   @if meta.type-of($current) == "list" {

package/scss/functions/_lang.scss

@@ -3,6 +3,7 @@
 /// @param {Any} $var - The variable to check.
 /// @param {Any} $fallback - The fallback value.
 /// @return {Any} - The value of the variable or the fallback value.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   $foo: null;

package/scss/functions/_list.scss

@@ -4,6 +4,7 @@
 /// @param {List} $list - The list to check.
 /// @param {Any} $value - The value to check for.
 /// @return {Boolean} - Whether `$list` contains `$value`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-list-includes( ( "foo", "bar" ), "foo" ); // => true
@@ -15,6 +16,7 @@
 /// Reverse the order of items in `$list`.
 /// @param {List} $list - The list to reverse.
 /// @return {List} - The reversed list.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-list-reverse( ( "foo", "bar" ) ); // => "bar, foo"

package/scss/functions/_map.scss

@@ -4,6 +4,7 @@
 /// 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.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
@@ -18,6 +19,7 @@
 /// @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`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
@@ -31,6 +33,7 @@
 /// Returns a deep-map with the keys and values from `$map` and `$args`.
 /// @param {Map} $maps - The maps to deep-merge.
 /// @return {Map} - A map with the keys and values from `$map` and `$args`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-deep-merge( ( "foo": ("bar": "baz", "baz": "qux" ) ), ( "foo": ("bar": "foo") ) ); // => ( "foo": ("bar": "foo", "baz": "qux" ))
@@ -63,6 +66,7 @@
 /// @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.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-set( ( "foo": "bar" ), "baz", "qux" ); // => ( "foo": "bar", "baz": "qux" )
@@ -78,6 +82,7 @@
 /// Returns negative values of a number or numbers in a list.
 /// @param {Map} $map - The map to get the values from.
 /// @return {Map} - A comma separated list of the values in `$map`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-negate( ( 0: 0, 1: 1px, 2: 2px ) ); // => ("-1": -1px, "-2": -2px)

package/scss/functions/_math.scss

@@ -8,6 +8,7 @@
 /// @param {Number} $min - The minimum value.
 /// @param {Number} $max - The maximum value.
 /// @return {Number} - The clamped number.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-math-clamp( 10, 0, 5 ); // => 5
@@ -19,6 +20,7 @@
 /// @param {Number} $x - The base.
 /// @param {Number} $n - The exponent.
 /// @return {Number} - The result of raising `$x` to the power of `$n`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-math-pow( 2, 3 ); // => 8
@@ -47,6 +49,7 @@
 /// @param {Number} $number - The number to round.
 /// @param {Number} $precision - The number of decimal places to round to.
 /// @return {Number} - The rounded number.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-math-round( 10.123456789, 3 ); // => 10.123
@@ -63,6 +66,7 @@
 /// Remove the unit from a number.
 /// @param {Number} $number - The number to remove the unit from.
 /// @return {Number} - The unitless number.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-math-strip-unit( 10px ); // => 10

package/scss/functions/_meta.scss

@@ -7,6 +7,7 @@
 /// Checks whether `$value` is a <number> CSS data type.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a number.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/number
 ///
@@ -20,6 +21,7 @@
 /// Checks whether `$value` is a <integer> CSS data type.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a integer.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/integer
 ///
@@ -33,6 +35,7 @@
 /// Checks whether `$value` is a <time> CSS data type.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a time.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
 ///
@@ -46,6 +49,7 @@
 /// Checks whether `$value` is a valid duration period.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a duration.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
 ///
@@ -59,6 +63,7 @@
 /// Checks whether `$value` is a <angle> CSS data type.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a angle.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/angle
 ///
@@ -72,6 +77,7 @@
 /// Checks whether `$value` is a <frequency> CSS data type.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a frequency.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
 ///
@@ -85,6 +91,7 @@
 /// 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.
+/// @group functions
 ///
 /// @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
@@ -100,6 +107,7 @@
 /// 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.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#absolute_length_units
 ///
@@ -113,6 +121,7 @@
 /// Checks whether `$value` is a <percentage> CSS data type.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a percentage.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
 ///
@@ -126,6 +135,7 @@
 /// Checks whether `$value` is a <length> CSS data type.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a length.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length
 ///
@@ -140,6 +150,7 @@
 /// Checks whether `$value` is a <resolution> CSS data type.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a resolution.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
 ///
@@ -153,6 +164,7 @@
 /// Checks whether `$value` is a <position> CSS data type.
 /// @param {Any} $value - The value to check.
 /// @return {Boolean} - Whether `$value` is a position.
+/// @group functions
 ///
 /// @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
 ///

package/scss/functions/_string.scss

@@ -22,6 +22,7 @@ $_kendo-escape-class-name: (
 /// @param {String} $search - The substring to look for.
 /// @param {String} $replace - The replacement string.
 /// @return {String} - The resulting string.
+/// @group functions
 ///
 /// @link https://www.sassmeister.com/gist/1b4f2da5527830088e4d
 ///
@@ -53,6 +54,11 @@ $_kendo-escape-class-name: (
 }
 
 // See https://codepen.io/kevinweber/pen/dXWoRw
+/// URL-encodes special SVG characters in a data URI string so it can be safely embedded in CSS.
+/// Only processes strings that start with "data:image/svg+xml".
+/// @param {String} $string - The SVG data URI string to encode.
+/// @return {String} - The URL-encoded string.
+/// @group functions
 @function k-escape-svg($string) {
     @if string.index($string, "data:image/svg+xml") {
         @each $char, $encoded in $_kendo-svg-escaped-characters {
@@ -71,6 +77,7 @@ $_kendo-escape-class-name: (
 /// Escapes special characters in a class name
 /// @param {String} $text - The string to escape
 /// @return {String} - The escaped string
+/// @group functions
 @function k-escape-class-name( $text ) {
     $_text: $text;
 

package/scss/motion/index.scss

@@ -174,16 +174,28 @@ $kendo-durations: map.merge($default-durations, $kendo-durations);
 $kendo-transitions: $default-transitions !default;
 $kendo-transitions: map.merge($default-transitions, $kendo-transitions);
 
+/// Returns a CSS variable reference for an easing token.
+/// @param {String} $key - The easing key from $kendo-easings.
+/// @return {String} CSS variable reference for the given easing token.
+/// @group functions
 @function k-easing($key) {
     $easing: map.get($kendo-easings, $key);
     @return var(--kendo-easing-#{$key});
 }
 
+/// Returns a CSS variable reference for a duration token.
+/// @param {String} $key - The duration key from $kendo-durations.
+/// @return {String} CSS variable reference for the given duration token.
+/// @group functions
 @function k-duration($key) {
     $_duration: map.get($kendo-durations, $key);
     @return var(--kendo-duration-#{$key});
 }
 
+/// Returns a CSS variable reference for a transition token.
+/// @param {String} $key - The transition key from $kendo-transitions.
+/// @return {String} CSS variable reference for the given transition token.
+/// @group functions
 @function k-transition($key) {
     @return var(--kendo-transition-#{$key});
 }

package/scss/spacing/index.scss

@@ -49,6 +49,10 @@ $kendo-spacing: $default-spacing !default;
 $kendo-spacing: map.merge($default-spacing, $kendo-spacing);
 
 
+/// Returns a CSS variable reference for a spacing step.
+/// @param {Number | String} $step - The spacing step key from $kendo-spacing.
+/// @return {String} CSS variable reference for the given spacing step.
+/// @group functions
 @function k-spacing($step) {
     $_step: k-escape-class-name( $step );
     @return var(--kendo-spacing-#{$_step});

package/scss/translucency/index.scss

@@ -1,5 +1,9 @@
 $kendo-translucency-base: 0% !default;
 
+/// Returns an oklch color expression with translucency applied via a CSS variable.
+/// @param {Color} $color - The base color to apply translucency to.
+/// @return {String} An oklch relative color expression with the translucency CSS variable applied.
+/// @group functions
 @function k-translucency-bg($color) {
     $_result: "oklch(from #{$color} l c h / calc(100% - calc(var(--kendo-translucency-base, 0%))))";
     @return #{$_result};
@@ -8,6 +12,10 @@ $kendo-translucency-base: 0% !default;
 $kendo-translucency-blur-base: 6px !default;
 $kendo-translucency-blur-step: 2px !default;
 
+/// Returns a blur filter expression scaled by a translucency level.
+/// @param {Number} $level - The blur intensity multiplier (default: 1).
+/// @return {String} A CSS blur() filter expression.
+/// @group functions
 @function k-translucency-blur($level: 1) {
     $_result: "blur(calc(#{$kendo-translucency-blur-base} + calc(#{$level} * #{$kendo-translucency-blur-step})))";
     @return #{$_result};

package/scss/z-index/index.scss

@@ -25,6 +25,7 @@ $kendo-z-layers: (
 /// @param {Number} $n [0] - {Optional} Number of steps above the base layer.
 /// @param {Number} $delta [0] - {Deprecated, Optional} Balancing value.
 /// @return {Number} - Calculated z-index value.
+/// @group functions
 @function k-z-index($layer, $n: 0, $delta: 0) {
     $layer-value: map.get($kendo-z-layers, $layer);