igniteui-theming 25.0.1 → 25.0.2

package/sass/color/_functions.scss

@@ -43,7 +43,7 @@ $_enhanced-accessibility: false;
 /// @param {Color} $error [#ff134a] - The error color used throughout the application (optional).
 /// @param {String} $variant [null] - Used internally (optional).
 /// @requires {function} shades
-/// @returns {Map} - A map consisting of color shades for the passed base colors (primary, secondary, gray, etc).
+/// @returns {Map} A map consisting of color shades for the passed base colors (primary, secondary, gray, etc).
 /// @example scss
 ///   // Pass the required colors
 ///   $my-palette: palette(
@@ -99,7 +99,7 @@ $_enhanced-accessibility: false;
 /// @param {List} $shades - The list of shade variants.
 /// @param {Color} $surface [null] - The surface color. Useful if generating shades of gray (optional).
 /// @requires {function} adaptive-contrast
-/// @returns {Map} - A map consisting of color shades and their respective contrast colors.
+/// @returns {Map} A map consisting of color shades and their respective contrast colors.
 ///
 /// @example scss
 ///   $color-name: 'accent';
@@ -138,7 +138,7 @@ $_enhanced-accessibility: false;
 /// @param {Color} $surface [null] - The surface color. Useful when generating a shade of gray (optional).
 /// @require {function} luminance
 /// @require {function} to-fixed
