igniteui-theming 25.0.0 → 25.0.2

package/sass/themes/components/carousel/_carousel-theme.scss

@@ -43,12 +43,12 @@
 /// @param {Color} $indicator-active-dot-color [null] - The active indicator dot color. Auto-derived from indicator-background or button-background.
 /// @param {Color} $indicator-active-border-color [null] - The active indicator border color. Auto-derived from indicator-active-dot-color.
 /// @param {Color} $indicator-active-hover-dot-color [null] - The active indicator dot color on hover. Auto-derived from indicator-active-dot-color.
-/// @param {box-shadow} $button-shadow [null] - Shadow underneath the previous/next buttons.
+/// @param {List} $button-shadow [null] - Shadow underneath the previous/next buttons.
 /// @param {List} $border-radius [null] - The border radius used for carousel component.
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the previous/next button colors
+/// @example scss - Change the previous/next button colors
 ///   $my-carousel-theme: carousel-theme(
 ///     $button-background: black,
 ///     $button-hover-background: white
@@ -141,7 +141,7 @@
     }
 
     @if not($button-disabled-arrow-color) and $button-disabled-background {
-        $button-disabled-arrow-color: hsla(from adaptive-contrast(var(--button-disabled-background)) h s l / 0.4);
+        $button-disabled-arrow-color: hsl(from adaptive-contrast(var(--button-disabled-background)) h s l / 0.4);
     }
 
     @if not($indicator-hover-dot-color) and $indicator-dot-color {
@@ -150,11 +150,11 @@
 
     @if $variant == 'indigo' {
         @if not($indicator-dot-color) and $indicator-background {
-            $indicator-dot-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / 0.8);
+            $indicator-dot-color: hsl(from adaptive-contrast(var(--indicator-background)) h s l / 0.8);
         }
 
         @if not($indicator-hover-dot-color) and $indicator-dot-color {
-            $indicator-hover-dot-color: hsla(from var(--indicator-dot-color) h s l / 1);
+            $indicator-hover-dot-color: hsl(from var(--indicator-dot-color) h s l / 1);
         }
 
         @if not($indicator-border-color) and $indicator-dot-color {
@@ -162,7 +162,7 @@
         }
     } @else {
         @if not($indicator-border-color) and $indicator-background {
-            $indicator-border-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / 0.8);
+            $indicator-border-color: hsl(from adaptive-contrast(var(--indicator-background)) h s l / 0.8);
         }
     }
 
@@ -187,7 +187,7 @@
 
     @if $variant == 'fluent' or $variant == 'bootstrap' {
         @if not($button-focus-border-color) and $button-background {
-            $button-focus-border-color: hsla(from adaptive-contrast(var(--button-background)) h s l / 0.5);
+            $button-focus-border-color: hsl(from adaptive-contrast(var(--button-background)) h s l / 0.5);
         }
     }
 
@@ -197,7 +197,7 @@
         }
 
         @if not($indicator-focus-color) and $indicator-active-hover-dot-color {
-            $indicator-focus-color: hsla(from var(--indicator-active-hover-dot-color) h s l / 0.5);
+            $indicator-focus-color: hsl(from var(--indicator-active-hover-dot-color) h s l / 0.5);
         }
     } @else {
         @if not($indicator-focus-color) and not($indicator-background) and $button-background {

package/sass/themes/components/chat/_chat-theme.scss

@@ -40,7 +40,7 @@
 /// @param {Color} $code-border [null] - The border color of the code snippets in the chat component.
 /// @requires $light-material-schema
 ///
-/// @example scss Change background color
+/// @example scss - Change background color
 ///   $my-chat-theme: chat-theme($background: blue);
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-chat-theme);

package/sass/themes/components/checkbox/_checkbox-theme.scss

@@ -50,7 +50,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the checked fill color
+/// @example scss - Change the checked fill color
 ///   $my-checkbox-theme: igx-checkbox-theme($fill-color: magenta);
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-checkbox-theme);
@@ -113,7 +113,7 @@
     }
 
     @if not($disabled-indeterminate-color) and $fill-color {
-        $disabled-indeterminate-color: hsla(from var(--fill-color) h s l / 0.5);
+        $disabled-indeterminate-color: hsl(from var(--fill-color) h s l / 0.5);
     }
 
     @if not($error-color-hover) and $error-color {
@@ -121,22 +121,22 @@
     }
 
     @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' {
         @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-focused) and $fill-color {
-            $focus-outline-color-focused: hsla(from var(--fill-color) h s l / 0.5);
+            $focus-outline-color-focused: hsl(from var(--fill-color) h s l / 0.5);
         }
     }
 

