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

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);