igniteui-theming 25.0.0 → 25.0.2

package/sass/themes/components/icon-button/_flat-icon-button-theme.scss

@@ -43,7 +43,7 @@
 /// @param {Color} $disabled-border-color [null] - Border color when disabled.
 /// @param {Length} $size [null] - Size of the icon button.
 /// @requires $light-material-schema
-/// @return {Map} - A map containing the theme name, selector, and theme values for the flat icon button.
+/// @return {Map} A map containing the theme name, selector, and theme values for the flat icon button.
 @function flat-icon-button-theme(
     $schema: $light-material-schema,
 
@@ -127,16 +127,16 @@
         }
 
         @if not($hover-background) and $foreground {
-            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+            $hover-background: hsl(from var(--foreground) h s l / 0.08);
         }
 
         @if $variant == 'material' {
             @if not($focus-background) and $foreground {
-                $focus-background: hsla(from var(--foreground) h s l / 0.16);
+                $focus-background: hsl(from var(--foreground) h s l / 0.16);
             }
 
             @if not($focus-hover-background) and $foreground {
-                $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+                $focus-hover-background: hsl(from var(--foreground) h s l / 0.24);
             }
         } @else {
             @if not($focus-hover-background) and $hover-background {
@@ -145,25 +145,25 @@
         }
 
         @if not($active-background) and $foreground {
-            $active-background: hsla(from var(--foreground) h s l / 0.24);
+            $active-background: hsl(from var(--foreground) h s l / 0.24);
         }
     }
 
     @if $variant == 'indigo' {
         @if not($hover-background) and $foreground {
-            $hover-background: hsla(from var(--foreground) h s l / 0.15);
+            $hover-background: hsl(from var(--foreground) h s l / 0.15);
         }
 
         @if not($focus-background) and $foreground {
-            $focus-background: hsla(from var(--foreground) h s l / 0.15);
+            $focus-background: hsl(from var(--foreground) h s l / 0.15);
         }
 
         @if not($focus-hover-background) and $foreground {
-            $focus-hover-background: hsla(from var(--foreground) h s l / 0.15);
+            $focus-hover-background: hsl(from var(--foreground) h s l / 0.15);
         }
 
         @if not($active-background) and $foreground {
-            $active-background: hsla(from var(--foreground) h s l / 0.15);
+            $active-background: hsl(from var(--foreground) h s l / 0.15);
         }
     }
 
@@ -181,7 +181,7 @@
         }
 
         @if not($disabled-foreground) and $foreground {
-            $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+            $disabled-foreground: hsl(from var(--foreground) h s l / 0.5);
         }
 
         @if $variant == 'bootstrap' {
@@ -190,7 +190,7 @@
             }
 
             @if not($shadow-color) and $foreground {
-                $shadow-color: hsla(from var(--foreground) h s l / 0.5);
+                $shadow-color: hsl(from var(--foreground) h s l / 0.5);
             }
         } @else {
             @if not($active-foreground) and $hover-foreground {
@@ -198,7 +198,7 @@
             }
 
             @if not($focus-border-color) and $foreground {
-                $focus-border-color: hsla(from var(--foreground) h s l / 0.3);
+                $focus-border-color: hsl(from var(--foreground) h s l / 0.3);
             }
         }
     }

package/sass/themes/components/icon-button/_icon-button-theme.scss

@@ -48,10 +48,10 @@
 /// @param {Color} $disabled-border-color [null] - Border color when disabled.
 /// @param {Length} $size [null] - Size of the icon button.
 /// @requires $light-material-schema