package/sass/themes/components/chip/_chip-theme.scss

@@ -34,7 +34,7 @@
 ///
 /// @param {Color} $ghost-background [null] - The chip ghost background color.
 /// @param {Color} $ghost-text-color [null] - The chip ghost text color.
-/// @param {box-shadow} $ghost-shadow [null] - The chip ghost shadow.
+/// @param {List} $ghost-shadow [null] - The chip ghost shadow.
 ///
 /// @param {Color} $hover-text-color [null] - The chip text hover color. Auto-derived from hover-background.
 /// @param {Color} $hover-background [null] - The chip hover background color. Auto-derived from background.
@@ -46,7 +46,7 @@
 ///
 /// @param {color} $selected-text-color [null] - The selected chip text color. Auto-derived from selected-background.
 /// @param {color} $selected-background [null] - The selected chip background color. Auto-derived from background.
-/// @param {color} $selected-border-color [null] The selected chip border color. Auto-derived from selected-background.
+/// @param {color} $selected-border-color [null] - The selected chip border color. Auto-derived from selected-background.
 ///
 /// @param {color} $hover-selected-text-color [null] - The selected chip hover text color. Auto-derived from hover-selected-background.
 /// @param {color} $hover-selected-background [null] - The selected chip hover background color. Auto-derived from selected-background.
@@ -61,7 +61,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the background color
+/// @example scss - Change the background color
 ///   $my-chip-theme: igx-chip-theme($background: black);
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-chip-theme);
@@ -210,11 +210,11 @@
 
     @if $variant == 'bootstrap' or $variant == 'indigo' {
         @if not($focus-outline-color) and $focus-background {
-            $focus-outline-color: hsla(from var(--focus-background) h s l / 0.4);
+            $focus-outline-color: hsl(from var(--focus-background) h s l / 0.4);
         }
 
         @if not($focus-selected-outline-color) and $focus-selected-background {
-            $focus-selected-outline-color: hsla(from var(--focus-selected-background) h s l / 0.4);
+            $focus-selected-outline-color: hsl(from var(--focus-selected-background) h s l / 0.4);
         }
     }
 

package/sass/themes/components/column-actions/_column-actions-theme.scss

@@ -25,7 +25,7 @@
 ///
 /// @requires $light-material-schema
 ///
-/// @example scss Change the title color
+/// @example scss - Change the title color
 ///   $column-actions-theme: igx-column-actions-theme($title-color: black);
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($column-actions-theme);

package/sass/themes/components/combo/_combo-theme.scss

@@ -40,7 +40,7 @@
 /// @param {Color} $clear-button-foreground [null] - The combo clear button foreground color.
 /// @param {Color} $clear-button-foreground-focus [null] - The combo clear button foreground color when the combo is focused. Auto-derived from clear-button-background-focus.
 /// @requires $light-material-schema
