feat(themes): export excel-filtering theme and update grid-related inner component themes

packages/theming/sass/themes/components/button-group/_button-group-theme.scss

@@ -140,7 +140,7 @@
     $theme: digest-schema($button-group-schema);
     $border: rem(1px, 16px) solid map.get($theme, 'item-selected-border-color');
 
-    @if not($item-hover-text-color) and $item-text-color {
+    @if not($item-hover-text-color) and not($item-hover-background) and ($item-text-color) {
         $item-hover-text-color: dynamic-shade(var(--item-text-color));
     }
 

packages/theming/sass/themes/components/column-actions/_column-actions-theme.scss

@@ -15,13 +15,15 @@
 /// Column Actions Theme
 ///
 /// PRIMARY TOKENS:
-/// - `$background-color` — The background color of the panel.
+/// - `$background` — The background color of the panel.
 ///
 /// Derived colors are auto-calculated for contrast.
 ///
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $title-color [null]- The text color used for the title of the list. Auto-derived from background-color.
-/// @param {Color} $background-color [null] - The background color of the panel. PRIMARY - derives title-color.
+/// @param {Color} $title-color [null] - The text color used for the title of the list. Auto-derived from foreground.
+/// @param {Color} $background [null] - The background color of the panel. PRIMARY - derives foreground and title-color.
+/// @param {Color} $foreground [null] - The foreground color for content and icons in the panel. Auto-derived from background.
+/// @param {Color} $accent-color [null] - The accent color used for highlights or active states in the panel.
 ///
 /// @requires $light-material-schema
 ///
@@ -34,7 +36,9 @@
     $schema: $light-material-schema,
 
     $title-color: null,
-    $background-color: null
+    $background: null,
+    $foreground: null,
+    $accent-color: null
 ) {
     $selector: #{config.element-prefix() + '-' + 'column-actions'};
     $column-actions-schema: ();
@@ -47,16 +51,22 @@
 
     $theme: digest-schema($column-actions-schema);
 
-    @if not($title-color) and $background-color {
-        $title-color: adaptive-contrast(var(--background-color));
+    @if not($foreground) and $background {
+        $foreground: adaptive-contrast(var(--background));
+    }
+
+    @if not($title-color) and $foreground {
+        $title-color: var(--foreground);
     }
 
     @return extend(
         $theme,
         (
             selector: $selector,
             title-color: $title-color,
-            background-color: $background-color,
+            background: $background,
+            foreground: $foreground,
+            accent-color: $accent-color,
         )
     );
 }

packages/theming/sass/themes/components/grid/_grid-excel-filtering-theme.scss

@@ -0,0 +1,172 @@
+@use 'sass:map';
+@use '../../config';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+
+////
+/// @package theming
+/// @group themes
+/// @access public
+////
+
+/// Excel Filtering Theme
+///
+/// PRIMARY TOKENS:
+/// - `$background` — The background color for the excel filtering area.
+/// - `$foreground` — The foreground/text color for the excel filtering area.
+/// - `$accent-color` — The accent color for the excel filtering area and its internal components.
+///
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color for the excel filtering area.
+/// @param {Color} $foreground [null] - The foreground/text color for the excel filtering area.
+/// @param {Color} $accent-color [null] - The accent color for the excel filtering and its internal components.
+/// @param {Color} $secondary-background [null] - The secondary background color for the excel filtering area.
+/// @param {Color} $header-foreground [null] - The excel filtering header text color.
+/// @param {Color} $subheader-foreground [null] - The excel filtering subheader text color.
+/// @param {Color} $actions-foreground [null] - The excel filtering actions text color.
+/// @param {Color} $actions-icon-color [null] - The excel filtering actions icon color.
+/// @param {Color} $actions-hover-foreground [null] - The excel filtering actions hover text color.
+/// @param {Color} $actions-hover-icon-color [null] - The excel filtering actions hover icon color.
+/// @param {Color} $actions-selected-icon-color [null] - The excel filtering actions selected icon color.
+/// @param {Color} $actions-hover-background [null] - The excel filtering actions hover background color.
+/// @param {Color} $actions-disabled-foreground [null] - The excel filtering actions disabled text color.
+/// @param {Color} $border-color [null] - The border color used in the excel style filter.
+/// @requires $light-material-schema
+/// @example scss - Change excel filtering header color
+///   $my-excel-filtering-theme: excel-filtering-theme($background: blue, $accent-color: orange);
+///   @include css-vars($my-excel-filtering-theme);
+@function excel-filtering-theme(
+    $schema: $light-material-schema,
+    $background: null,
+    $foreground: null,
+    $accent-color: null,
+    $secondary-background: null,
+    $header-foreground: null,
+    $subheader-foreground: null,
+    $actions-foreground: null,
+    $actions-icon-color: null,
+    $actions-hover-foreground: null,
+    $actions-hover-icon-color: null,
+    $actions-selected-icon-color: null,
+    $actions-hover-background: null,
+    $actions-disabled-foreground: null,
+    $border-color: null
+) {
+    $selector: (#{config.element-prefix() + '-' + 'grid-excel-style-filtering'}, '.igx-excel-filter__secondary');
+    $excel-filtering-schema: ();
+
+    @if map.has-key($schema, 'grid-excel-filtering') {
+        $excel-filtering-schema: map.get($schema, 'grid-excel-filtering');
+    } @else {
+        $excel-filtering-schema: $schema;
+    }
+
+    $theme: digest-schema($excel-filtering-schema);
+
+    @if not($foreground) and $background {
+        $foreground: adaptive-contrast(var(--background));
+    }
+
+    @if not($secondary-background) and $background {
+        $secondary-background: var(--background);
+    }
+
+    @if not($header-foreground) and $foreground {
+        $header-foreground: var(--foreground);
+    }
+
+    @if not($subheader-foreground) and $foreground {
+        $subheader-foreground: var(--foreground);
+    }
+
+    @if not($actions-foreground) and $foreground {
+        $actions-foreground: var(--foreground);
+    }
+
+    @if not($actions-icon-color) and $foreground {
+        $actions-icon-color: var(--foreground);
+    }
+
+    @if not($actions-hover-foreground) and $foreground {
+        $actions-hover-foreground: var(--foreground);
+    }
+
+    @if not($actions-hover-icon-color) and $foreground {
+        $actions-hover-icon-color: var(--foreground);
+    }
+
+    @if not($actions-hover-background) and $accent-color and $background {
+        $actions-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--background));
+    }
+
+    @if not($actions-disabled-foreground) and $foreground and $background {
+        $actions-disabled-foreground: color-mix(in srgb, var(--foreground) 50%, var(--background));
+    }
+
+    @if not($border-color) and $foreground and $background {
+        $border-color: color-mix(in srgb, var(--foreground) 16%, var(--background));
+    }
+
+    @if not($header-foreground) and $foreground {
+        $header-foreground: var(--foreground);
+    }
+
+    @if not($subheader-foreground) and $foreground {
+        $subheader-foreground: var(--foreground);
+    }
+
+    @if not($actions-foreground) and $foreground {
+        $actions-foreground: var(--foreground);
+    }
+
+    @if not($actions-icon-color) and $foreground {
+        $actions-icon-color: var(--foreground);
+    }
+
+    @if not($actions-hover-foreground) and $foreground {
+        $actions-hover-foreground: var(--foreground);
+    }
+
+    @if not($actions-hover-icon-color) and $foreground {
+        $actions-hover-icon-color: var(--foreground);
+    }
+
+    @if not($actions-selected-icon-color) and $accent-color {
+        $actions-selected-icon-color: var(--accent-color);
+    }
+
+    @if not($actions-hover-background) and $accent-color and $background {
+        $actions-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--background));
+    }
+
+    @if not($actions-disabled-foreground) and $foreground and $background {
+        $actions-disabled-foreground: color-mix(in srgb, var(--foreground) 50%, var(--background));
+    }
+
+    @if not($border-color) and $foreground and $background {
+        $border-color: color-mix(in srgb, var(--foreground) 16%, var(--background));
+    }
+
+    @return extend(
+        $theme,
+        (
+            selector: $selector,
+            background: $background,
+            foreground: $foreground,
+            accent-color: $accent-color,
+            secondary-background: $secondary-background,
+            header-foreground: $header-foreground,
+            subheader-foreground: $subheader-foreground,
+            actions-foreground: $actions-foreground,
+            actions-icon-color: $actions-icon-color,
+            actions-hover-foreground: $actions-hover-foreground,
+            actions-hover-icon-color: $actions-hover-icon-color,
+            actions-selected-icon-color: $actions-selected-icon-color,
+            actions-hover-background: $actions-hover-background,
+            actions-disabled-foreground: $actions-disabled-foreground,
+            border-color: $border-color,
+        )
+    );
+}