-/// @return {Map} - A map containing the theme name, variant, and themes for the icon button.
-/// @see flat-icon-button-theme
-/// @see contained-icon-button-theme
-/// @see outlined-icon-button-theme
+/// @return {Map} A map containing the theme name, variant, and themes for the icon button.
+/// @see {function} flat-icon-button-theme
+/// @see {function} contained-icon-button-theme
+/// @see {function} outlined-icon-button-theme
 @function icon-button-theme(
     $schema: $light-material-schema,
 

package/sass/themes/components/icon-button/_outlined-icon-button-theme.scss

@@ -43,7 +43,7 @@
 /// @param {Color} $disabled-border-color [null] - Border color when disabled. Auto-derived from border-color (bootstrap/indigo).
 /// @param {Length} $size [null] - Size of the icon button.
 /// @requires $light-material-schema
-/// @return {Map} - A map containing the theme name, selector, and theme values for the outlined icon button.
+/// @return {Map} A map containing the theme name, selector, and theme values for the outlined icon button.
 @function outlined-icon-button-theme(
     $schema: $light-material-schema,
 
@@ -128,24 +128,24 @@
         }
 
         @if not($hover-background) and $foreground {
-            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+            $hover-background: hsl(from var(--foreground) h s l / 0.08);
         }
 
         @if not($active-background) and $foreground {
-            $active-background: hsla(from var(--foreground) h s l / 0.24);
+            $active-background: hsl(from var(--foreground) h s l / 0.24);
         }
 
         @if $variant == 'material' {
             @if not($focus-background) and $foreground {
-                $focus-background: hsla(from var(--foreground) h s l / 0.16);
+                $focus-background: hsl(from var(--foreground) h s l / 0.16);
             }
 
             @if not($focus-hover-background) and $foreground {
-                $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+                $focus-hover-background: hsl(from var(--foreground) h s l / 0.24);
             }
 
             @if not($border-color) and $foreground {
-                $border-color: hsla(from var(--foreground) h s l / 0.4);
+                $border-color: hsl(from var(--foreground) h s l / 0.4);
             }
         } @else {
             @if not($focus-hover-background) and $hover-background {
@@ -157,14 +157,14 @@
             }
 
             @if not($border-color) and $foreground {
-                $border-color: hsla(from var(--foreground) h s l / 0.7);
+                $border-color: hsl(from var(--foreground) h s l / 0.7);
             }
         }
     }
 
     @if $variant == 'indigo' {
         @if not($border-color) and $foreground {
-            $border-color: hsla(from var(--foreground) h s l / 0.8);
+            $border-color: hsl(from var(--foreground) h s l / 0.8);
         }
 
         @if not($hover-foreground) and $foreground {
@@ -172,7 +172,7 @@
         }
 
         @if not($hover-background) and $foreground {
-            $hover-background: hsla(from var(--foreground) h s l / 0.1);
+            $hover-background: hsl(from var(--foreground) h s l / 0.1);
         }
 
         @if not($focus-foreground) and $foreground {
@@ -180,7 +180,7 @@
         }
 
         @if not($focus-border-color) and $foreground {
-            $focus-border-color: hsla(from var(--foreground) h s l / 0.2);
+            $focus-border-color: hsl(from var(--foreground) h s l / 0.2);
         }
 
         @if not($focus-hover-foreground) and $hover-foreground {
@@ -234,17 +234,17 @@
         }
 
         @if not($shadow-color) and $focus-background {
-            $shadow-color: hsla(from var(--focus-background) h s l / 0.5);
+            $shadow-color: hsl(from var(--focus-background) h s l / 0.5);
         }
     }
 
     @if $variant == 'bootstrap' or $variant == 'indigo' {
         @if not($disabled-foreground) and $foreground {
-            $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+            $disabled-foreground: hsl(from var(--foreground) h s l / 0.5);
         }
 
         @if not($disabled-border-color) and $border-color {
-            $disabled-border-color: hsla(from var(--border-color) h s l / 0.2);
+            $disabled-border-color: hsl(from var(--border-color) h s l / 0.2);
         }
     }
 

package/sass/themes/components/input/_file-input-theme.scss

@@ -37,7 +37,7 @@
 /// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when focused. Auto-derived from file-selector-button-background--focused.
 /// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when filled. Auto-derived from file-selector-button-background--filled.
 /// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when disabled. Auto-derived from file-selector-button-background--disabled.
-/// @example scss Change the focused border and label colors
+/// @example scss - Change the focused border and label colors
 ///   $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-file-input-theme);

package/sass/themes/components/input/_input-theme.scss

@@ -36,7 +36,7 @@
 /// @param {Color} $input-prefix-color [null] - The input prefix color in the idle state. Auto-derived from box/search-background.
 /// @param {Color} $input-prefix-background [null] - The background color of an input prefix in the idle state. Synced with suffix-background.
 /// @param {Color} $input-prefix-color--filled [null] - The input prefix color in the filled state. Auto-derived from prefix-color or background.