-/// @example scss Change the combo empty list background
+/// @example scss - Change the combo empty list background
 ///   $my-combo-theme: igx-checkbox-theme($empty-list-background);
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-combo-theme);
@@ -109,11 +109,11 @@
     }
 
     @if not($toggle-button-background-disabled) and $toggle-button-background {
-        $toggle-button-background-disabled: hsla(from var(--toggle-button-background) h s l / 0.3);
+        $toggle-button-background-disabled: hsl(from var(--toggle-button-background) h s l / 0.3);
     }
 
     @if not($toggle-button-foreground-disabled) and $toggle-button-background {
-        $toggle-button-foreground-disabled: hsla(from adaptive-contrast(var(--toggle-button-background)) h s l / 0.7);
+        $toggle-button-foreground-disabled: hsl(from adaptive-contrast(var(--toggle-button-background)) h s l / 0.7);
     }
 
     @if not($clear-button-foreground) and $clear-button-background {

package/sass/themes/components/dialog/_dialog-theme.scss

@@ -25,11 +25,11 @@
 /// @param {Color} $background [null] - The dialog background color. PRIMARY - derives title-color, message-color, border-color.
 /// @param {Color} $title-color [null] - The dialog title text color. Auto-derived from background.
 /// @param {Color} $message-color [null] - The dialog message text color. Auto-derived from background (slightly transparent).
-/// @param {box-shadow} $shadow [null] - The shadow used for the dialog.
+/// @param {List} $shadow [null] - The shadow used for the dialog.
 /// @param {List} $border-radius [null] - The border radius used for dialog component.
 /// @param {Color} $border-color [null] - The border color used for dialog component. Auto-derived from background.
 /// @requires $light-material-schema
-/// @example scss Change the background color
+/// @example scss - Change the background color
 ///   $my-dialog-theme: dialog-theme($background: black);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-dialog-theme);
@@ -60,11 +60,11 @@
     }
 
     @if not($message-color) and $background {
-        $message-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.8);
+        $message-color: hsl(from adaptive-contrast(var(--background)) h s l / 0.8);
     }
 
     @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($shadow) {

package/sass/themes/components/divider/_divider-theme.scss

@@ -21,7 +21,7 @@
 /// @param {Color} $color [null] - The color of the divider. (Gradients are not supported for dashed dividers).
 /// @param {number} $inset [null] - The inset value of the divider.
 /// @requires $light-material-schema
-/// @example scss Change the color of the divider
+/// @example scss - Change the color of the divider
 ///   $my-divider-theme: divider-theme($color: orange);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-divider-theme);

package/sass/themes/components/dock-manager/_dock-manager-theme.scss

@@ -57,7 +57,7 @@
 /// @param {Color} $tab-text-active [null] - Sets the text color for active tabs.
 /// @param {Color} $text-color [null] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
 /// @requires $light-material-schema
-/// @example scss Change the background and icon colors in icon dock-managers
+/// @example scss - Change the background and icon colors in icon dock-managers
 ///   $my-dock-manager-theme: dock-manager-theme();
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-dock-manager-theme);

package/sass/themes/components/drop-down/_drop-down-theme.scss

@@ -43,13 +43,13 @@
 /// @param {Color} $selected-focus-item-text-color [null] - The drop-down selected item focus text color. Auto-derived from selected-focus-item-background.
 /// @param {Color} $disabled-item-background [null] - The drop-down disabled item background color.
 /// @param {Color} $disabled-item-text-color [null] - The drop-down disabled item text color. Auto-derived from background-color or disabled-item-background.
-/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the drop-down.
+/// @param {List} $shadow [null] - Sets a shadow to be used for the drop-down.
 /// @param {Number} $border-width [null] - The border width used for drop-down component.
 /// @param {Color} $border-color [null] - The border color used for drop-down component.
 /// @param {List} $border-radius [null] - The border radius used for drop-down component.
 /// @param {List} $item-border-radius [null] - The border radius used for drop-down items.
 /// @requires $light-material-schema
-/// @example scss Change the background-color of the dropdown
+/// @example scss - Change the background-color of the dropdown
 ///   $my-dropdown-theme: drop-down-theme($background-color: #09f);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-dropdown-theme);