packages/theming/sass/themes/components/grid/_grid-toolbar-theme.scss

@@ -17,36 +17,43 @@
 /// Grid Toolbar Theme
 ///
 /// PRIMARY TOKENS:
-/// - `$background-color` — The toolbar background color.
+/// - `$background` — The toolbar background and drop-down background color.
+/// - `$foreground` — The toolbar title and drop-down item text color.
+/// - `$accent-color` — The accent color used to derive interactive item backgrounds.
 /// - `$dropdown-background` — The toolbar drop-down background color.
 /// - `$item-hover-background` — The drop-down item hover background.
 /// - `$item-focus-background` — The drop-down item focus background.
 ///
 /// Derived colors are auto-calculated for contrast.
 ///
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $background-color [null] - The toolbar background color. PRIMARY - derives title-text-color.
-/// @param {Color} $title-text-color [null] - The toolbar title text color. Auto-derived from background-color.
+/// @param {Color} $background [null] - The toolbar background and drop-down background color. PRIMARY - derives title-text-color and dropdown-background.
+/// @param {Color} $foreground [null] - The toolbar title and drop-down item text color. PRIMARY - derives title-text-color and item-text-color.
+/// @param {Color} $accent-color [null] - The accent color used to derive interactive item backgrounds.
+/// @param {Color} $title-text-color [null] - The toolbar title text color. Auto-derived from background.
 /// @param {Color} $dropdown-background [null] - The toolbar drop-down background color. PRIMARY - derives item-text-color.
 /// @param {Color} $item-text-color [null] - The toolbar drop-down item text color. Auto-derived from dropdown-background.
 /// @param {Color} $item-hover-background [null] - The toolbar drop-down item hover background color. PRIMARY - derives item-hover-text-color.
 /// @param {Color} $item-hover-text-color [null] - The toolbar drop-down item hover text color. Auto-derived from dropdown-background or item-hover-background.
 /// @param {Color} $item-focus-background [null] - The toolbar drop-down item focus background color. PRIMARY - derives item-focus-text-color.
 /// @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 {List} $size [null] - The size used for the grid toolbar min-height.
 /// @param {Color} $border-color [null] - The toolbar border-bottom color.
 /// @requires $light-material-schema
 /// @example scss - Change the toolbar background color
 ///   $my-toolbar-theme: grid-toolbar-theme(