-/// @param {Color} $input-prefix-background--filled] - The background color of an input prefix in the filled state.
+/// @param {Color} $input-prefix-background--filled - The background color of an input prefix in the filled state.
 /// @param {Color} $input-prefix-color--focused [null] - The input prefix color in the focused state. Auto-derived from prefix-color--filled or background.
 /// @param {Color} $input-prefix-background--focused [null] - The background color of an input prefix in the focused state.
 /// @param {Color} $input-suffix-color [null] - The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color.
@@ -63,19 +63,19 @@
 /// @param {Color} $border-disabled-background [null] - The background color of an input group of type border in the disabled state.
 /// @param {Color} $search-background [null] - The background color of an input group of type search. PRIMARY for search inputs.
 /// @param {Color} $search-disabled-background [null] - The background color of an input group of type search in the disabled state. Auto-derived from search-background.
-/// @param {box-shadow} $search-resting-shadow [null] - The shadow color of an input group of type search in its resting state.
-/// @param {box-shadow} $search-hover-shadow [null] - The shadow color of an input group of type search in its hover state.
-/// @param {box-shadow} $search-disabled-shadow [null] - The shadow color of an input group of type search in its disabled state.
+/// @param {List} $search-resting-shadow [null] - The shadow color of an input group of type search in its resting state.
+/// @param {List} $search-hover-shadow [null] - The shadow color of an input group of type search in its hover state.
+/// @param {List} $search-disabled-shadow [null] - The shadow color of an input group of type search in its disabled state.
 /// @param {Color} $success-secondary-color [null] - The success color used in the valid state.
 /// @param {Color} $warning-secondary-color [null] - The warning color used in the warning state.
 /// @param {Color} $error-secondary-color [null] - The error color used in the error state.
 /// @param {List} $box-border-radius [null] - The border radius used for box input.
 /// @param {List} $border-border-radius [null] - The border radius used for border input.
 /// @param {List} $search-border-radius [null] - The border radius used for search input.
-/// @param {Color} placeholder-color [null] - The placeholder color of an input group. Auto-derived from box/search-background.
-/// @param {Color} hover-placeholder-color [null] - The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color.
-/// @param {Color} disabled-placeholder-color [null] - The disabled placeholder color of an input group. Auto-derived from disabled background.
-/// @example scss Change the focused border and label colors
+/// @param {Color} $placeholder-color [null] - The placeholder color of an input group. Auto-derived from box/search-background.
+/// @param {Color} $hover-placeholder-color [null] - The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color.
+/// @param {Color} $disabled-placeholder-color [null] - The disabled placeholder color of an input group. Auto-derived from disabled background.
+/// @example scss - Change the focused border and label colors
 ///   $my-input-group-theme: input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-input-group-theme);
@@ -176,11 +176,11 @@
         }
 
         @if not($placeholder-color) and $box-background {
-            $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+            $placeholder-color: hsl(from adaptive-contrast(var(--box-background)) h s l / 0.9);
         }
 
         @if not($hover-placeholder-color) and $box-background-hover {
-            $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.9);
+            $hover-placeholder-color: hsl(from adaptive-contrast(var(--box-background-hover)) h s l / 0.9);
         }
 
         @if not($idle-text-color) and $box-background {
@@ -200,11 +200,11 @@
         }
 
         @if not($idle-secondary-color) and $box-background {
-            $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+            $idle-secondary-color: hsl(from adaptive-contrast(var(--box-background)) h s l / 0.9);
         }
 
         @if not($input-prefix-color) and $box-background {
-            $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+            $input-prefix-color: hsl(from adaptive-contrast(var(--box-background)) h s l / 0.9);
         }
 
         @if not($input-prefix-color--filled) and $box-background {
@@ -216,7 +216,7 @@
         }
 
         @if not($input-suffix-color) and $box-background {
-            $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+            $input-suffix-color: hsl(from adaptive-contrast(var(--box-background)) h s l / 0.9);
         }
 
         @if not($input-suffix-color--filled) and $box-background {
@@ -229,7 +229,7 @@
 
         @if $box-background != transparent {
             @if not($box-disabled-background) and $box-background {
-                $box-disabled-background: hsla(from var(--box-background) h s l / 0.4);
+                $box-disabled-background: hsl(from var(--box-background) h s l / 0.4);
             }
 
             @if not($disabled-placeholder-color) and $box-disabled-background {
@@ -245,11 +245,11 @@
             }
 
             @if not($disabled-placeholder-color) and $placeholder-color {
-                $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
+                $disabled-placeholder-color: hsl(from var(--placeholder-color) h s l / 0.7);
             }
 
             @if not($disabled-text-color) and $idle-text-color {
-                $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
+                $disabled-text-color: hsl(from var(--idle-text-color) h s l / 0.7);
             }
         }
     }