@@ -108,11 +108,11 @@
     }
 
     @if not($item-icon-color) and $item-text-color {
-        $item-icon-color: hsla(from var(--item-text-color) h s l / 0.8);
+        $item-icon-color: hsl(from var(--item-text-color) h s l / 0.8);
     }
 
     @if not($hover-item-background) and $background-color {
-        $hover-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.12);
+        $hover-item-background: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.12);
     }
 
     @if not($hover-item-text-color) and $item-text-color {
@@ -120,7 +120,7 @@
     }
 
     @if not($hover-item-icon-color) and $hover-item-text-color {
-        $hover-item-icon-color: hsla(from var(--hover-item-text-color) h s l / 0.8);
+        $hover-item-icon-color: hsl(from var(--hover-item-text-color) h s l / 0.8);
     }
 
     @if not($focused-item-background) and $background-color {
@@ -140,7 +140,7 @@
     }
 
     @if not($selected-item-icon-color) and $selected-item-text-color {
-        $selected-item-icon-color: hsla(from var(--selected-item-text-color) h s l / 0.8);
+        $selected-item-icon-color: hsl(from var(--selected-item-text-color) h s l / 0.8);
     }
 
     @if not($selected-hover-item-background) and $selected-item-background {
@@ -152,7 +152,7 @@
     }
 
     @if not($selected-hover-item-icon-color) and $selected-hover-item-text-color {
-        $selected-hover-item-icon-color: hsla(from var(--selected-hover-item-text-color) h s l / 0.8);
+        $selected-hover-item-icon-color: hsl(from var(--selected-hover-item-text-color) h s l / 0.8);
     }
 
     @if not($selected-focus-item-background) and $selected-item-background {
@@ -174,15 +174,15 @@
     }
 
     @if not($disabled-item-text-color) and $background-color {
-        $disabled-item-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.36);
+        $disabled-item-text-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.36);
     }
 
     @if not($disabled-item-text-color) and $disabled-item-background {
-        $disabled-item-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / 0.36);
+        $disabled-item-text-color: hsl(from adaptive-contrast(var(--disabled-item-background)) h s l / 0.36);
     }
 
     @if not($header-text-color) and $background-color {
-        $header-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.7);
+        $header-text-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.7);
     }
 
     @if not($shadow) {

package/sass/themes/components/expansion-panel/_expansion-panel-theme.scss

@@ -34,7 +34,7 @@
 /// @param {Number} $expanded-margin [null] - The expansion panel margin in expanded state when positioned inside accordion.
 /// @param {List} $border-radius [null] - The border radius used for expansion-panel component.
 /// @requires $light-material-schema
-/// @example scss Change the header background color
+/// @example scss - Change the header background color
 ///   $my-expansion-panel-theme: expansion-panel-theme($header-background: black);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-expansion-panel-theme);
@@ -73,7 +73,7 @@
     }
 
     @if not($header-description-color) and $header-background {
-        $header-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8);
+        $header-description-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.8);
     }
 
     @if not($header-focus-background) and $header-background {
@@ -85,11 +85,11 @@
     }
 
     @if not($disabled-text-color) and $header-background {
-        $disabled-text-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.5);
+        $disabled-text-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.5);
     }
 
     @if not($disabled-description-color) and $header-background {
-        $disabled-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.5);
+        $disabled-description-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.5);
     }
 
     @return extend(

package/sass/themes/components/grid/_grid-summary-theme.scss

@@ -32,7 +32,7 @@
 /// @param {Color} $pinned-border-color [null] - The border color of the summary panel. Auto-derived from background-color.
 /// @param {Color} $label-hover-color [null] - The summaries hover label color. Auto-derived from label-color.
 /// @requires $light-material-schema
-/// @example scss Change the summaries background and labels color
+/// @example scss - Change the summaries background and labels color
 ///   $my-summary-theme: grid-summary-theme(
 ///     $background-color: black,
 ///     $label-color: white
@@ -75,11 +75,11 @@
     }
 
     @if not($border-color) and $background-color {
-        $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.26);
+        $border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.26);
     }
 
     @if not($pinned-border-color) and $background-color {
-        $pinned-border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.26);
+        $pinned-border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.26);
     }
 
     @return extend(

package/sass/themes/components/grid/_grid-theme.scss

@@ -100,14 +100,19 @@
 /// @param {Color} $tree-filtered-text-color [null] - Grouping row background color on focus.
 /// @param {Color} $summaries-patch-background [null] - The leading summaries patch background.
 /// @param {Color} $row-highlight [null] - The grid row highlight indication color.
-/// @param {box-shadow} $grid-shadow [null] - The shadow of the grid.
-/// @param {box-shadow} $drag-shadow [null] - The shadow for movable elements.
+/// @param {List} $grid-shadow [null] - The shadow of the grid.
+/// @param {List} $drag-shadow [null] - The shadow for movable elements.
 /// @param {color} $row-ghost-background [null] - The dragged row background color.
 /// @param {color} $row-drag-color [null] - The row drag handle color.
 /// @param {Color} $grid-border-color [null] - The color of the grid border.
 /// @param {List} $drop-area-border-radius [null] - The border radius for column drop area.
+/// @param {List} $active-state-border-style [null] - The border style used for row active state and cell active state.
+/// @param {Color} $body-column-border-color [null] - The border color used for the body column.
+/// @param {Color} $body-column-hover-border-color [null] - The border color used for the body column when in hovered row.
+/// @param {Color} $body-column-hover-selected-border-color [null] - The border color used for the body column when in hovered + selected row.
+/// @param {Color} $body-column-selected-border-color [null] - The border color used for the body column when in selected row.
 /// @requires $light-material-schema
-/// @example scss Change the header background color
+/// @example scss - Change the header background color
 ///   $my-grid-theme: grid-theme($header-background: black);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-grid-theme);
@@ -215,7 +220,14 @@
     $summaries-patch-background: null,
 
     $cell-selected-within-background: null,
-    $cell-selected-within-text-color: null
+    $cell-selected-within-text-color: null,
+
+    $body-column-border-color-odd: null,
+    $body-column-border-color-even: null,
+    $body-column-hover-border-color: null,
+    $body-column-hover-selected-border-color: null,
+    $body-column-selected-border-color: null,
+    $active-state-border-style: null
 ) {
     $selector: (
         #{config.element-prefix() + '-' + 'grid'},
@@ -237,7 +249,7 @@
     $theme: digest-schema($grid-schema);
 
     @if not($ghost-header-icon-color) and $ghost-header-background {
-        $ghost-header-icon-color: hsla(from adaptive-contrast(var(--ghost-header-background)) h s l / 0.07);
+        $ghost-header-icon-color: hsl(from adaptive-contrast(var(--ghost-header-background)) h s l / 0.07);
     }
 
     @if not($ghost-header-text-color) and $ghost-header-background {
@@ -257,7 +269,7 @@
     }
 
     @if not($header-border-color) and $header-background {
-        $header-border-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.24);
+        $header-border-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.24);
     }
 
     @if not($content-text-color) and $content-background {
@@ -313,7 +325,7 @@
     }
 
     @if not($row-border-color) and $content-background {
-        $row-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.08);
+        $row-border-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.08);
     }
 
     @if not($cell-selected-within-background) and $row-selected-background {
@@ -337,11 +349,11 @@
     }
 
     @if not($cell-active-border-color) and $content-background {
-        $cell-active-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.5);
+        $cell-active-border-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.5);
     }
 
     @if not($pinned-border-color) and $content-background {
-        $pinned-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.08);
+        $pinned-border-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.08);
     }
 
     @if not($group-row-background) and $header-background {
@@ -373,7 +385,7 @@
     }
 
     @if not($expand-all-icon-color) and $header-background {
-        $expand-all-icon-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.87);
+        $expand-all-icon-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.87);
     }
 
     @if not($expand-all-icon-hover-color) and $header-background {
@@ -381,15 +393,15 @@
     }
 
     @if not($sorted-header-icon-color) and $header-background {
-        $sorted-header-icon-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8);
+        $sorted-header-icon-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.8);
     }
 
     @if not($sortable-header-icon-hover-color) and $sorted-header-icon-color {
-        $sortable-header-icon-hover-color: hsla(from var(--sorted-header-icon-color) h s l / 1);
+        $sortable-header-icon-hover-color: hsl(from var(--sorted-header-icon-color) h s l / 1);
     }
 
     @if not($edit-mode-color) and $content-background {
-        $edit-mode-color: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.5);
+        $edit-mode-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.5);
     }
 
     @if not($group-label-text) and $group-row-background {
@@ -409,11 +421,11 @@
     }
 
     @if not($grouparea-color) and $grouparea-background {
-        $grouparea-color: hsla(from adaptive-contrast(var(--grouparea-background)) h s l / 0.8);
+        $grouparea-color: hsl(from adaptive-contrast(var(--grouparea-background)) h s l / 0.8);
     }
 
     @if not($grouparea-color) and $header-background {
-        $grouparea-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8);
+        $grouparea-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.8);
     }
 
     @if not($drop-area-background) and $grouparea-background {
@@ -457,11 +469,11 @@
     }
 
     @if not($excel-filtering-actions-foreground) and $filtering-row-background {
-        $excel-filtering-actions-foreground: hsla(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.8);
+        $excel-filtering-actions-foreground: hsl(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.8);
     }
 
     @if not($excel-filtering-actions-disabled-foreground) and $filtering-row-background {
-        $excel-filtering-actions-disabled-foreground: hsla(
+        $excel-filtering-actions-disabled-foreground: hsl(
             from adaptive-contrast(var(--filtering-row-background)) h s l / 0.5
         );
     }
@@ -480,6 +492,26 @@
         $drop-area-border-radius: map.get($theme, 'drop-area-border-radius');
     }
 