-///     $background-color: black
+///     $background: black
 ///   );
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-toolbar-theme);
 @function grid-toolbar-theme(
     $schema: $light-material-schema,
 
-    $background-color: null,
-    $title-text-color: null,
+    $background: null,
+    $foreground: null,
+    $accent-color: null,
 
+    $title-text-color: null,
     $dropdown-background: null,
     $item-text-color: null,
     $item-hover-background: null,
@@ -67,8 +74,44 @@
 
     $theme: digest-schema($grid-toolbar-schema);
 
-    @if not($title-text-color) and $background-color {
-        $title-text-color: adaptive-contrast(var(--background-color));
+    @if not($foreground) and $background {
+        $foreground: adaptive-contrast(var(--background));
+    }
+
+    @if not($title-text-color) and $foreground {
+        $title-text-color: var(--foreground);
+    }
+
+    @if not($dropdown-background) and $background {
+        $dropdown-background: var(--background);
+    }
+
+    @if not($item-text-color) and $foreground {
+        $item-text-color: var(--foreground);
+    }
+
+    @if not($item-hover-background) and $background and $accent-color {
+        $item-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--background));
+    }
+
+    @if not($item-hover-text-color) and $item-text-color {
+        $item-hover-text-color: var(--item-text-color);
+    }
+
+    @if not($item-focus-background) and $background and $accent-color {
+        $item-focus-background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+    }
+
+    @if not($item-focus-text-color) and $item-text-color {
+        $item-focus-text-color: var(--item-text-color);
+    }
+
+    @if not($border-color) and $foreground and $background {
+        $border-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
+    }
+
+    @if not($title-text-color) and $background {
+        $title-text-color: adaptive-contrast(var(--background));
     }
 
     @if not($item-text-color) and $dropdown-background {
@@ -95,7 +138,9 @@
         $theme,
         (
             selector: $selector,
-            background-color: $background-color,
+            background: $background,
+            foreground: $foreground,
+            accent-color: $accent-color,
             title-text-color: $title-text-color,
             item-text-color: $item-text-color,
             dropdown-background: $dropdown-background,

packages/theming/sass/themes/components/grid/_index.scss

@@ -1,4 +1,5 @@
 @forward 'grid-theme';
+@forward 'grid-excel-filtering-theme';
 @forward 'grid-summary-theme';
 @forward 'grid-toolbar-theme';
 @forward 'pivot-data-selector-theme';