@@ -292,7 +292,7 @@
         }
 
         @if not($focused-secondary-color) and $focused-border-color {
-            $focused-secondary-color: hsla(from var(--focused-border-color) h s l / 0.4);
+            $focused-secondary-color: hsl(from var(--focused-border-color) h s l / 0.4);
         }
     } @else {
         @if not($hover-border-color) and $border-color {
@@ -318,7 +318,7 @@
 
     // search input
     @if not($placeholder-color) and $search-background {
-        $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+        $placeholder-color: hsl(from adaptive-contrast(var(--search-background)) h s l / 0.9);
     }
 
     @if not($hover-placeholder-color) and $placeholder-color {
@@ -352,11 +352,11 @@
     }
 
     @if not($input-prefix-color) and $search-background {
-        $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+        $input-prefix-color: hsl(from adaptive-contrast(var(--search-background)) h s l / 0.9);
     }
 
     @if not($input-suffix-color) and $search-background {
-        $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+        $input-suffix-color: hsl(from adaptive-contrast(var(--search-background)) h s l / 0.9);
     }
 
     @if $variant != 'indigo' {
@@ -379,7 +379,7 @@
 
     @if $search-background != transparent {
         @if not($search-disabled-background) and $search-background {
-            $search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
+            $search-disabled-background: hsl(from var(--search-background) h s l / 0.4);
         }
 
         @if not($disabled-placeholder-color) and $search-disabled-background {
@@ -395,11 +395,11 @@
         }
 
         @if not($disabled-placeholder-color) and $placeholder-color {
-            $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
+            $disabled-placeholder-color: hsl(from var(--placeholder-color) h s l / 0.7);
         }
 
         @if not($disabled-text-color) and $idle-text-color {
-            $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
+            $disabled-text-color: hsl(from var(--idle-text-color) h s l / 0.7);
         }
     }
 

package/sass/themes/components/list/_list-theme.scss

@@ -54,7 +54,7 @@
 /// @param {Color} $border-width [null] - The list border width.
 /// @param {Number} $border-color [null] - The list border color. Auto-derived from item-background (fluent/bootstrap).
 /// @requires $light-material-schema
-/// @example scss Change the list background color
+/// @example scss - Change the list background color
 ///   $my-list-theme: list-theme($background: black);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-list-theme);
@@ -154,7 +154,7 @@
     }
 
     @if not($item-subtitle-color) and $item-text-color {
-        $item-subtitle-color: hsla(from var(--item-text-color) h s l / 0.74);
+        $item-subtitle-color: hsl(from var(--item-text-color) h s l / 0.74);
     }
 
     @if not($item-subtitle-color) and $item-text-color {
@@ -178,7 +178,7 @@
     }
 
     @if not($item-subtitle-color-hover) and $item-text-color-hover {
-        $item-subtitle-color-hover: hsla(from var(--item-text-color-hover) h s l / 0.74);
+        $item-subtitle-color-hover: hsl(from var(--item-text-color-hover) h s l / 0.74);
     }
 
     @if not($item-text-color-active) and $item-background-active {
@@ -214,11 +214,11 @@
     }
 
     @if not($item-subtitle-color-active) and $item-text-color-active {
-        $item-subtitle-color-active: hsla(from var(--item-text-color-active) h s l / 0.74);
+        $item-subtitle-color-active: hsl(from var(--item-text-color-active) h s l / 0.74);
     }
 
     @if not($item-subtitle-color-selected) and $item-text-color-selected {
-        $item-subtitle-color-selected: hsla(from var(--item-text-color-selected) h s l / 0.74);
+        $item-subtitle-color-selected: hsl(from var(--item-text-color-selected) h s l / 0.74);
     }
 
     @if not($item-subtitle-color-active) and $item-text-color-active {
@@ -231,7 +231,7 @@
 
     @if $variant == 'fluent' or $variant == 'bootstrap' {
         @if not($border-color) and $item-background {
-            $border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.15);
+            $border-color: hsl(from adaptive-contrast(var(--item-background)) h s l / 0.15);
         }
     }
 

package/sass/themes/components/navbar/_navbar-theme.scss

@@ -25,12 +25,12 @@
 /// @param {Color} $background [null] - The navbar background color. PRIMARY - derives text-color and icon colors.
 /// @param {Color} $text-color [null] - The navbar text color. Auto-derived from background.
 /// @param {Color} $border-color [null] - The navbar border color. Auto-derived from background (indigo).
-/// @param {box-shadow} $shadow [null] - The shadow of the navbar.
+/// @param {List} $shadow [null] - The shadow of the navbar.
 /// @param {Color} $idle-icon-color [null] - The navbar idle icon color. Auto-derived from background.
 /// @param {Color} $hover-icon-color [null] - The navbar hover icon color. Auto-derived from idle-icon-color or background.
 /// @param {Bool} $disable-shadow [true] - Sets the navbar shadow visibility.
 /// @requires $light-material-schema
-/// @example scss Change the background color
+/// @example scss - Change the background color
 ///   $my-navbar-theme: navbar-theme($background: green);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-navbar-theme);
@@ -70,11 +70,11 @@
 
     @if $variant == 'indigo' {
         @if not($border-color) and $background {
-            $border-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.3);
+            $border-color: hsl(from adaptive-contrast(var(--background)) h s l / 0.3);
         }
 
         @if not($hover-icon-color) and $background {
-            $hover-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.7);
+            $hover-icon-color: hsl(from adaptive-contrast(var(--background)) h s l / 0.7);
         }
     } @else {
         @if not($hover-icon-color) and $background {

package/sass/themes/components/navdrawer/_navdrawer-theme.scss

@@ -40,7 +40,7 @@
 /// @param {List} $border-radius [null] - The border radius used for the navdrawer.
 /// @param {List} $item-border-radius [null] - The border radius used for the navdrawer item.
 /// @requires $light-material-schema
-/// @example scss Change the background and item colors
+/// @example scss - Change the background and item colors
 ///   $navdrawer-theme: navdrawer-theme(
 ///     $background: #2d313a,
 ///     $item-active-background: #ecc256,
@@ -121,11 +121,11 @@
     }
 
     @if not($item-disabled-text-color) and $background {
-        $item-disabled-text-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.38);
+        $item-disabled-text-color: hsl(from adaptive-contrast(var(--background)) h s l / 0.38);
     }
 
     @if not($item-disabled-icon-color) and $background {
-        $item-disabled-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.38);
+        $item-disabled-icon-color: hsl(from adaptive-contrast(var(--background)) h s l / 0.38);
     }
 
     @if not($shadow) {

package/sass/themes/components/overlay/_overlay-theme.scss

@@ -21,7 +21,7 @@
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Color} $background-color [null] - The background color used for modal overlays.
 /// @requires $light-material-schema
