igniteui-theming 25.0.0 → 25.0.2

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

@@ -56,7 +56,7 @@
 /// @param {String} $y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title.
 /// @param {Color} $y-axis-title-color [null] - Sets color of title on the Y-axis.
 /// @param {List} $y-axis-title-margin [null] - Sets the margin around the title on the Y-axis.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $my-chart-theme: shape-chart-theme($brushes: (orange, blue, pink));
@@ -216,14 +216,7 @@
 /// category from the typographic scale.
 /// @group typography
 /// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
-/// @param {Map} $categories [(
-/// 'title': 'h6',
-/// 'subtitle': 'subtitle-1,
-/// 'x-axis-label-text-style': 'h4',
-/// 'y-axis-label-text-style': 'h4',
-/// 'x-axis-title-text-style': 'h3',
-/// 'y-axis-title-text-style': 'h3',
-/// )] - 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 shape-chart-typography(
     $type-scale,

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

@@ -29,13 +29,13 @@
 /// @param {Number} $high-marker-size [null] - Sets the high marker size of the sparkline.
 /// @param {Color} $negative-brush [null] - Sets the negative brush of the sparkline.
 /// @param {Color} $negative-marker-brush [null] - Sets the negative marker brush of the sparkline.
-/// @param {Number} $negative marker-size [null] - Sets the negative marker size of the sparkline.
+/// @param {Number} $negative-marker-size [null] - Sets the negative marker size of the sparkline.
 /// @param {Color} $trend-line-brush [null] - Sets the trendline brush of the sparkline.
 /// @param {Color} $trend-line-thickness [null] - Sets the thickness of the sparkline's trendline.
 /// @param {Color} $horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline.
 /// @param {Color} $vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline.
 /// @param {Color} $normal-range-fill [null] - Sets the normal range brush of the sparkline.
-/// @requires extend
+/// @requires {function} extend
 ///
 /// @example scss
 ///   $my-sparkline-theme: sparkline-theme($brushes: (orange, blue, pink));

package/sass/themes/components/action-strip/_action-strip-theme.scss

@@ -27,7 +27,7 @@
 /// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
 /// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component.
 ///
-/// @example scss Change the background and icon colors in action strip
+/// @example scss - Change the background and icon colors in action strip
 ///   $my-action-strip-theme: action-strip-theme($background: black);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-action-strip-theme);

package/sass/themes/components/avatar/_avatar-theme.scss

@@ -27,9 +27,9 @@
 /// @param {Color} $icon-color [null] - The icon color used of the avatar. Auto-derived from background.
 /// @param {Number} $border-radius [null] - The border-radius used of the avatar.
 /// @param {Number} $size [null] - The size of the avatar.
-/// @requires $light-material-schema
+/// @requires {variable} $light-material-schema
 ///
-/// @example scss Change the background and icon colors in icon avatars
+/// @example scss - Change the background and icon colors in icon avatars
 ///   $my-avatar-theme: avatar-theme($icon-background: black, $icon-color: white);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-avatar-theme);

package/sass/themes/components/badge/_badge-theme.scss

@@ -26,13 +26,13 @@
 /// @param {Color} $text-color [null] - The text color used. Auto-derived from background-color.
 /// @param {Color} $border-color [null] - The border color used.
 /// @param {Color} $background-color [null] - The background color used. PRIMARY - derives icon-color and text-color.
-/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.
+/// @param {List} $shadow [null] - Sets a shadow to be used for the badge.
 /// @param {Number} $border-radius [null] - The border radius used for badge component.
 /// @param {Number} $size [null] - The size of the badge component.
 /// @param {Number} $dot-size [null] - The size of the dot type badge.
 /// @requires $light-material-schema
 ///
-/// @example scss Change the text and icon colors in a badge
+/// @example scss - Change the text and icon colors in a badge
 ///   $my-badge-theme: badge-theme($icon-color: black, $background-color: white);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-badge-theme);

package/sass/themes/components/banner/_banner-theme.scss