-/// @returns {Map} - A map containing a list of HSL values and a raw color value.
+/// @returns {Map} A map containing a list of HSL values and a raw color value.
 @function shade($name, $color, $shade, $surface: null) {
     $h: var(--ig-#{$name}-h);
     $s: var(--ig-#{$name}-s);
@@ -191,7 +191,7 @@ $_enhanced-accessibility: false;
 /// @param {Number} $lightness [50] - The target lightness value to move toward.
 /// @param {Number} $percentage [0.1] - The percentage to move toward the target lightness.
 /// @param {Number} $offset [10] - The offset added or subtracted based on direction.
-/// @returns {Color} - The dynamically shaded color in LCH color space
+/// @returns {Color} The dynamically shaded color in LCH color space
 @function dynamic-shade($color, $lightness: 50, $factor: 0.1, $offset: 5) {
     @return lch(from $color calc(l + ($lightness - l) * $factor + sign($lightness - l) * $offset) c h);
 }
@@ -201,7 +201,7 @@ $_enhanced-accessibility: false;
 /// @access private
 /// @group Color
 /// @param {Color} $color - The color to normalize.
-/// @returns {Color} - The normalized color in hex format.
+/// @returns {Color} The normalized color in hex format.
 @function _normalize-color($color) {
     @if meta.type-of($color) == 'color' {
         // Round RGB channels to integers to maintain backward compatibility with older Sass behavior
@@ -222,7 +222,7 @@ $_enhanced-accessibility: false;
 /// @param {String} $color [primary] - The target color from the color palette.
 /// @param {Number | String} $variant [500] - The target color shade from the color palette.
 /// @param {Number} $opacity [null] - Optional opacity to apply to the color shade.
-/// @returns {Color | String} - The raw color shade or CSS variable reference from the palette.
+/// @returns {Color | String} The raw color shade or CSS variable reference from the palette.
 ///
 /// @example scss - Getting a color from the palette
 ///   // Without providing a palette
@@ -269,9 +269,9 @@ $_enhanced-accessibility: false;
 /// @param {Number | String} $variant [500] - The target color shade from the color palette.
 /// @param {Number} $opacity [null] - Optional opacity to apply to the color shade.
 /// @requires {function} color
-/// @returns {Color | String} - The raw contrast color shade or CSS variable from the palette.
+/// @returns {Color | String} The raw contrast color shade or CSS variable from the palette.
 ///
-/// @example scss without passing a palette
+/// @example scss - without passing a palette
 ///   .my-component {
 ///      background: color($color: 'primary', $variant: 200);
 ///      color: contrast-color($color: 'primary', $variant: 200);
@@ -285,7 +285,7 @@ $_enhanced-accessibility: false;
 /// @access public
 /// @group Color
 /// @param {Color} $color - The base color used in the calculation.
-/// @returns {string} - Returns a relative HSL color where the lightness is adjusted
+/// @returns {string} Returns a relative HSL color where the lightness is adjusted
 /// based on the specified contrast level, resulting in either black or white.
 ///
 /// @example scss
@@ -307,9 +307,9 @@ $_enhanced-accessibility: false;
 /// @param {Color} $background - The background color used to return a contrast/forground color for.
 /// @param {Color | List<Color>} $foreground [#fff] - A list of foreground colors
 /// that can be used with the provided background.
-/// @param {AAA | AA | A} $contrast [AAA] - The contrast level according to WCAG 2.0 standards.
+/// @param {String} $contrast [AAA] - The contrast level according to WCAG 2.0 standards.
 /// @require {function} contrast
-/// @returns {Color} - Returns either white, black, or the provided foreground
+/// @returns {Color} Returns either white, black, or the provided foreground
 /// color if it meets the required contrast level.
 ///
 /// @example scss
@@ -370,7 +370,7 @@ $_enhanced-accessibility: false;
 /// @group Color
 /// @param {Color} $color-1 - The first color, usually transparent.
 /// @param {Color} $color-2 [#fff] - The second color, usually opaque.
-/// @return {Color} - The color representation of the rgba value.
+/// @return {Color} The color representation of the rgba value.
 @function to-opaque($color-1, $color-2: #fff) {
     @if meta.type-of($color-1) == color and meta.type-of($color-2) == color {
         $red: color.channel($color-1, 'red', $space: rgb);
@@ -392,9 +392,9 @@ $_enhanced-accessibility: false;
 /// @access public
 /// @group Color
 /// @param {Color} $color - The color to be converted to an HSL list of values.
-/// @example scss Turn #000 into an HSL list of values
+/// @example scss - Turn #000 into an HSL list of values
 ///   $hsl-list: to-hsl(#000); // (0deg, 0%, 0%);
-/// @return {List} - This list of HSL values.
+/// @return {List} This list of HSL values.
 @function to-hsl($color) {
     @return (
         math.round(color.channel($color, 'hue', $space: hsl)),
@@ -412,7 +412,7 @@ $_enhanced-accessibility: false;
 /// @example scss
 ///   $conrast: contrast(#09f, #000); // 7
 ///
-/// @returns {Number} - The contrast ratio between the background and foreground colors.
+/// @returns {Number} The contrast ratio between the background and foreground colors.
 /// @require {function} luminance
 /// @require {function} to-fixed
 /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests WCAG 2.0 Contrast Ratio
@@ -433,7 +433,7 @@ $_enhanced-accessibility: false;
 ///   $blue: luminance(#09f); // 0.3
 ///   $black: luminance(#000); // 0
 ///
-/// @returns {Number | String} - The calculated luminance of a given color
+/// @returns {Number | String} The calculated luminance of a given color
 /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests. WCAG 2.0 Contrast Ratio
 @function luminance($color) {
     @if meta.type-of($color) == 'color' {
@@ -451,7 +451,7 @@ $_enhanced-accessibility: false;
 /// @access private
 /// @group Color
 /// @param {Number} $value - The sRGB color
-/// @returns {Number} - The calculated linear channel value
+/// @returns {Number} The calculated linear channel value
 @function _lcv($value) {
     // stylelint-disable number-max-precision
     @return if($value < 0.03928, math.div($value, 12.92), math.pow(math.div($value + 0.055, 1.055), 2.4));
@@ -460,7 +460,7 @@ $_enhanced-accessibility: false;
 /// Returns a list of colors to be used as chart brushes. The return value depends on the value of enhanced-accessibility.
 /// @access public
 /// @group Palettes
-/// @returns { List } - A list of colors to be used as chart brushes.
+/// @returns { List } A list of colors to be used as chart brushes.
 /// @see {mixin} configure-colors
 /// @see $brushes-regular
 /// @see $brushes-color-blind

package/sass/color/_mixins.scss

@@ -74,7 +74,7 @@ $_added: () !default;
 /// @param {Map} $palette - The palette used to generate CSS variables.
 /// @param {Boolean} $contrast [true] - Specify if contrast colors should be included.
 ///
-/// @example scss Generate css variables for a palette
+/// @example scss - Generate css variables for a palette
 ///    $palette: palette($primary: red, $secondary: blue, $gray: #000);
 ///    @include palette($palette);
 ///

package/sass/elevations/_functions.scss

@@ -12,7 +12,7 @@ $factor: var(--ig-elevation-factor, 1);
 /// Checks if the passed argument is a valid box-shadow.
 /// @access private
 /// @param {List} $shadow - A list of shadow properties.
-/// @return {Boolean} - Returns a boolean depending on if the passed argument is a valid shadow.
+/// @return {Boolean} Returns a boolean depending on if the passed argument is a valid shadow.
 @function _is-shadow($shadow) {
     $lastIndex: list.length($shadow);
 
@@ -34,7 +34,7 @@ $factor: var(--ig-elevation-factor, 1);
 /// Transforms the passed box-shadow list according to the elevation factor value.
 /// @access private
 /// @param {List} $shadow - A list of shadow properties.
-/// @return {List} - The transformed shadow list.
+/// @return {List} The transformed shadow list.
 @function _transform-shadow($shadow) {
     $result: ();
 
@@ -63,7 +63,7 @@ $factor: var(--ig-elevation-factor, 1);
 ///         0 0 calc(--ig-elevation-factor * 2px) calc(--ig-elevation-factor * 3px) black,
 ///         0 calc(--ig-elevation-factor * 6px) calc(--ig-elevation-factor * 9px) orange;
 ///   }
-/// @return {List} - The transformed shadow list.
+/// @return {List} The transformed shadow list.
 /// @requires {function} _is-shadow
 /// @requires {function} _transform-shadow
 @function box-shadow($shadows) {
@@ -98,7 +98,7 @@ $factor: var(--ig-elevation-factor, 1);
 ///   .my-component {
 ///     box-shadow: elevation(5); // var(--ig-elevation-5)
 ///   }
-/// @return {String} - The CSS elevation variable
+/// @return {String} The CSS elevation variable
 @function elevation($name) {
     @return var(--ig-elevation-#{$name});
 }

package/sass/elevations/_mixins.scss

@@ -8,7 +8,7 @@
 /// Generates CSS variables for a given elevations map.
 /// @access public
 /// @param {Map} $elevations - The elevations map to use to generate CSS variables.
-/// @example scss Generate CSS variables for elevations.
+/// @example scss - Generate CSS variables for elevations.
 ///   $elevations: (
 ///       small: box-shadow(0 .125rem .25rem rgba(0 0 0 / 75%)),
 ///       medium: box-shadow(0 .25rem .5rem rgba(0 0 0 / 85%)),
@@ -31,7 +31,7 @@
 /// Includes box-shadow styles for an elevation by name
 /// @access public
 /// @param {String} $name - The name of the shadow.
-/// @example scss Include a box shadow by its name.
+/// @example scss - Include a box shadow by its name.
 ///   .my-class {
 ///     @include elevation(small);
 ///   }

package/sass/elevations/presets/_index.scss

@@ -6,17 +6,17 @@
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
 /// @access private
-$color-1: rgba(0 0 0 / 0.26) !default;
+$color-1: rgb(0 0 0 / 0.26) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
 /// @access private
-$color-2: rgba(0 0 0 / 0.12) !default;
+$color-2: rgb(0 0 0 / 0.12) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
 /// @access private
-$color-3: rgba(0 0 0 / 0.08) !default;
+$color-3: rgb(0 0 0 / 0.08) !default;
 
 @forward './material' as material-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);
 @forward './indigo' as indigo-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);

package/sass/elevations/presets/_indigo.scss

@@ -9,27 +9,27 @@
 
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
-$color-1: rgba(0 0 0 / 0.26) !default;
+$color-1: rgb(0 0 0 / 0.26) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
-$color-2: rgba(0 0 0 / 0.12) !default;
+$color-2: rgb(0 0 0 / 0.12) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
-$color-3: rgba(0 0 0 / 0.08) !default;
+$color-3: rgb(0 0 0 / 0.08) !default;
 $_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));
-$_2: box-shadow((0 3px 6px 0 rgba(0 0 0 / 0.3)));
-$_3: box-shadow((0 3px 6px 0 rgba(36 37 44 / 0.2)));
-$_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 0.1)));
-$_5: box-shadow((0 0 12px 0 rgba(36 37 44 / 0.2)));
-$_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 0.2)));
-$_7: box-shadow((0 0 12px 0 rgba(0 0 0 / 0.3)));
-$_8: box-shadow((0 2px 2px 0 rgba(36 37 44 / 0.2)));
-$_9: box-shadow((0 2px 2px 0 rgba(0 0 0 / 0.3)));
-$_10: box-shadow((0 2px 6px 0 rgba(36 37 44 / 0.4)));
-$_11: box-shadow((0 2px 6px 0 rgba(0 0 0 / 0.4)));
-$_12: box-shadow((0 0 16px 0 rgba(36 37 44 / 0.4)));
+$_2: box-shadow((0 3px 6px 0 rgb(0 0 0 / 0.3)));
+$_3: box-shadow((0 3px 6px 0 rgb(36 37 44 / 0.2)));
+$_4: box-shadow((0 2px 12px 0 rgb(36 37 44 / 0.1)));
+$_5: box-shadow((0 0 12px 0 rgb(36 37 44 / 0.2)));
+$_6: box-shadow((0 2px 12px 0 rgb(36 37 44 / 0.2)));
+$_7: box-shadow((0 0 12px 0 rgb(0 0 0 / 0.3)));
+$_8: box-shadow((0 2px 2px 0 rgb(36 37 44 / 0.2)));
+$_9: box-shadow((0 2px 2px 0 rgb(0 0 0 / 0.3)));
+$_10: box-shadow((0 2px 6px 0 rgb(36 37 44 / 0.4)));
+$_11: box-shadow((0 2px 6px 0 rgb(0 0 0 / 0.4)));
+$_12: box-shadow((0 0 16px 0 rgb(36 37 44 / 0.4)));
 $_13: box-shadow((0 7px 8px -4px $color-1, 0 13px 19px 2px $color-2, 0 5px 24px 4px $color-3));
 $_14: box-shadow((0 7px 9px -4px $color-1, 0 14px 21px 2px $color-2, 0 5px 26px 4px $color-3));
 $_15: box-shadow((0 8px 9px -5px $color-1, 0 15px 22px 2px $color-2, 0 6px 28px 5px $color-3));
@@ -40,8 +40,8 @@ $_19: box-shadow((0 9px 12px -6px $color-1, 0 19px 29px 2px $color-2, 0 7px 36px
 $_20: box-shadow((0 10px 13px -6px $color-1, 0 20px 31px 3px $color-2, 0 8px 38px 7px $color-3));
 $_21: box-shadow((0 10px 13px -6px $color-1, 0 21px 33px 3px $color-2, 0 8px 40px 7px $color-3));
 $_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42px 7px $color-3));
-$_23: box-shadow((0 0 16px 0 rgba(0 0 0 / 0.3)));
-$_24: box-shadow((0 0 16px 0 rgba(36 37 44 / 0.4)));
+$_23: box-shadow((0 0 16px 0 rgb(0 0 0 / 0.3)));
+$_24: box-shadow((0 0 16px 0 rgb(36 37 44 / 0.4)));
 
 /// А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
 /// @type Map

package/sass/elevations/presets/_material.scss

@@ -9,15 +9,15 @@
 
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
-$color-1: rgba(0 0 0 / 0.26) !default;
+$color-1: rgb(0 0 0 / 0.26) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
-$color-2: rgba(0 0 0 / 0.12) !default;
+$color-2: rgb(0 0 0 / 0.12) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
-$color-3: rgba(0 0 0 / 0.08) !default;
+$color-3: rgb(0 0 0 / 0.08) !default;
 
 /// All elevation levels
 $_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));

package/sass/tailwind/utilities/_common.scss

@@ -2,7 +2,7 @@
 @use '../../themes/mixins' as *;
 @use '../../themes/functions' as *;
 @use '../../themes/config' as *;
-@use '../_mixins.scss' as *;
+@use '../mixins.scss' as *;
 
 $theme-schemas: () !default;
 

package/sass/themes/_functions.scss

@@ -18,7 +18,7 @@
 /// @requires {function} resolve-value
 /// @requires {function} elevation
 /// @requires {function} chart-brushes
-/// @example scss Get the resolved theme for a schema
+/// @example scss - Get the resolved theme for a schema
 ///   $custom-schema: (
 ///     foreground: (
 ///        color: ('primary', 800, .5)
@@ -26,7 +26,7 @@
 ///     border-radius: (rem(5px), rem(0), rem(8px)) // default, min and max radius
 ///   );
 ///   $theme: digest-schema($custom-schema);
-/// @returns {Map} - A theme map with resolved values.
+/// @returns {Map} A theme map with resolved values.
 @function digest-schema($schema) {
     $result: ();
 
@@ -56,9 +56,9 @@
 /// the function should be called with.
 /// @access private
 /// @param {Map} $instructions - The map to be used as instruction set.
-/// @example scss Resolve primary 500 color
+/// @example scss - Resolve primary 500 color
 ///   $value: resolve-value((color: (primary, 500)));
-/// @returns {dynamic} - The resolved value.
+/// @returns {Map} The resolved value.
 @function resolve-value($instructions) {
     $result: ();
 
@@ -103,11 +103,11 @@
 /// @param {Map} $theme - The source theme to be used to read values from.
 /// @param {String} $property - A key from the theme map to assign as value to the property.
 /// @param {String} $fallback [null] - A value to be used if the CSS property is not defined.
-/// @example scss Assign the color property in a set of rules to a value from the theme.
+/// @example scss - Assign the color property in a set of rules to a value from the theme.
 ///   [part='icon'] {
 ///     color: var-get($theme, 'icon-color', inherit); // var(--icon-color, inherit)
 ///   }
-/// @returns {String} - The CSS reference of the property in the theme.
+/// @returns {String} The CSS reference of the property in the theme.
 @function var-get($theme, $property, $fallback: null) {
     @if map.has-key($theme, $property) {
         $p: --#{$property};
@@ -123,7 +123,7 @@
 /// @param {Number} $radius - The preferred value.
 /// @param {Number} $min [rem(0)] - The minimum value.
 /// @param {Number} $max [$radius] - The maximum allowed value.
-/// @return {Number} - The clamped value
+/// @return {Number} The clamped value
 @function border-radius($radius, $min: #{rem(0)}, $max: $radius) {
     $factor: math.div($radius, $max);
 
@@ -137,9 +137,9 @@
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
 /// @param {Number} $lg [$md] - The preferred value when the component's size is large.
-/// @example
+/// @example scss
 ///   --size: #{sizable(rem(40px), rem(64px), rem(88px))};
-/// @return {Function} - The evaluated value.
+/// @return {Function} The evaluated value.
 @function sizable($sm, $md: $sm, $lg: $md) {
     $sm: max(#{$sm}, -1 * #{$sm});
     $md: max(#{$md}, -1 * #{$md});
@@ -160,11 +160,11 @@
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
 /// @param {Number} $lg [$md] - The preferred value when the component's size is large.
 /// @param {Number} $dir [null] - The preferred direction - inline or block.
-/// @example
+/// @example scss
 ///   .my-component {
 ///     padding: pad(4px, 8px, 16px);
 ///   }
-/// @return {Function} - The evaluated value.
+/// @return {Function} The evaluated value.
 @function pad($sm, $md: $sm, $lg: $md, $dir: null) {
     $spacing: if($dir, --ig-spacing-#{$dir}, --ig-spacing);
     $sm: max(#{$sm}, -1 * #{$sm});
@@ -184,11 +184,11 @@
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
 /// @param {Number} $lg [$md] - The preferred value when the component's size is large.
-/// @example
+/// @example scss
 ///   .my-component {
 ///     padding: pad-inline(4px, 8px, 16px);
 ///   }
-/// @return {Function} - The evaluated value.
+/// @return {Function} The evaluated value.
 @function pad-inline($sm, $md: $sm, $lg: $md) {
     @return pad($sm, $md, $lg, $dir: inline);
 }
@@ -199,11 +199,11 @@
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
 /// @param {Number} $lg [$md] - The preferred value when the component's size is large.
-/// @example
+/// @example scss
 ///   .my-component {
 ///     padding: pad-block(4px, 8px, 16px);
 ///   }
-/// @return {Function} - The evaluated value.
+/// @return {Function} The evaluated value.
 @function pad-block($sm, $md: $sm, $lg: $md) {
     @return pad($sm, $md, $lg, $dir: block);
 }

package/sass/themes/_mixins.scss

@@ -1,4 +1,4 @@
-// stylelint-disable value-no-vendor-prefix
+// stylelint-disable property-no-deprecated
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
@@ -48,7 +48,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 /// rewritten to global token references.
 /// @access private
 /// @param {Map} $theme - A theme map with ignored keys already removed.
-/// @return {List} - A list of emittable key names.
+/// @return {List} A list of emittable key names.
 @function _collect-emittable-keys($theme) {
     $keys: ();
 
@@ -67,7 +67,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 /// @param {*} $value - The original theme property value.
 /// @param {String} $name - The component name (e.g., 'avatar').
 /// @param {List} $keys - The list of emittable keys whose local refs should be rewritten.
-/// @return {String} - The value with all local var references rewritten to global token names.
+/// @return {String} The value with all local var references rewritten to global token names.
 @function _globalize-value($value, $name, $keys) {
     $result: '#{$value}';
 
@@ -182,7 +182,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 /// @param {String} $mode ['global'] - The generation mode: 'global' for universal tokens, 'scoped' for component-level CSS variables.
 /// @param {String} $scope [null] - Only used in 'scoped' mode. Overrides the selector from the theme map.
 /// @param {Map} $ignored [$ignored-keys] - A list of ignored keywords to be excluded when generating tokens.
-/// @example scss Generate universal avatar tokens (global mode)
+/// @example scss - Generate universal avatar tokens (global mode)
 ///   :root {
 ///     @include tokens(avatar-theme($background: red));
 ///   }
@@ -192,7 +192,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 ///   //   --ig-avatar-color: hsla(from color(from var(--ig-avatar-background) ...) ...);
 ///   //   ...
 ///   // }
-/// @example scss Override size with a concrete value (global mode)
+/// @example scss - Override size with a concrete value (global mode)
 ///   :root {
 ///     @include tokens(avatar-theme($size: 2rem));
 ///   }
@@ -201,9 +201,9 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 ///   //   --ig-avatar-size: 2rem;
 ///   //   ...
 ///   // }
-/// @example scss Generate scoped component tokens (scoped mode)
+/// @example scss - Generate scoped component tokens (scoped mode)
 ///   @include tokens(avatar-theme($schema: $schema), $mode: 'scoped');
-/// @example scss Generate scoped component tokens with a custom scope
+/// @example scss - Generate scoped component tokens with a custom scope
 ///   @include tokens(dialog-theme($schema: $schema), $mode: 'scoped', $scope: '.igx-dialog');
 @mixin tokens($theme, $mode: 'global', $scope: null, $ignored: $ignored-keys) {
     @if $mode == 'scoped' {
@@ -236,7 +236,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 /// @param {map} $theme - The component theme to be used.
 /// @param {map} $scope [null] - The CSS variables scope to be used. (optional)
 /// @requires {mixin} tokens
-/// @example scss Convert grid theme colors to css variables
+/// @example scss - Convert grid theme colors to css variables
 ///   $my-grid-theme grid-theme(
 ///     $header-background: red,
 ///     $content-background: #222
@@ -267,7 +267,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 /// @param {number|string} $lines - The number of lines to show
 /// @param {Boolean} $inline - Sets whether an element displays inline-box or box
 /// @param {Boolean} $vertical - Sets whether an element lays out its contents horizontally or vertically
-/// @example scss Truncates text after the fourth line
+/// @example scss - Truncates text after the fourth line
 ///    @include line-clamp(4, true, true);
 @mixin line-clamp($lines, $inline, $vertical) {
     display: if($inline, -webkit-inline-box, -webkit-box);

package/sass/themes/charts/_category-chart-theme.scss

@@ -70,7 +70,7 @@
 /// @param {Number} $y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
 /// @param {Color} $y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis.
 /// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $custom-chart-theme: category-chart-theme($brushes: (red, green, blue));
@@ -264,14 +264,7 @@
 /// category from the typographic scale.
 /// @group typography
 /// @param {Map} $type-scale - A typographic scale as produced by type-scale.
-/// @param {Map} $categories [(
-/// 'title': 'h6',
-/// 'subtitle': 'subtitle-1,
-/// 'x-axis-label-text-style': 'body-2',
-/// 'y-axis-label-text-style': 'body-2',
-/// 'x-axis-title-text-style': 'body-2',
-/// 'y-axis-title-text-style': 'body-2',
-/// )] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories - The categories from the typographic scale used for type styles.
 /// @requires {mixin} type-style
 @mixin category-chart-typography(
     $type-scale,

package/sass/themes/charts/_data-chart-theme.scss

@@ -46,7 +46,7 @@
 /// @param {List} $axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on both axes.
 /// @param {Color} $axis-title-text-color [null] - Sets the color of the title on the X-axis.
 /// @param {String} $axis-title-text-style [null] - Sets the CSS font property for the title on both axes.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $my-chart-theme: data-chart-theme($brushes: (orange, blue, pink));

package/sass/themes/charts/_doughnut-chart-theme.scss

@@ -23,7 +23,7 @@
 /// @param {Number} $selected-slice-opacity [null] - Sets the opacity of the selected slice.
 /// @param {Color} $selected-slice-stroke [null] - Sets the stroke color of the selected slice.
 /// @param {Number} $selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $my-chart-theme: doughnut-chart-theme($brushes: (orange, blue, pink));

package/sass/themes/charts/_financial-chart-theme.scss

@@ -75,7 +75,7 @@
 /// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
 /// @param {String} $zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane.
 /// @param {Number} $zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $my-chart-theme: financial-chart-theme($title-alignment: left, $brushes: red, blue, yellow, pink);
@@ -271,14 +271,7 @@
 /// category from the typographic scale.
 /// @group typography
 /// @param {Map} $type-scale - A typographic scale as produced by type-scale.
-/// @param {Map} $categories [(
-/// 'title': 'h6',
-/// 'subtitle': 'subtitle-1,
-/// 'x-axis-label-text-style': 'body-2',
-/// 'y-axis-label-text-style': 'body-2',
-/// 'x-axis-title-text-style': 'body-2',
-/// 'y-axis-title-text-style': 'body-2',
-/// )] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories - The categories from the typographic scale used for type styles.
 /// @requires {mixin} type-style
 @mixin financial-chart-typography(
     $type-scale,

package/sass/themes/charts/_funnel-chart-theme.scss

@@ -24,7 +24,7 @@
 /// @param {Number} $outline-thickness [null] - Sets the thickness of outline around slices.
 /// @param {Color} $text-color - [null] Sets the Color used for the inner labels.
 ///
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $my-chart-theme: funnel-chart-theme($brushes: (orange, blue, pink));

package/sass/themes/charts/_gauge-theme.scss

@@ -37,7 +37,7 @@
 /// @param {Number} $scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline.
 /// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.
 /// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $custom-gauge-theme: linear-gauge-theme($brushes: (red, green, blue));
@@ -85,7 +85,7 @@
 /// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
 /// @param {Color} $needle-pivot-brush [null] - Sets the color of the needle pivot point.
 /// @param {Color} $needle-pivot-outline [null] - Sets the outline color of the needle pivot point.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $custom-gauge-theme: radial-gauge-theme($brushes: (red, green, blue));

package/sass/themes/charts/_geo-map-theme.scss

@@ -17,7 +17,7 @@
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {String} $plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $my-map-theme: geo-map-theme($width: 550px);

package/sass/themes/charts/_graph-theme.scss

@@ -36,7 +36,7 @@
 /// @param {Color} $value-brush [null] - Sets the brush to use for the actual value element.
 /// @param {Color} $value-outline [null] - Sets the brush to use for the outline of actual value element.
 /// @param {Number} $value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $my-chart-theme: bullet-graph-theme($brushes: (orange, blue, pink));

package/sass/themes/charts/_pie-chart-theme.scss

@@ -26,7 +26,7 @@
 /// @param {String} $leader-line-type [null] - Sets what type of leader lines will be used for the outside end labels. Valid values are: 'straight', 'spline', and 'arc'.
 /// @param {String} $leader-line-visibility [null] - Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'.
 /// @param {Number} $radius-factor [null] - Sets the scaling factor of the chart's radius. Value between 0 and 1.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $my-chart-theme: pie-chart-theme($brushes: (red, orange, blue));