-/// @example scss Change the background color
+/// @example scss - Change the background color
 ///   $my-overlay-theme: overlay-theme($background-color: rgba(yellow, .74));
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-overlay-theme);

package/sass/themes/components/paginator/_paginator-theme.scss

@@ -26,7 +26,7 @@
 /// @param {Color} $background-color [rgba(0, 0, 0, .04)] - The background color of the paging panel. PRIMARY - derives text-color.
 /// @param {Color} $border-color [rgba(0, 0, 0, .26)] - The border color of the paging panel.
 /// @requires $light-material-schema
-/// @example scss Change the stripes color
+/// @example scss - Change the stripes color
 ///   $my-paginator-theme: paginator-theme(
 ///     $stripes-color: orange
 ///   );

package/sass/themes/components/progress/_circular-theme.scss

@@ -31,7 +31,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the circle progress color
+/// @example scss - Change the circle progress color
 ///   $my-progress-circular-theme: progress-circular-theme(
 ///     $fill-color-default: purple
 ///   );

package/sass/themes/components/progress/_linear-theme.scss

@@ -30,7 +30,7 @@
 /// @param {Number} $track-height [null] - The linear progress track height.
 /// @param {Number} $strip-size [null] - The linear progress bar strip width.
 /// @requires $light-material-schema
-/// @example scss Change the stripes color
+/// @example scss - Change the stripes color
 ///   $my-progress-linear-theme: progress-linear-theme(
 ///     $stripes-color: orange
 ///   );

package/sass/themes/components/query-builder/_query-builder-theme.scss