@@ -29,7 +29,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the background in banner
+/// @example scss - Change the background in banner
 ///   $my-banner-theme: banner-theme($banner-background: #000);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-banner-theme);

package/sass/themes/components/bottom-nav/_bottom-nav-theme.scss

@@ -32,9 +32,9 @@
 /// @param {Color} $icon-disabled-color [null] - The disabled color of the icon. Auto-derived from label-disabled-color if not set.
 /// @param {Color} $label-disabled-color [null] - The disabled color of the label. Auto-derived from label-color.
 /// @param {Color} $border-color [null] - The border color of the bottom navigation.
-/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the bar.
+/// @param {List | Number} $shadow [null] - Sets a shadow to be used for the bar.
 /// @requires $light-material-schema
-/// @example scss Set a custom background color
+/// @example scss - Set a custom background color
 ///   $my-bottom-nav-theme: bottom-nav-theme($background: black);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-bottom-nav-theme);

package/sass/themes/components/button/_button-theme.scss

@@ -61,17 +61,17 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the background and text colors in contained buttons
+/// @example scss - Change the background and text colors in contained buttons
 ///   $my-button-theme: button-theme(
 ///     $foreground: white,
 ///     $background: black
 ///   );
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-button-theme);
-/// @see flat-button-theme
-/// @see contained-button-theme
-/// @see outlined-button-theme
-/// @see fab-button-theme
+/// @see {function} flat-button-theme
+/// @see {function} contained-button-theme
+/// @see {function} outlined-button-theme
+/// @see {function} fab-button-theme
 @function button-theme(
     $schema: $light-material-schema,
 

package/sass/themes/components/button/_contained-button-theme.scss

@@ -55,7 +55,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the background and text colors in contained buttons
+/// @example scss - Change the background and text colors in contained buttons
 ///   $my-button-theme: contained-button-theme(
 ///     $foreground: white,
 ///     $background: black
@@ -232,11 +232,11 @@
 
     @if $variant == 'bootstrap' or $variant == 'indigo' {
         @if not($shadow-color) and $focus-visible-background {
-            $shadow-color: hsla(from var(--focus-visible-background) h s l / 0.5);
+            $shadow-color: hsl(from var(--focus-visible-background) h s l / 0.5);
         }
 
         @if not($disabled-background) and $background {
-            $disabled-background: hsla(from var(--background) h s l / 0.5);
+            $disabled-background: hsl(from var(--background) h s l / 0.5);
         }
 
         @if not($disabled-icon-color) and $disabled-foreground {
@@ -244,11 +244,11 @@
         }
 
         @if not($disabled-foreground) and $disabled-background {
-            $disabled-foreground: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+            $disabled-foreground: hsl(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
         }
 
         @if not($disabled-icon-color) and $disabled-background {
-            $disabled-icon-color: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+            $disabled-icon-color: hsl(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
         }
     }
 

package/sass/themes/components/button/_fab-button-theme.scss

@@ -56,7 +56,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the background and text colors in fab buttons
+/// @example scss - Change the background and text colors in fab buttons
 ///   $my-button-theme: fab-button-theme(
 ///     $foreground: white,
 ///     $background: black
@@ -209,11 +209,11 @@
 
     @if $variant == 'bootstrap' or $variant == 'indigo' {
         @if not($shadow-color) and $focus-visible-background {
-            $shadow-color: hsla(from var(--focus-visible-background) h s l / 0.5);
+            $shadow-color: hsl(from var(--focus-visible-background) h s l / 0.5);
         }
 
         @if not($disabled-background) and $background {
-            $disabled-background: hsla(from var(--background) h s l / 0.5);
+            $disabled-background: hsl(from var(--background) h s l / 0.5);
         }
 
         @if not($disabled-icon-color) and $disabled-foreground {
@@ -221,11 +221,11 @@
         }
 
         @if not($disabled-foreground) and $disabled-background {
-            $disabled-foreground: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+            $disabled-foreground: hsl(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
         }
 
         @if not($disabled-icon-color) and $disabled-background {
-            $disabled-icon-color: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+            $disabled-icon-color: hsl(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
         }
     }
 

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

@@ -53,7 +53,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the text colors in flat buttons
+/// @example scss - Change the text colors in flat buttons
 ///   $my-button-theme: flat-button-theme(
 ///     $foreground: black,
 ///   );
@@ -152,23 +152,23 @@
 
     @if $variant == 'material' or $variant == 'fluent' {
         @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($focus-background) and $foreground {
-            $focus-background: hsla(from var(--foreground) h s l / 0.32);
+            $focus-background: hsl(from var(--foreground) h s l / 0.32);
         }
 
         @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($active-background) and $foreground {
-            $active-background: hsla(from var(--foreground) h s l / 0.16);
+            $active-background: hsl(from var(--foreground) h s l / 0.16);
         }
 
         @if not($hover-foreground) and $hover-background {
-            $hover-foreground: hsla(from var(--hover-background) h s l / 1);
+            $hover-foreground: hsl(from var(--hover-background) h s l / 1);
         }
 
         @if not($icon-color-hover) and $hover-foreground {
@@ -176,24 +176,24 @@
         }
 
         @if not($focus-foreground) and $focus-background {
-            $focus-foreground: hsla(from var(--focus-background) h s l / 1);
+            $focus-foreground: hsl(from var(--focus-background) h s l / 1);
         }
 
         @if not($focus-hover-foreground) and $focus-hover-background {
-            $focus-hover-foreground: hsla(from var(--focus-hover-background) h s l / 1);
+            $focus-hover-foreground: hsl(from var(--focus-hover-background) h s l / 1);
         }
 
         @if not($active-foreground) and $active-background {
-            $active-foreground: hsla(from var(--active-background) h s l / 1);
+            $active-foreground: hsl(from var(--active-background) h s l / 1);
         }
 
         @if $variant == 'material' {
             @if not($focus-visible-background) and $foreground {
-                $focus-visible-background: hsla(from var(--foreground) h s l / 0.16);
+                $focus-visible-background: hsl(from var(--foreground) h s l / 0.16);
             }
 
             @if not($focus-visible-foreground) and $focus-visible-background {
-                $focus-visible-foreground: hsla(from var(--focus-visible-background) h s l / 1);
+                $focus-visible-foreground: hsl(from var(--focus-visible-background) h s l / 1);
             }
         } @else {
             @if not($focus-visible-foreground) and $focus-foreground {
@@ -210,19 +210,19 @@
 
     @if $variant == 'indigo' {
         @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($focus-background) and $foreground {
-            $focus-background: hsla(from var(--foreground) h s l / 0.08);
+            $focus-background: hsl(from var(--foreground) h s l / 0.08);
         }
 
         @if not($focus-hover-background) and $foreground {
-            $focus-hover-background: hsla(from var(--foreground) h s l / 0.08);
+            $focus-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.08);
+            $active-background: hsl(from var(--foreground) h s l / 0.08);
         }
     }
 
@@ -267,7 +267,7 @@
             }
 
             @if not($shadow-color) and $focus-visible-foreground {
-                $shadow-color: hsla(from var(--focus-visible-foreground) h s l / 0.5);
+                $shadow-color: hsl(from var(--focus-visible-foreground) h s l / 0.5);
             }
         } @else {
             @if not($active-foreground) and $foreground {
@@ -275,7 +275,7 @@
             }
 
             @if not($shadow-color) and $focus-visible-foreground {
-                $shadow-color: hsla(from var(--focus-visible-foreground) h s l / 0.2);
+                $shadow-color: hsl(from var(--focus-visible-foreground) h s l / 0.2);
             }
         }
     }

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

@@ -53,7 +53,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the text colors in outlined buttons
+/// @example scss - Change the text colors in outlined buttons
 ///   $my-button-theme: outlined-button-theme(
 ///     $foreground: black,
 ///   );
@@ -152,44 +152,44 @@
 
     @if $variant == 'material' or $variant == 'fluent' {
         @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($focus-background) and $foreground {
-            $focus-background: hsla(from var(--foreground) h s l / 0.32);
+            $focus-background: hsl(from var(--foreground) h s l / 0.32);
         }
 
         @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($active-background) and $foreground {
-            $active-background: hsla(from var(--foreground) h s l / 0.16);
+            $active-background: hsl(from var(--foreground) h s l / 0.16);
         }
 
         @if not($hover-foreground) and $hover-background {
-            $hover-foreground: hsla(from var(--hover-background) h s l / 1);
+            $hover-foreground: hsl(from var(--hover-background) h s l / 1);
         }
 
         @if not($focus-foreground) and $focus-background {
-            $focus-foreground: hsla(from var(--focus-background) h s l / 1);
+            $focus-foreground: hsl(from var(--focus-background) h s l / 1);
         }
 
         @if not($focus-hover-foreground) and $focus-hover-background {
-            $focus-hover-foreground: hsla(from var(--focus-hover-background) h s l / 1);
+            $focus-hover-foreground: hsl(from var(--focus-hover-background) h s l / 1);
         }
 
         @if not($active-foreground) and $active-background {
-            $active-foreground: hsla(from var(--active-background) h s l / 1);
+            $active-foreground: hsl(from var(--active-background) h s l / 1);
         }
 
         @if $variant == 'material' {
             @if not($focus-visible-background) and $foreground {
-                $focus-visible-background: hsla(from var(--foreground) h s l / 0.16);
+                $focus-visible-background: hsl(from var(--foreground) h s l / 0.16);
             }
 
             @if not($focus-visible-foreground) and $focus-visible-background {
-                $focus-visible-foreground: hsla(from var(--focus-visible-background) h s l / 1);
+                $focus-visible-foreground: hsl(from var(--focus-visible-background) h s l / 1);
             }
         } @else {
             @if not($focus-visible-foreground) and $focus-foreground {
@@ -206,19 +206,19 @@
 
     @if $variant == 'indigo' {
         @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($focus-background) and $foreground {
-            $focus-background: hsla(from var(--foreground) h s l / 0.08);
+            $focus-background: hsl(from var(--foreground) h s l / 0.08);
         }
 
         @if not($focus-hover-background) and $foreground {
-            $focus-hover-background: hsla(from var(--foreground) h s l / 0.08);
+            $focus-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.08);
+            $active-background: hsl(from var(--foreground) h s l / 0.08);
         }
 
         @if not($hover-foreground) and $foreground {
@@ -242,7 +242,7 @@
         }
 
         @if not($shadow-color) and $focus-visible-foreground {
-            $shadow-color: hsla(from var(--focus-visible-foreground) h s l / 0.2);
+            $shadow-color: hsl(from var(--focus-visible-foreground) h s l / 0.2);
         }
     }
 
@@ -316,7 +316,7 @@
         }
 
         @if not($shadow-color) and $focus-visible-background {
-            $shadow-color: hsla(from var(--focus-visible-background) h s l / 0.5);
+            $shadow-color: hsl(from var(--focus-visible-background) h s l / 0.5);
         }
     }
 

package/sass/themes/components/button-group/_button-group-theme.scss

@@ -22,7 +22,7 @@
 /// Derived colors are auto-calculated for contrast.
 ///
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {box-shadow} $shadow [null] - The shadow to be applied for the button group.
+/// @param {List} $shadow [null] - The shadow to be applied for the button group.
 /// @param {Color} $item-text-color [null]- The text color for button group items. Auto-derived from item-background.
 /// @param {color} $item-icon-color [null]- The icon color for button group items. Auto-derived from item-text-color.
 /// @param {Color} $item-background [null] - The background color for button group items. PRIMARY - derives all state colors.
@@ -65,7 +65,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the background, text, and border colors
+/// @example scss - Change the background, text, and border colors
 ///   $my-button-group-theme: button-group-theme(
 ///     $item-text-color: white,
 ///     $item-background: rgba(0, 0, 0, .8),
@@ -162,7 +162,7 @@
     }
 
     @if not($disabled-selected-background) and $item-selected-background {
-        $disabled-selected-background: hsla(from var(--item-selected-background) h s l / 0.3);
+        $disabled-selected-background: hsl(from var(--item-selected-background) h s l / 0.3);
     }
 
     // border colors
@@ -232,7 +232,7 @@
     }
 
     @if not($disabled-text-color) and $disabled-background-color {
-        $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-background-color)) h s l / 0.4);
+        $disabled-text-color: hsl(from adaptive-contrast(var(--disabled-background-color)) h s l / 0.4);
     }
 
     @if not($disabled-selected-text-color) and $disabled-text-color {
@@ -240,7 +240,7 @@
     }
 
     @if not($idle-shadow-color) and $item-background {
-        $idle-shadow-color: hsla(from var(--item-background) h s l / 0.5);
+        $idle-shadow-color: hsl(from var(--item-background) h s l / 0.5);
     }
 
     @if not($idle-shadow-color) and $selected-shadow-color {

package/sass/themes/components/calendar/_calendar-theme.scss

@@ -153,7 +153,7 @@
 /// @param {Color} $date-disabled-range-foreground [null] - Foreground for disabled dates in selected range.
 /// @requires $light-material-schema
 ///
-/// @example scss Change the header and content background colors
+/// @example scss - Change the header and content background colors
 ///   $my-calendar-theme: calendar-theme(
 ///     $header-background: purple,
 ///     $content-background: black
@@ -403,7 +403,7 @@
     }
 
     @if not($inactive-color) and $content-background {
-        $inactive-color: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.5);
+        $inactive-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.5);
     }
 
     @if not($weekday-color) and $inactive-color {
@@ -411,11 +411,11 @@
     }
 
     @if not($week-number-background) and $content-background {
-        $week-number-background: hsla(from var(--content-background) h s calc(l * 0.8));
+        $week-number-background: hsl(from var(--content-background) h s calc(l * 0.8));
     }
 
     @if not($week-number-foreground) and $week-number-background {
-        $week-number-foreground: hsla(from adaptive-contrast(var(--week-number-background)) h s l / 0.5);
+        $week-number-foreground: hsl(from adaptive-contrast(var(--week-number-background)) h s l / 0.5);
     }
 
     // base end