+    @if $row-odd-background and not($body-column-border-color-odd) {
+        $body-column-border-color-odd: $row-odd-background;
+    }
+
+    @if $row-even-background and not($body-column-border-color-even) {
+        $body-column-border-color-even: $row-even-background;
+    }
+
+    @if $row-hover-background and not($body-column-hover-border-color) {
+        $body-column-hover-border-color: $row-hover-background;
+    }
+
+    @if $row-selected-background and not($body-column-hover-selected-border-color) {
+        $body-column-hover-selected-border-color: $row-selected-background;
+    }
+
+    @if $row-selected-hover-background and not($body-column-selected-border-color) {
+        $body-column-selected-border-color: $row-selected-hover-background;
+    }
+
     @return extend(
         $theme,
         (
@@ -589,6 +621,13 @@
 
             cell-selected-within-background: $cell-selected-within-background,
             cell-selected-within-text-color: $cell-selected-within-text-color,
+            active-state-border-style: $active-state-border-style,
+
+            body-column-border-color-odd: $body-column-border-color-odd,
+            body-column-border-color-even: $body-column-border-color-even,
+            body-column-hover-border-color: $body-column-hover-border-color,
+            body-column-hover-selected-border-color: $body-column-hover-selected-border-color,
+            body-column-selected-border-color: $body-column-selected-border-color,
         )
     );
 }

