feat(themes): add derived themes for inner components

projects/igniteui-angular/core/src/core/styles/components/_common/_extract-theme-schema.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/themes/schemas' as *;
+
+/// Function to extract theme variant and schema for derived themes
+/// @param $theme - The theme map
+/// @returns Map with keys: 'variant', 'theme-variant', 'schema'
+@function extract-theme-schema($theme) {
+  $variant: map.get($theme, '_meta', 'theme');
+  $theme-variant: map.get($theme, '_meta', 'variant');
+  $schema: map.get(
+    (
+      'light-material': $light-material-schema,
+      'light-bootstrap': $light-bootstrap-schema,
+      'light-fluent': $light-fluent-schema,
+      'light-indigo': $light-indigo-schema,
+      'dark-material': $dark-material-schema,
+      'dark-bootstrap': $dark-bootstrap-schema,
+      'dark-fluent': $dark-fluent-schema,
+      'dark-indigo': $dark-indigo-schema,
+    ),
+    '#{$theme-variant}-#{$variant}'
+  );
+
+  @return (
+    'variant': $variant,
+    'theme-variant': $theme-variant,
+    'schema': $schema
+  );
+}

projects/igniteui-angular/core/src/core/styles/components/_index.scss

@@ -22,6 +22,7 @@
 @forward 'drop-down/drop-down-theme';
 @forward 'expansion-panel/expansion-panel-theme';
 @forward 'grid/grid-theme';
+@forward 'grid/excel-filtering-theme';
 @forward 'grid/pivot-data-selector-theme';
 @forward 'grid-summary/grid-summary-theme';
 @forward 'grid-toolbar/grid-toolbar-theme';

projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-derived-themes.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Column actions internal components theming
+@mixin column-actions-derived-themes($theme) {
+    $theme-info: extract-theme-schema($theme);
+    $schema: map.get($theme-info, 'schema');
+
+    :where(igx-column-actions) {
+        --_column-actions-background: var(--background, var(--ig-column-actions-background));
+        --_column-actions-foreground: var(--foreground, var(--ig-column-actions-foreground));
+        --_column-actions-accent-color: var(--accent-color, var(--ig-column-actions-accent-color));
+
+        @include tokens(
+            checkbox-theme(
+                $schema: $schema,
+                $empty-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
+                $empty-fill-color: var(--_column-actions-background),
+                $tick-color-hover: color-mix(in srgb, var(--_column-actions-foreground) 40%, var(--_column-actions-background)),
+                $fill-color: var(--_column-actions-accent-color),
+                $label-color: var(--_column-actions-foreground),
+                $disabled-color: color-mix(in srgb, var(--_column-actions-foreground) 50%, var(--_column-actions-background)),
+            )
+        );
+
+        @include tokens(
+            drop-down-theme(
+                $schema: $schema,
+                $background-color: var(--_column-actions-background),
+                $item-text-color: var(--_column-actions-foreground),
+                $border-color: color-mix(in srgb, var(--_column-actions-foreground) 12%, var(--_column-actions-background)),
+                $hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 8%, var(--_column-actions-background)),
+                $focused-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
+                $selected-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
+                $selected-hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 16%, var(--_column-actions-background)),
+                $selected-focus-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 24%, var(--_column-actions-background)),
+            )
+        );
+
+        @include tokens(
+            flat-button-theme(
+                $schema: $schema,
+                $foreground: var(--_column-actions-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_column-actions-accent-color) 50%, var(--_column-actions-background)),
+            )
+        );
+
+        @include tokens(
+            input-group-theme(
+                $schema: $schema,
+                $idle-bottom-line-color: var(--_column-actions-accent-color),
+                $border-color: var(--_column-actions-accent-color),
+                $idle-text-color: var(--_column-actions-foreground),
+                $placeholder-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
+            )
+        );
+
+        $scrollbar-theme: digest-schema(map.get($schema, 'scrollbar'));
+        $scrollbar-bg-color: map.get($scrollbar-theme, 'sb-track-bg-color');
+        $scrollbar-thumb-color: map.get($scrollbar-theme, 'sb-thumb-bg-color');
+        $scrollbar-track-border-color: map.get($scrollbar-theme, 'sb-track-border-color');
+
+        --_scrollbar-thumb-color: color-mix(in srgb, var(--_column-actions-foreground) 50%, var(--_column-actions-background));
+        --_scrollbar-track-border-color: color-mix(in srgb, var(--_column-actions-foreground) 16%, var(--_column-actions-background));
+
+        @include tokens(
+            scrollbar-theme(
+                $schema: $schema,
+                $sb-track-bg-color: var(--_column-actions-background, $scrollbar-bg-color),
+                $sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
+                $sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
+            ),
+            $mode: 'scoped'
+        );
+    }
+}

projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss

@@ -1,17 +1,20 @@
 @use 'sass:map';
 @use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use './column-actions-derived-themes' as *;
 
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
+/// @deprecated Use the `tokens` mixin instead.
+/// @see {mixin} tokens
 /// @param {Map} $theme - The theme used to style the component.
 @mixin column-actions($theme) {
-    @include css-vars($theme);
+    @include tokens($theme, $mode: 'scoped');
+    @include column-actions-derived-themes($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
     %column-actions-display {
         display: flex;
         flex-flow: column nowrap;
-        background: var-get($theme, 'background-color');
+        background: var-get($theme, 'background');
         box-shadow: elevation(8);
         width: 100%;
         flex: 1 1 auto;

projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-derived-themes.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Grid toolbar internal theming
+/// @access private
+/// @param {Map} $theme - The grid toolbar theme map.
+@mixin grid-toolbar-derived-themes($theme) {
+    $theme-info: extract-theme-schema($theme);
+    $schema: map.get($theme-info, 'schema');
+
+    :where(igx-grid-toolbar) {
+        --_grid-toolbar-background: var(--background, var(--ig-grid-toolbar-background));
+        --_grid-toolbar-foreground: var(--foreground, var(--ig-grid-toolbar-foreground));
+        --_grid-toolbar-accent-color: var(--accent-color, var(--ig-grid-toolbar-accent-color));
+
+        @include tokens(
+            column-actions-theme(
+                $schema: $schema,
+                $background: var(--_grid-toolbar-background),
+                $foreground: var(--_grid-toolbar-foreground),
+                $title-color: var(--_grid-toolbar-accent-color),
+                $accent-color: var(--_grid-toolbar-accent-color)
+            )
+        );
+
+        @include tokens(
+            outlined-button-theme(
+                $schema: $schema,
+                $foreground: var(--_grid-toolbar-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_grid-toolbar-accent-color) 50%, var(--_grid-toolbar-background)),
+                $disabled-border-color: color-mix(in srgb, var(--_grid-toolbar-accent-color) 50%, var(--_grid-toolbar-background)),
+            )
+        );
+    }
+}

projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -1,11 +1,14 @@
 @use 'sass:map';
 @use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use './grid-toolbar-derived-themes' as *;
 
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
+/// @deprecated Use the `tokens` mixin instead.
+/// @see {mixin} tokens
 /// @param {Map} $theme - The theme used to style the component.
 @mixin grid-toolbar($theme) {
-    @include css-vars($theme);
+    @include tokens($theme, $mode: 'scoped');
+    @include grid-toolbar-derived-themes($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
@@ -67,7 +70,7 @@
         grid-row: 1;
         font-size: $grid-toolbar-fs;
         border-bottom: rem(1px) solid var-get($theme, 'border-color');
-        background: var-get($theme, 'background-color');
+        background: var-get($theme, 'background');
         height: auto;
         min-height: var-get($theme, 'size');
         padding-block: 0;
@@ -179,7 +182,7 @@
         bottom: rem(-1px);
         height: rem(2px);
         overflow: hidden;
-        background: var-get($theme, 'background-color');
+        background: var-get($theme, 'background');
 
         igx-linear-bar > * {
             border-radius: 0;