@@ -39,7 +39,7 @@
 /// @param {Color} $color-expression-group-and [null] - The color of advanced filtering "AND" condition group.
 /// @param {Color} $color-expression-group-or [null] - The color of advanced filtering "OR" condition group.
 ///
-/// @example scss Set custom query-builder colors
+/// @example scss - Set custom query-builder colors
 ///   $my-query-builder-theme: query-builder-theme($background: red);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-query-builder-theme);
@@ -71,7 +71,7 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     @if not($label-foreground) and $background {
-        $label-foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.6);
+        $label-foreground: hsl(from adaptive-contrast(var(--background)) h s l / 0.6);
     }
 
     @if not($header-background) and $background {

package/sass/themes/components/radio/_radio-theme.scss

@@ -46,7 +46,7 @@
 /// @requires $light-material-schema
 ///
 /// Set light to true when the surrounding area is dark.
-/// @example scss Change the checked dot and border colors
+/// @example scss - Change the checked dot and border colors
 ///   $my-radio-theme: radio-theme($fill-color: magenta);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-radio-theme);
@@ -106,7 +106,7 @@
     }
 
     @if not($focus-outline-color-error) and $error-color {
-        $focus-outline-color-error: hsla(from var(--error-color) h s l / 0.5);
+        $focus-outline-color-error: hsl(from var(--error-color) h s l / 0.5);
     }
 
     @if $variant == 'bootstrap' {
@@ -115,17 +115,17 @@
         }
 
         @if not($focus-outline-color) and $fill-color {
-            $focus-outline-color: hsla(from var(--fill-color) h s l / 0.5);
+            $focus-outline-color: hsl(from var(--fill-color) h s l / 0.5);
         }
     }
 
     @if $variant == 'indigo' {
         @if not($focus-outline-color) and $empty-color {
-            $focus-outline-color: hsla(from var(--empty-color) h s l / 0.5);
+            $focus-outline-color: hsl(from var(--empty-color) h s l / 0.5);
         }
 
         @if not($focus-outline-color-filled) and $fill-color {
-            $focus-outline-color-filled: hsla(from var(--fill-color) h s l / 0.5);
+            $focus-outline-color-filled: hsl(from var(--fill-color) h s l / 0.5);
         }
     }
 

package/sass/themes/components/rating/_rating-theme.scss

@@ -31,7 +31,7 @@
 /// @param {Color} $disabled-empty-symbol-color [null] - sets the idle color for the symbol in disabled state when it is a plane text.
 /// @param {Color} $disabled-full-symbol-color [null] - sets the color for the symbol in selected/disabled state when it is a plane text.
 /// @requires $light-material-schema
-/// @example scss Change the rating filled symbol color
+/// @example scss - Change the rating filled symbol color
 ///   $my-rating-theme: rating-theme($symbol-full-color: red);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-rating-theme);

package/sass/themes/components/ripple/_ripple-theme.scss

@@ -20,7 +20,7 @@
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Color} $color [null] - The color of the ripple.
 /// @requires $light-material-schema
-/// @example scss Change the color
+/// @example scss - Change the color
 ///   $my-ripple-theme: igx-ripple-theme($color: yellow);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-ripple-theme);

package/sass/themes/components/scrollbar/_scrollbar-theme.scss

@@ -33,7 +33,7 @@
 /// @param {Color} $sb-corner-border-color [null] - The border color of the corner.
 /// @param {String | Number} $sb-corner-border-size [null] - The border size of the corner.
 /// @requires $light-material-schema
-/// @example scss Change the background and track colors
+/// @example scss - Change the background and track colors
 ///   $my-scrollbar-theme: scrollbar-theme($sb-thumb-bg-color: black, $sb-track-bg-color: gray);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-scrollbar-theme);

package/sass/themes/components/select/_select-theme.scss

@@ -31,7 +31,7 @@
 /// @param {Color} $toggle-button-foreground-disabled [null] - The select toggle button foreground color when the select is disabled.
 /// @param {Color} $toggle-button-foreground-filled [null] - The select toggle button foreground color when the select is filled. Auto-derived from toggle-button-background.
 /// @param {Color} $toggle-button-background-focus--border [null] - The select toggle button background color when the select is focused in material border variant. Auto-derived from toggle-button-background (bootstrap/indigo).
-/// @example scss Change the select empty list background
+/// @example scss - Change the select empty list background
 ///   $my-select-theme: igx-select-theme($empty-list-background);
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-select-theme);