package/sass/themes/components/grid/_grid-toolbar-theme.scss

@@ -35,7 +35,7 @@
 /// @param {Color} $item-focus-text-color [null] - The toolbar drop-down item focus text color. Auto-derived from dropdown-background or item-focus-background.
 /// @param {Color} $border-color [null] - The toolbar border-bottom color.
 /// @requires $light-material-schema
-/// @example scss Change the toolbar background color
+/// @example scss - Change the toolbar background color
 ///   $my-toolbar-theme: grid-toolbar-theme(
 ///     $background-color: black
 ///   );

package/sass/themes/components/highlight/_highlight-theme.scss

@@ -27,7 +27,7 @@
 /// @param {Color} $active-background [null] - The background color used for the highlight in its active state. PRIMARY - derives active-color.
 /// @param {Color} $active-color [null] - The text color used for the highlight in its active state. Auto-derived from active-background.
 /// @requires $light-material-schema
-/// @example scss Change the background and icon colors in icon highlight
+/// @example scss - Change the background and icon colors in icon highlight
 ///   $my-highlight-theme: highlight-theme($resting-background: black, $active-color: white);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-highlight-theme);

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

@@ -23,7 +23,7 @@
 /// @param {String} $size [null] - The icon size.
 /// @param {Color} $disabled-color [null] - The disabled icon color.
 /// @requires $light-material-schema
-/// @example scss Change the icon color
+/// @example scss - Change the icon color
 ///   $my-icon-theme: icon-theme($color: orange);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-icon-theme);

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

@@ -42,7 +42,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 contained icon button.
+/// @return {Map} A map containing the theme name, selector, and theme values for the contained icon button.
 @function contained-icon-button-theme(
     $schema: $light-material-schema,
 
@@ -110,7 +110,7 @@
 
     @if $variant == 'indigo' {
         @if not($foreground) and $background {
-            $foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.8);
+            $foreground: hsl(from adaptive-contrast(var(--background)) h s l / 0.8);
         }
 
         @if not($hover-background) and $background {
@@ -175,7 +175,7 @@
     }
 
     @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 == 'fluent' {
@@ -190,23 +190,23 @@
 
     @if $variant == 'indigo' {
         @if not($disabled-background) and $background {
-            $disabled-background: hsla(from var(--background) h s l / 0.4);
+            $disabled-background: hsl(from var(--background) h s l / 0.4);
         }
 
         @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($focus-border-color) and $focus-background {
-            $focus-border-color: hsla(from var(--focus-background) h s l / 0.3);
+            $focus-border-color: hsl(from var(--focus-background) h s l / 0.3);
         }
     } @else if $variant == 'bootstrap' {
         @if not($disabled-background) and $background {
-            $disabled-background: hsla(from var(--background) h s l / 0.2);
+            $disabled-background: hsl(from var(--background) h s l / 0.2);
         }
 
         @if not($disabled-foreground) and $disabled-background {
-            $disabled-foreground: hsla(from var(--disabled-background) h s l / 0.7);
+            $disabled-foreground: hsl(from var(--disabled-background) h s l / 0.7);
         }
     }