@@ -427,7 +427,7 @@
         }
 
         @if not($weekday-color) and $header-background {
-            $weekday-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8);
+            $weekday-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.8);
         }
 
         @if not($week-number-foreground) and not($week-number-background) and $header-background {
@@ -450,7 +450,7 @@
     }
 
     @if not($picker-hover-foreground) and $picker-background {
-        $picker-hover-foreground: hsla(from adaptive-contrast(var(--picker-background)) h s l / 0.8);
+        $picker-hover-foreground: hsl(from adaptive-contrast(var(--picker-background)) h s l / 0.8);
     }
 
     @if not($picker-focus-foreground) and $picker-hover-foreground {
@@ -501,11 +501,11 @@
     // date current start
     @if $variant == 'indigo' {
         @if not($date-current-background) and $header-background {
-            $date-current-background: hsla(from var(--header-background) h s l / 0.4);
+            $date-current-background: hsl(from var(--header-background) h s l / 0.4);
         }
 
         @if not($date-current-border-color) and $date-current-background {
-            $date-current-border-color: hsla(from var(--date-current-background) h s l / 0.6);
+            $date-current-border-color: hsl(from var(--date-current-background) h s l / 0.6);
         }
 
         @if not($date-current-hover-background) and $date-current-background {
@@ -961,7 +961,7 @@
         }
     } @else {
         @if not($ym-selected-background) and $header-background {
-            $ym-selected-background: hsla(from var(--header-background) h s l / 0.3);
+            $ym-selected-background: hsl(from var(--header-background) h s l / 0.3);
         }
 
         @if not($ym-current-background) and $date-selected-background {
@@ -973,7 +973,7 @@
         }
 
         @if not($ym-selected-hover-background) and $ym-selected-background {
-            $ym-selected-hover-background: hsla(from dynamic-shade(var(--ym-selected-background)) h s l / 0.5);
+            $ym-selected-hover-background: hsl(from dynamic-shade(var(--ym-selected-background)) h s l / 0.5);
         }
 
         @if not($ym-selected-current-outline-color) and $ym-selected-current-foreground {
@@ -1062,11 +1062,11 @@
         }
     } @else {
         @if not($date-selected-range-background) and $date-selected-background {
-            $date-selected-range-background: hsla(from var(--date-selected-background) h s l / 0.24);
+            $date-selected-range-background: hsl(from var(--date-selected-background) h s l / 0.24);
         }
 
         @if not($date-range-preview-border-color) and $date-selected-background {
-            $date-range-preview-border-color: hsla(from var(--date-selected-background) h s l / 0.5);
+            $date-range-preview-border-color: hsl(from var(--date-selected-background) h s l / 0.5);
         }
 
         @if not($date-selected-current-range-hover-foreground) and $date-selected-current-range-hover-background {
@@ -1102,25 +1102,23 @@
 
     @if not($date-selected-range-hover-foreground) and $date-selected-range-hover-background {
         $date-selected-range-hover-foreground: adaptive-contrast(
-            hsla(from var(--date-selected-range-hover-background) h s l / 1)
+            hsl(from var(--date-selected-range-hover-background) h s l / 1)
         );
     }
 
     @if not($date-selected-range-focus-foreground) and $date-selected-range-focus-background {
         $date-selected-range-focus-foreground: adaptive-contrast(
-            hsla(from var(--date-selected-range-focus-background) h s l / 1)
+            hsl(from var(--date-selected-range-focus-background) h s l / 1)
         );
     }
 
     @if $variant == 'indigo' {
         @if not($date-selected-current-range-background) and $date-selected-background {
-            $date-selected-current-range-background: hsla(
-                from var(--date-selected-background) h s calc(l * 0.9) / 0.12
-            );
+            $date-selected-current-range-background: hsl(from var(--date-selected-background) h s calc(l * 0.9) / 0.12);
         }
 
         @if not($date-selected-current-range-hover-background) and $date-selected-background {
-            $date-selected-current-range-hover-background: hsla(
+            $date-selected-current-range-hover-background: hsl(
                 from var(--date-selected-background) h s calc(l * 0.9) / 0.24
             );
         }
@@ -1153,11 +1151,11 @@
     // date range end
 
     @if not($date-disabled-foreground) and $content-background {
-        $date-disabled-foreground: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.3);
+        $date-disabled-foreground: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.3);
     }
 
     @if not($date-disabled-range-foreground) and $date-selected-range-background {
-        $date-disabled-range-foreground: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.3);
+        $date-disabled-range-foreground: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.3);
     }
 
     // Selected + special

package/sass/themes/components/card/_card-theme.scss

@@ -28,13 +28,13 @@
 /// @param {Color} $subtitle-text-color [null] - The text color of the card subtitle. Auto-derived from background (muted).
 /// @param {Color} $content-text-color [null] - The text color of the card content. Auto-derived from background (muted).
 /// @param {Color} $actions-text-color [null] - The text color of the card buttons. Auto-derived from background.
-/// @param {box-shadow} $resting-shadow [null] - The shadow of the card in its resting state.
-/// @param {box-shadow} $hover-shadow [null] - The shadow of the card in its hover state.
+/// @param {List} $resting-shadow [null] - The shadow of the card in its resting state.
+/// @param {List} $hover-shadow [null] - The shadow of the card in its hover state.
 /// @param {List} $border-radius [null] - The border radius used for card component.
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the background and content text colors in card
+/// @example scss - Change the background and content text colors in card
 ///   $my-card-theme: card-theme($background: #fff);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-card-theme);