diff --git a/projects/igniteui-angular/core/src/core/styles/components/_common/_extract-theme-schema.scss b/projects/igniteui-angular/core/src/core/styles/components/_common/_extract-theme-schema.scss
new file mode 100644
index 00000000000..c17da560d22
--- /dev/null
+++ b/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
+  );
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/_index.scss b/projects/igniteui-angular/core/src/core/styles/components/_index.scss
index 5f0d6a09fc6..da45529ed7b 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/_index.scss
+++ b/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';
diff --git a/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-derived-themes.scss
new file mode 100644
index 00000000000..421fec1efd8
--- /dev/null
+++ b/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'
+        );
+    }
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss
index 319f935d6b3..218cfab911a 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/column-actions/_column-actions-theme.scss
+++ b/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;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-derived-themes.scss
new file mode 100644
index 00000000000..882bb540d57
--- /dev/null
+++ b/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)),
+            )
+        );
+    }
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
index dcc63f3d22c..8675111a167 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
+++ b/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;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-derived-themes.scss
new file mode 100644
index 00000000000..49aa84f7b8f
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-derived-themes.scss
@@ -0,0 +1,190 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Applies all sub-component token overrides used by the excel filtering.
+/// @access private
+/// @param {Map} $theme - The excel filtering theme map.
+@mixin excel-filtering-derived-themes($theme) {
+    $theme-info: extract-theme-schema($theme);
+    $schema: map.get($theme-info, 'schema');
+    $variant: map.get($theme-info, 'variant');
+
+    :where(
+    igx-grid-excel-style-filtering,
+    .igx-excel-filter__secondary
+    ) {
+        --_excel-filtering-background: var(--background, var(--ig-excel-filtering-background));
+        --_excel-filtering-secondary-background: var(--secondary-background, var(--ig-excel-filtering-secondary-background));
+        --_excel-filtering-foreground: var(--foreground, var(--ig-excel-filtering-foreground));
+        --_excel-filtering-accent-color: var(--accent-color, var(--ig-excel-filtering-accent-color));
+
+        .igx-excel-filter__menu .igx-button-group,
+        .igx-button-group {
+            --ig-btn-group-selected-bg: color-mix(in srgb, var(--_excel-filtering-accent-color) 8%, var(--_excel-filtering-background));
+
+            @include tokens(
+                button-group-theme(
+                    $schema: $schema,
+                    $item-background: transparent,
+                    $item-border-color: transparent,
+                    $item-text-color: var(--_excel-filtering-foreground, #{color($color: 'gray', $variant: 700)}),
+                    $item-selected-background: if(
+                        $variant == 'indigo',
+                        var(--ig-btn-group-selected-bg, var(--ig-primary-500)),
+                        var(--ig-btn-group-selected-bg, #{color($color: 'gray', $variant: 100)}),
+                    ),
+                    $item-hover-background: var(--item-selected-background),
+                    $item-active-border-color: transparent,
+                    $item-selected-text-color: var(--_excel-filtering-accent-color, #{if(
+                        $variant == 'indigo',
+                        contrast-color($color: 'primary'),
+                        if($variant == 'material',
+                            color($color: 'secondary', $variant: 500),
+                            color($color: 'primary', $variant: 500)
+                        )
+                    )}),
+                    $item-selected-hover-text-color: var(--_excel-filtering-accent-color, #{if(
+                        $variant == 'indigo',
+                        contrast-color($color: 'primary'),
+                        if($variant == 'material',
+                            color($color: 'secondary', $variant: 500),
+                            color($color: 'primary', $variant: 500)
+                        )
+                    )}),
+                    $item-selected-hover-background: dynamic-shade(var(--item-hover-background), $offset: 3),
+                    $shadow: none
+                ),
+                $mode: 'scoped'
+            );
+        }
+
+        @include tokens(
+            contained-button-theme(
+                $schema: $schema,
+                $background: var(--_excel-filtering-accent-color),
+                $disabled-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 50%, var(--_excel-filtering-background)),
+                $disabled-foreground: color-mix(in srgb, var(--_excel-filtering-foreground) 50%, var(--_excel-filtering-background)),
+            )
+        );
+
+        @include tokens(
+            flat-button-theme(
+                $schema: $schema,
+                $foreground: var(--_excel-filtering-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_excel-filtering-accent-color) 50%, var(--_excel-filtering-background)),
+            )
+        );
+
+        @include tokens(
+            checkbox-theme(
+                $schema: $schema,
+                $empty-color: color-mix(in srgb, var(--_excel-filtering-foreground) 80%, var(--_excel-filtering-background)),
+                $empty-fill-color: var(--_excel-filtering-background),
+                $tick-color-hover: color-mix(in srgb, var(--_excel-filtering-foreground) 40%, var(--_excel-filtering-background)),
+                $fill-color: var(--_excel-filtering-accent-color),
+                $label-color: var(--_excel-filtering-foreground),
+                $disabled-color: color-mix(in srgb, var(--_excel-filtering-foreground) 50%, var(--_excel-filtering-background)),
+            )
+        );
+
+        @include tokens(
+            drop-down-theme(
+                $schema: $schema,
+                $background-color: var(--_excel-filtering-background),
+                $item-text-color: var(--_excel-filtering-foreground),
+                $border-color: color-mix(in srgb, var(--_excel-filtering-foreground) 12%, var(--_excel-filtering-background)),
+                $hover-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 8%, var(--_excel-filtering-background)),
+                $focused-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 12%, var(--_excel-filtering-background)),
+                $selected-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 12%, var(--_excel-filtering-background)),
+                $selected-hover-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 16%, var(--_excel-filtering-background)),
+                $selected-focus-item-background: color-mix(in srgb, var(--_excel-filtering-accent-color) 24%, var(--_excel-filtering-background)),
+            )
+        );
+
+        @if $variant == 'material' {
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $box-background: var(--_excel-filtering-background),
+                    $idle-bottom-line-color: var(--_excel-filtering-accent-color),
+                    $idle-text-color: var(--_excel-filtering-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--_excel-filtering-foreground) 80%, var(--_excel-filtering-background)),
+                )
+            );
+        } @else if $variant == 'indigo' {
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $idle-bottom-line-color: var(--_excel-filtering-accent-color),
+                    $idle-text-color: var(--_excel-filtering-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--_excel-filtering-foreground) 80%, var(--_excel-filtering-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $border-color: var(--_excel-filtering-accent-color),
+                    $idle-text-color: var(--_excel-filtering-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--_excel-filtering-foreground) 80%, var(--_excel-filtering-background)),
+                    $input-prefix-background: var(--_excel-filtering-accent-color),
+                )
+            );
+        }
+
+        @if $variant == 'indigo' {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-foreground: var(--_excel-filtering-accent-color),
+                    $toggle-button-foreground-disabled: color-mix(in srgb, var(--_excel-filtering-accent-color) 50%, var(--_excel-filtering-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-background: var(--_excel-filtering-accent-color),
+                )
+            );
+        }
+
+        @include tokens(
+            flat-icon-button-theme(
+                $schema: $schema,
+                $foreground: var(--_excel-filtering-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_excel-filtering-accent-color) 50%, var(--_excel-filtering-background)),
+            )
+        );
+
+        @include tokens(
+            list-theme(
+                $schema: $schema,
+                $background: var(--_excel-filtering-secondary-background),
+                $item-background-hover: color-mix(in srgb, var(--_excel-filtering-accent-color) 8%, var(--_excel-filtering-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(--_excel-filtering-foreground) 50%, var(--_excel-filtering-background));
+        --_scrollbar-track-border-color: color-mix(in srgb, var(--_excel-filtering-foreground) 16%, var(--_excel-filtering-background));
+
+        @include tokens(
+            scrollbar-theme(
+                $schema: $schema,
+                $sb-track-bg-color: var(--_excel-filtering-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'
+        );
+    }
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss
index cb3070acd29..c0525f8a1b2 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss
@@ -1,13 +1,14 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../button-group/button-group-component' as *;
-@use '../button-group/button-group-theme' as *;
-@use '../tree/tree-theme' as *;
+@use 'igniteui-theming/sass/themes/functions' as *;
+@use 'excel-filtering-derived-themes' as *;
 
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
-/// @param {Map} $theme - The grid theme used to style the component.
+/// @deprecated Use the `tokens` mixin instead.
+/// @see {mixin} tokens
+/// @param {Map} $theme - The excel theme used to style the component.
 @mixin excel-filtering($theme) {
+    @include tokens($theme, $mode: 'scoped');
+    @include excel-filtering-derived-themes($theme);
     $variant: map.get($theme, '_meta', 'theme');
     $theme-variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
@@ -40,7 +41,7 @@
         flex-grow: 1;
 
         @if $variant == 'indigo' {
-            box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) var-get($theme, 'excel-filtering-border-color');
+            box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) var-get($theme, 'border-color');
 
             // TODO: The border-radius should not be hardcoded.
             border-radius: border-radius(rem(4px));
@@ -102,15 +103,7 @@
         opacity: 1;
 
         igx-icon {
-            color: var-get($theme, 'sorted-header-icon-color');
-        }
-
-        @if $variant == 'indigo' {
-            &:hover {
-                igx-icon {
-                    color: var-get($theme, 'sortable-header-icon-hover-color');
-                }
-            }
+            color: var-get($theme, 'actions-selected-icon-color');
         }
     }
 
@@ -123,12 +116,9 @@
 
         // TODO: The border-radius should not be hardcoded.
         border-radius: border-radius(rem(4px));
+        background: var-get($theme, 'background');
 
-        @if $variant != 'indigo' {
-            background: var-get($theme, 'filtering-row-background');
-        } @else {
-            background: var-get($theme, 'filtering-dialog-background');
-
+        @if $variant == 'indigo' {
             %igx-group-item {
                 &:not(:nth-child(1)) {
                     margin: 0;
@@ -138,16 +128,16 @@
             }
         }
 
-        @include tree(tree-theme(
-            $background: color($color: 'surface'),
-            $background-selected: color($color: 'surface'),
-            $background-active: color($color: 'surface'),
-            $background-active-selected: color($color: 'surface'),
-            $foreground: contrast-color($color: 'surface'),
-            $foreground-selected: contrast-color($color: 'surface'),
-            $foreground-active: contrast-color($color: 'surface'),
-            $foreground-active-selected: contrast-color($color: 'surface'),
-        ));
+        // @include tree(tree-theme(
+        //     $background: color($color: 'surface'),
+        //     $background-selected: color($color: 'surface'),
+        //     $background-active: color($color: 'surface'),
+        //     $background-active-selected: color($color: 'surface'),
+        //     $foreground: contrast-color($color: 'surface'),
+        //     $foreground-selected: contrast-color($color: 'surface'),
+        //     $foreground-active: contrast-color($color: 'surface'),
+        //     $foreground-active-selected: contrast-color($color: 'surface'),
+        // ));
 
         .igx-tree-node__wrapper {
             padding: 0;
@@ -171,7 +161,7 @@
             padding: pad(rem(4px), rem(8px), rem(16px));
         }
 
-        color: var-get($theme, 'excel-filtering-header-foreground');
+        color: var-get($theme, 'header-foreground');
     }
 
     @if $variant == 'indigo' {
@@ -234,7 +224,7 @@
         }
 
         header {
-            color: var-get($theme, 'excel-filtering-subheader-foreground');
+            color: var-get($theme, 'subheader-foreground');
 
             @if $variant == 'indigo' {
                 margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important;
@@ -291,7 +281,7 @@
 
     %grid-excel-actions--selected {
         igx-icon {
-            color: var-get($theme, 'excel-filtering-actions-selected-icon-color');
+            color: var-get($theme, 'actions-selected-icon-color');
         }
     }
 
@@ -334,16 +324,16 @@
         }
 
         cursor: pointer;
-        color: var-get($theme, 'excel-filtering-actions-foreground');
+        color: var-get($theme, 'actions-foreground');
         outline-style: none;
 
         &:hover,
         &:focus {
-            color: var-get($theme, 'excel-filtering-actions-hover-foreground');
-            background: var-get($theme, 'excel-filtering-actions-hover-background');
+            color: var-get($theme, 'actions-hover-foreground');
+            background: var-get($theme, 'actions-hover-background');
 
             igx-icon {
-                color: var-get($theme, 'excel-filtering-actions-hover-icon-color');
+                color: var-get($theme, 'actions-hover-icon-color');
             }
         }
 
@@ -351,7 +341,7 @@
             igx-icon {
                 --component-size: 2;
 
-                color: var-get($theme, 'excel-filtering-actions-icon-color');
+                color: var-get($theme, 'actions-icon-color');
             }
         }
 
@@ -369,16 +359,16 @@
     }
 
     %grid-excel-actions__action--active {
-        color: var-get($theme, 'excel-filtering-actions-hover-foreground');
+        color: var-get($theme, 'actions-hover-foreground');
     }
 
     %grid-excel-actions__action--disabled {
-        color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
+        color: var-get($theme, 'actions-disabled-foreground');
         pointer-events: none;
 
         @if $variant == 'indigo' {
             igx-icon {
-                color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
+                color: var-get($theme, 'actions-disabled-foreground');
             }
         }
     }
@@ -387,7 +377,7 @@
         display: grid;
         place-items: center;
         height: 100%;
-        color: var-get($theme, 'excel-filtering-subheader-foreground');
+        color: var-get($theme, 'subheader-foreground');
     }
 
     %grid-excel-main {
@@ -409,8 +399,6 @@
             overflow: hidden;
 
             @if $variant == 'indigo' {
-                --background: var(--_grid-background, #{color($color: 'surface', $variant: 500)});
-
                 margin-inline: calc(sizable(rem(-16px)) * -1);
 
                 // This is the only way to take the gap from the list,
@@ -430,8 +418,8 @@
             }
 
             border: 0;
-            border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
-            border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+            border-top: rem(1px) dashed var-get($theme, 'border-color');
+            border-bottom: rem(1px) dashed var-get($theme, 'border-color');
         }
 
         %igx-excel-filter__tree {
@@ -440,8 +428,8 @@
             margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1);
             margin-block: 0;
             flex: 1;
-            border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
-            border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+            border-top: rem(1px) dashed var-get($theme, 'border-color');
+            border-bottom: rem(1px) dashed var-get($theme, 'border-color');
 
             igx-icon {
                 width: var(--ig-icon-size, #{$tree-node-expander-size});
@@ -542,7 +530,7 @@
     %grid-excel-menu__secondary {
         width: rem(520px);
         min-width: rem(520px);
-        background: var-get($theme, 'filtering-row-background');
+        background: var-get($theme, 'secondary-background');
         box-shadow: elevation(12);
         border-radius: border-radius(rem(4px));
     }
@@ -619,7 +607,7 @@
 
         @if $bootstrap-theme {
             padding-block-start: pad-block(rem(16px));
-            border-top: rem(1px) solid color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 20%, var(--_grid-background, var(--ig-gray-300)));
+            border-top: rem(1px) solid var-get($theme, 'border-color');
         }
 
         %grid-excel-filter__apply,
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme-builder.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss
similarity index 76%
rename from projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme-builder.scss
rename to projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss
index 89ea0cd3218..bb3e6ce01ab 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme-builder.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-derived-themes.scss
@@ -1,29 +1,15 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use 'igniteui-theming/sass/themes/schemas' as *;
-
+@use '../_common/extract-theme-schema' as *;
 /// Applies all sub-component token overrides used by the grid.
 /// @access private
 /// @param {Map} $theme - The grid theme map.
-@mixin grid-theme-builder($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}'
-    );
+@mixin grid-derived-themes($theme) {
+    $theme-info: extract-theme-schema($theme);
+    $schema: map.get($theme-info, 'schema');
+    $variant: map.get($theme-info, 'variant');
 
-    igx-grid,
+    :where(igx-grid,
     igc-grid,
     igx-tree-grid,
     igc-tree-grid,
@@ -32,7 +18,7 @@
     igx-pivot-grid,
     igc-pivot-grid,
     igx-grid-lite,
-    igc-grid-lite {
+    igc-grid-lite) {
         --_grid-background: var(--background, var(--ig-grid-background));
         --_grid-foreground: var(--foreground, var(--ig-grid-foreground));
         --_grid-accent-color: var(--accent-color, var(--ig-grid-accent-color));
@@ -63,73 +49,6 @@
             )
         );
 
-        .igx-excel-filter__menu .igx-button-group,
-        .igx-button-group {
-            --ig-btn-group-selected-bg: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background));
-
-            @include tokens(
-                button-group-theme(
-                    $schema: $schema,
-                    $item-background: var(--_grid-background, #{var-get($theme, if($variant == 'indigo', 'filtering-dialog-background', 'filtering-row-background'))}),
-                    $item-border-color: transparent,
-                    $item-text-color: var(--_grid-foreground, #{color($color: 'gray', $variant: 700)}),
-                    $item-selected-background: if(
-                        $variant == 'indigo',
-                        var(--ig-btn-group-selected-bg, var(--ig-primary-500)),
-                        var(--ig-btn-group-selected-bg, #{color($color: 'gray', $variant: 100)}),
-                    ),
-                    $item-hover-background: var(--item-selected-background),
-                    $item-selected-text-color: var(--_grid-accent-color, #{if(
-                        $variant == 'indigo',
-                        contrast-color($color: 'primary'),
-                        if($variant == 'material',
-                            color($color: 'secondary', $variant: 500),
-                            color($color: 'primary', $variant: 500)
-                        )
-                    )}),
-                    $item-selected-hover-text-color: var(--_grid-accent-color, #{if(
-                        $variant == 'indigo',
-                        contrast-color($color: 'primary'),
-                        if($variant == 'material',
-                            color($color: 'secondary', $variant: 500),
-                            color($color: 'primary', $variant: 500)
-                        )
-                    )}),
-                    $item-selected-hover-background: dynamic-shade(var(--item-hover-background), $offset: 3),
-                    $shadow: none
-                ),
-                $mode: 'scoped'
-            );
-        }
-
-        @include tokens(
-            contained-button-theme(
-                $schema: $schema,
-                $background: var(--_grid-accent-color),
-                $disabled-background: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
-                $disabled-foreground: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
-            )
-        );
-
-        @include tokens(
-            flat-button-theme(
-                $schema: $schema,
-                $foreground: var(--_grid-accent-color),
-                $disabled-background: transparent,
-                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
-            )
-        );
-
-        @include tokens(
-            outlined-button-theme(
-                $schema: $schema,
-                $foreground: var(--_grid-accent-color),
-                $disabled-background: transparent,
-                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
-                $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
-            )
-        );
-
         @include tokens(
             calendar-theme(
                 $header-background: var(--_grid-accent-color),
@@ -164,10 +83,11 @@
         );
 
         @include tokens(
-            column-actions-theme(
+            contained-button-theme(
                 $schema: $schema,
-                $background-color: var(--_grid-background),
-                $title-color: var(--_grid-accent-color)
+                $background: var(--_grid-accent-color),
+                $disabled-background: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+                $disabled-foreground: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
             )
         );
 
@@ -186,55 +106,66 @@
         );
 
         @include tokens(
-            grid-summary-theme(
+            excel-filtering-theme(
+                $background: var(--_grid-background),
+                $foreground: var(--_grid-foreground),
+                $accent-color: var(--_grid-accent-color),
+                $header-foreground: var(--excel-filtering-header-foreground),
+                $subheader-foreground: var(--excel-filtering-subheader-foreground),
+                $actions-foreground: var(--excel-filtering-actions-foreground),
+                $actions-icon-color: var(--excel-filtering-actions-icon-color),
+                $actions-hover-foreground: var(--excel-filtering-actions-hover-foreground),
+                $actions-hover-icon-color: var(--excel-filtering-actions-hover-icon-color),
+                $actions-selected-icon-color: var(--excel-filtering-actions-selected-icon-color),
+                $actions-hover-background: var(--excel-filtering-actions-hover-background),
+                $actions-disabled-foreground: var(--excel-filtering-actions-disabled-foreground),
+                $border-color: var(--excel-filtering-border-color),
+            )
+        );
+
+        @include tokens(
+            flat-button-theme(
                 $schema: $schema,
-                $background-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
-                $border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
-                $pinned-border-color: color-mix(in srgb, var(--_grid-foreground) 30%, var(--_grid-background)),
-                $label-color: var(--_grid-accent-color),
-                $result-color: var(--_grid-foreground)
+                $foreground: var(--_grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
             )
         );
 
         @include tokens(
-            grid-toolbar-theme(
+            flat-icon-button-theme(
                 $schema: $schema,
-                $background-color: var(--_grid-background),
-                $title-text-color: var(--_grid-foreground),
-                $dropdown-background: var(--_grid-background),
-                $item-text-color: var(--_grid-foreground),
-                $item-hover-background: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background)),
-                $item-hover-text-color: var(--_grid-foreground),
-                $item-focus-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
-                $item-focus-text-color: var(--_grid-foreground),
-                $border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background))
+                $foreground: var(--_grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
             )
         );
 
         @include tokens(
-            highlight-theme(
+            grid-summary-theme(
                 $schema: $schema,
-                $resting-background: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
-                $active-background: var(--_grid-accent-color)
+                $background-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+                $border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
+                $pinned-border-color: color-mix(in srgb, var(--_grid-foreground) 30%, var(--_grid-background)),
+                $label-color: var(--_grid-accent-color),
+                $result-color: var(--_grid-foreground)
             )
         );
 
         @include tokens(
-            flat-icon-button-theme(
+            grid-toolbar-theme(
                 $schema: $schema,
-                $foreground: var(--_grid-accent-color),
-                $disabled-background: transparent,
-                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+                $background: var(--_grid-background),
+                $foreground: var(--_grid-foreground),
+                $accent-color: var(--_grid-accent-color)
             )
         );
 
         @include tokens(
-            outlined-icon-button-theme(
+            highlight-theme(
                 $schema: $schema,
-                $foreground: var(--_grid-accent-color),
-                $disabled-background: transparent,
-                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
-                $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background))
+                $resting-background: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+                $active-background: var(--_grid-accent-color)
             )
         );
 
@@ -276,19 +207,32 @@
         }
 
         @include tokens(
-            list-theme(
+            outlined-button-theme(
                 $schema: $schema,
-                $background: var(--_grid-background),
-                $item-background-hover: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background))
+                $foreground: var(--_grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+                $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+            )
+        );
+
+        @include tokens(
+            outlined-icon-button-theme(
+                $schema: $schema,
+                $foreground: var(--_grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+                $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background))
             )
         );
 
         @include tokens(
             paginator-theme(
                 $schema: $schema,
-                $background-color: var(--_grid-background),
-                $text-color: var(--_grid-foreground),
+                $background: var(--_grid-background),
+                $foreground: var(--_grid-foreground),
                 $border-color: color-mix(in srgb, var(--_grid-foreground) 16%, var(--_grid-background)),
+                $accent-color: var(--_grid-accent-color)
             )
         );
 
@@ -315,6 +259,8 @@
                 query-builder-theme(
                     $schema: $schema,
                     $background: var(--_grid-background),
+                    $foreground: var(--_grid-foreground),
+                    $accent-color: var(--_grid-accent-color),
                     $header-foreground: var(--_grid-foreground),
                     $header-border: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
                 )
@@ -324,6 +270,8 @@
                 query-builder-theme(
                     $schema: $schema,
                     $background: var(--_grid-background),
+                    $foreground: var(--_grid-foreground),
+                    $accent-color: var(--_grid-accent-color),
                     $header-foreground: var(--_grid-foreground),
                 )
             );
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
index a5f9779a215..9698d465ea2 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
@@ -4,7 +4,7 @@
 @use './excel-filtering-theme' as *;
 @use 'igniteui-theming/sass/animations' as *;
 @use 'igniteui-theming/sass/themes/schemas' as *;
-@use './grid-theme-builder' as *;
+@use './grid-derived-themes' as *;
 
 @mixin _filtering-scroll-mask($theme, $dir) {
     display: block;
@@ -15,14 +15,14 @@
     background: linear-gradient(to #{$dir}, var-get($theme, 'filtering-row-background'), transparent);
 }
 
-/// @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.
 /// @requires {mixin} excel-filtering
 @mixin grid($theme) {
-    @include css-vars($theme);
+    @include tokens($theme, $mode: 'scoped');
     @include scale-in-ver-center();
-    @include grid-theme-builder($theme);
+    @include grid-derived-themes($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $theme-variant: map.get($theme, '_meta', 'variant');
@@ -901,12 +901,16 @@
             outline: rem(1px) solid var-get($theme, 'row-ghost-border-color');
             z-index: 10002;
 
-            @include css-vars((
-                name: 'igx-grid-row',
-                row-ghost-background: map.get($theme, 'row-ghost-background'),
-                row-drag-color: map.get($theme, 'row-drag-color'),
-                row-ghost-border-color: map.get($theme, 'row-ghost-border-color')
-            ));
+            $ghost-row-tokens: (
+                _meta: (
+                    name: 'grid'
+                ),
+                'row-ghost-background': map.get($theme, 'row-ghost-background'),
+                'row-drag-color': map.get($theme, 'row-drag-color'),
+                'row-ghost-border-color': map.get($theme, 'row-ghost-border-color')
+            );
+
+            @include tokens($ghost-row-tokens, $mode: 'scoped');
         }
     }
 
@@ -2688,34 +2692,7 @@
         }
     }
 
-    @include excel-filtering($theme);
-
-    %advanced-filtering-dialog {
-	    background: var-get($theme, 'filtering-dialog-background');
-        box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
-
-        @if $variant == 'material' or $variant == 'bootstrap' {
-            border-radius: rem(4px);
-        }
-
-        @if $variant == 'fluent' {
-            border-radius: rem(2px);
-        }
-
-        @if $variant == 'indigo' {
-            border-radius: rem(10px);
-        }
-
-        igx-query-builder {
-            box-shadow: none;
-            border: none;
-            border-radius: inherit;
-        }
-
-        igx-query-builder-header {
-            cursor: grab;
-        }
-    }
+    // @include excel-filtering($theme);
 
     %igx-grid__filtering-row-editing-buttons--small,
     %igx-grid__filtering-row-editing-buttons {
diff --git a/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-derived-themes.scss
new file mode 100644
index 00000000000..eb34d437fbc
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-derived-themes.scss
@@ -0,0 +1,70 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Paginator internal theming
+/// @access private
+/// @param {Map} $theme - The paginator theme map.
+@mixin paginator-derived-themes($theme) {
+    $theme-info: extract-theme-schema($theme);
+    $schema: map.get($theme-info, 'schema');
+    $variant: map.get($theme-info, 'variant');
+
+    :where(igx-paginator) {
+        --_paginator-background:  var(--background, var(--ig-paginator-background));
+        --_paginator-foreground: var(--foreground, var(--ig-paginator-foreground));
+        --_paginator-accent-color: var(--accent-color, var(--ig-paginator-accent-color));
+
+        @include tokens(
+            drop-down-theme(
+                $schema: $schema,
+                $background-color: var(--_paginator-background),
+                $item-text-color: var(--_paginator-foreground),
+                $border-color: color-mix(in srgb, var(--_paginator-foreground) 12%, var(--_paginator-background)),
+                $hover-item-background: color-mix(in srgb, var(--_paginator-accent-color) 8%, var(--_paginator-background)),
+                $focused-item-background: color-mix(in srgb, var(--_paginator-accent-color) 12%, var(--_paginator-background)),
+                $selected-item-background: color-mix(in srgb, var(--_paginator-accent-color) 12%, var(--_paginator-background)),
+                $selected-hover-item-background: color-mix(in srgb, var(--_paginator-accent-color) 16%, var(--_paginator-background)),
+                $selected-focus-item-background: color-mix(in srgb, var(--_paginator-accent-color) 24%, var(--_paginator-background)),
+            )
+        );
+
+        @include tokens(
+            flat-icon-button-theme(
+                $schema: $schema,
+                $foreground: var(--_paginator-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_paginator-accent-color) 50%, var(--_paginator-background)),
+            )
+        );
+
+        @include tokens(
+            input-group-theme(
+                $schema: $schema,
+                $idle-bottom-line-color: var(--_paginator-accent-color),
+                $border-color: var(--_paginator-accent-color),
+                $idle-text-color: var(--_paginator-foreground),
+                $placeholder-color: color-mix(in srgb, var(--_paginator-foreground) 80%, var(--_paginator-background)),
+            )
+        );
+
+        @if $variant == 'indigo' {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-foreground: var(--_paginator-accent-color),
+                    $toggle-button-foreground-disabled: color-mix(in srgb, var(--_paginator-accent-color) 50%, var(--_paginator-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-background: var(--_paginator-accent-color),
+                )
+            );
+        }
+    }
+
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss
index 5aeb1c6ed8b..13aae749e9d 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/paginator/_paginator-theme.scss
@@ -1,11 +1,13 @@
 @use 'sass:map';
 @use '../../base' as *;
+@use './paginator-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 paginator($theme) {
-    @include css-vars($theme);
+    @include tokens($theme, $mode: 'scoped');
+    @include paginator-derived-themes($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
 
@@ -21,8 +23,8 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        color: var-get($theme, 'text-color');
-        background: var-get($theme, 'background-color');
+        color: var-get($theme, 'foreground');
+        background: var-get($theme, 'background');
         font-size: rem(12px);
         border-top: rem(1px) solid var-get($theme, 'border-color');
 
diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss
index fce80b8f03d..650b869f8f3 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss
@@ -1,5 +1,6 @@
 @use '../../base' as *;
 @use 'sass:string';
+@use '../grid/advanced-filtering-component' as *;
 
 /// @access private
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -110,7 +111,7 @@
         @include e(expression-item-drop-ghost) {
             @extend %filter-tree__expression-item-ghost !optional;
         }
-	    
+
 	    @include e(expression-item-keyboard-ghost) {
 		    @extend %filter-tree__expression-item-keyboard-ghost !optional;
 	    }
diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-derived-themes.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-derived-themes.scss
new file mode 100644
index 00000000000..23e00c47a99
--- /dev/null
+++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-derived-themes.scss
@@ -0,0 +1,169 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../_common/extract-theme-schema' as *;
+
+/// Query Builder internal theming
+/// @access private
+/// @param {Map} $theme - The query builder theme map.
+@mixin query-builder-derived-themes($theme) {
+    $theme-info: extract-theme-schema($theme);
+    $schema: map.get($theme-info, 'schema');
+    $variant: map.get($theme-info, 'variant');
+
+    @include tokens($theme, $mode: 'scoped', $scope: 'igx-advanced-filtering-dialog');
+
+    :where(igx-query-builder, igx-advanced-filtering-dialog) {
+        --_query-builder-background:  var(--background, var(--ig-query-builder-background));
+        --_query-builder-foreground: var(--foreground, var(--ig-query-builder-foreground));
+        --_query-builder-accent-color: var(--accent-color, var(--ig-query-builder-accent-color));
+
+        @include tokens(
+            checkbox-theme(
+                $schema: $schema,
+                $empty-color: color-mix(in srgb, var(--_query-builder-foreground) 80%, var(--_query-builder-background)),
+                $empty-fill-color: var(--_query-builder-background),
+                $tick-color-hover: color-mix(in srgb, var(--_query-builder-foreground) 40%, var(--_query-builder-background)),
+                $fill-color: var(--_query-builder-accent-color),
+                $label-color: var(--_query-builder-foreground),
+                $disabled-color: color-mix(in srgb, var(--_query-builder-foreground) 50%, var(--_query-builder-background)),
+            )
+        );
+
+        @include tokens(
+            chip-theme(
+                $schema: $schema,
+                $background: color-mix(in srgb, var(--_query-builder-foreground) 12%, var(--_query-builder-background)),
+                $text-color: var(--_query-builder-foreground),
+                $ghost-background: color-mix(in srgb, var(--_query-builder-foreground) 12%, var(--_query-builder-background)),
+                $ghost-text-color: var(--_query-builder-foreground),
+                $disabled-background: color-mix(in srgb, var(--_query-builder-foreground) 12%, var(--_query-builder-background)),
+                $disabled-text-color: color-mix(in srgb, var(--_query-builder-foreground) 50%, var(--_query-builder-background)),
+                $disabled-border-color: color-mix(in srgb, var(--_query-builder-foreground) 24%, var(--_query-builder-background)),
+            )
+        );
+
+        @if $variant == 'indigo' {
+            @include tokens(
+                combo-theme(
+                    $schema: $schema,
+                    $toggle-button-foreground: var(--_query-builder-accent-color),
+                    $toggle-button-foreground-disabled: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+                    $clear-button-foreground: var(--_query-builder-foreground)
+                )
+            );
+        } @else {
+            @include tokens(
+                combo-theme(
+                    $schema: $schema,
+                    $toggle-button-background: var(--_query-builder-accent-color),
+                    $clear-button-foreground: var(--_query-builder-foreground)
+                )
+            );
+        }
+
+        @include tokens(
+            contained-button-theme(
+                $schema: $schema,
+                $background: var(--_query-builder-accent-color),
+                $disabled-background: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+                $disabled-foreground: color-mix(in srgb, var(--_query-builder-foreground) 50%, var(--_query-builder-background)),
+            )
+        );
+
+        @include tokens(
+            drop-down-theme(
+                $schema: $schema,
+                $background-color: var(--_query-builder-background),
+                $item-text-color: var(--_query-builder-foreground),
+                $border-color: color-mix(in srgb, var(--_query-builder-foreground) 12%, var(--_query-builder-background)),
+                $hover-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 8%, var(--_query-builder-background)),
+                $focused-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 12%, var(--_query-builder-background)),
+                $selected-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 12%, var(--_query-builder-background)),
+                $selected-hover-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 16%, var(--_query-builder-background)),
+                $selected-focus-item-background: color-mix(in srgb, var(--_query-builder-accent-color) 24%, var(--_query-builder-background)),
+            )
+        );
+
+        @include tokens(
+            flat-button-theme(
+                $schema: $schema,
+                $foreground: var(--_query-builder-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+            )
+        );
+
+        @include tokens(
+            input-group-theme(
+                $schema: $schema,
+                $idle-bottom-line-color: var(--_query-builder-accent-color),
+                $box-background: var(--_query-builder-background),
+                $border-color: var(--_query-builder-accent-color),
+                $idle-text-color: var(--_query-builder-foreground),
+                $placeholder-color: color-mix(in srgb, var(--_query-builder-foreground) 80%, var(--_query-builder-background)),
+            )
+        );
+
+        @include tokens(
+            outlined-button-theme(
+                $schema: $schema,
+                $foreground: var(--_query-builder-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+                $disabled-border-color: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+            )
+        );
+
+        @include tokens(
+            outlined-icon-button-theme(
+                $schema: $schema,
+                $foreground: var(--_query-builder-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+                $disabled-border-color: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-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(--_query-builder-foreground) 50%, var(--_query-builder-background));
+        --_scrollbar-track-border-color: color-mix(in srgb, var(--_query-builder-foreground) 16%, var(--_query-builder-background));
+
+        @include tokens(
+            scrollbar-theme(
+                $schema: $schema,
+                $sb-track-bg-color: var(--_query-builder-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'
+        );
+
+        @if $variant == 'indigo' {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-foreground: var(--_query-builder-accent-color),
+                    $toggle-button-foreground-disabled: color-mix(in srgb, var(--_query-builder-accent-color) 50%, var(--_query-builder-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-background: var(--_query-builder-accent-color),
+                )
+            );
+        }
+
+        @include tokens(
+            tooltip-theme(
+                $schema: $schema,
+                $background: hsl(from var(--_query-builder-foreground) h s l / 80%)
+            ),
+        );
+    }
+}
diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss
index a579ad671e4..064bc9ebbd2 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss
@@ -1,11 +1,13 @@
 @use 'sass:map';
 @use '../../base' as *;
+@use 'query-builder-derived-themes' as *;
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The grid theme used to style the component.
 @mixin query-builder($theme) {
-    @include css-vars($theme);
+    @include tokens($theme, $mode: 'scoped');
+    @include query-builder-derived-themes($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $theme-variant: map.get($theme, '_meta', 'variant');
@@ -562,6 +564,33 @@
             flex-grow: 1;
         }
     }
+
+    %advanced-filtering-dialog {
+        background: var-get($theme, 'background');
+        box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
+
+        @if $variant == 'material' or $variant == 'bootstrap' {
+            border-radius: rem(4px);
+        }
+
+        @if $variant == 'fluent' {
+            border-radius: rem(2px);
+        }
+
+        @if $variant == 'indigo' {
+            border-radius: rem(10px);
+        }
+
+        igx-query-builder {
+            box-shadow: none;
+            border: none;
+            border-radius: inherit;
+        }
+
+        igx-query-builder-header {
+            cursor: grab;
+        }
+    }
 }
 
 /// Adds typography styles for the igx-query-builder component.
diff --git a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss
index 16ca17025ea..780334b43ec 100644
--- a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss
@@ -474,6 +474,17 @@
         @include grid($grid-theme-map);
     }
 
+    @if is-used('igx-grid-excel-style-filtering', $exclude) {
+        $grid-excel-style-filtering-theme-map: excel-filtering-theme(
+            $schema: $schema,
+        );
+        $grid-excel-style-filtering-theme-map: meta.call(
+            $theme-handler,
+            $grid-excel-style-filtering-theme-map
+        );
+        @include excel-filtering($grid-excel-style-filtering-theme-map);
+    }
+
     @if is-used('igx-grid-summary', $exclude) {
         $grid-summary-theme-map: grid-summary-theme(
             $schema: $schema,
diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json
index a7da8435657..0d6731b09d4 100644
--- a/projects/igniteui-angular/migrations/migration-collection.json
+++ b/projects/igniteui-angular/migrations/migration-collection.json
@@ -284,6 +284,16 @@
             "version": "21.2.0",
             "description": "Updates Ignite UI for Angular from v21.1.x to v21.2.0",
             "factory": "./update-21_2_0"
+        },
+        "migration-55": {
+            "version": "21.2.0",
+            "description": "Updates Ignite UI for Angular from v21.1.x to v21.2.0",
+            "factory": "./update-21_2_0"
+        },
+        "migration-56": {
+            "version": "21.2.2",
+            "description": "Updates Ignite UI for Angular from v21.2.0 to v21.2.2",
+            "factory": "./update-21_2_2"
         }
     }
 }
diff --git a/projects/igniteui-angular/migrations/update-21_2_2/changes/theme-changes.json b/projects/igniteui-angular/migrations/update-21_2_2/changes/theme-changes.json
new file mode 100644
index 00000000000..9feb1704401
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-21_2_2/changes/theme-changes.json
@@ -0,0 +1,29 @@
+{
+    "$schema": "../../common/schema/theme-changes.schema.json",
+    "changes": [
+        {
+            "name": "$background-color",
+            "replaceWith": "$background",
+            "owner": "column-actions-theme",
+            "type": "property"
+        },
+        {
+            "name": "$background-color",
+            "replaceWith": "$background",
+            "owner": "grid-toolbar-theme",
+            "type": "property"
+        },
+        {
+            "name": "$text-color",
+            "replaceWith": "$foreground",
+            "owner": "paginator-theme",
+            "type": "property"
+        },
+        {
+            "name": "$background-color",
+            "replaceWith": "$background",
+            "owner": "paginator-theme",
+            "type": "property"
+        }
+    ]
+}
diff --git a/projects/igniteui-angular/migrations/update-21_2_2/index.spec.ts b/projects/igniteui-angular/migrations/update-21_2_2/index.spec.ts
new file mode 100644
index 00000000000..ee5ea10e04a
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-21_2_2/index.spec.ts
@@ -0,0 +1,167 @@
+import * as path from "path";
+
+import {
+    SchematicTestRunner,
+    UnitTestTree,
+} from "@angular-devkit/schematics/testing";
+import { setupTestTree } from "../common/setup.spec";
+
+const version = "21.2.2";
+const columnActionsThemes = ["column-actions-theme"];
+const gridToolbarThemes = ["grid-toolbar-theme"];
+const paginatorThemes = ["paginator-theme"];
+const testFilePath = "/testSrc/appPrefix/component/test.component.scss";
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner(
+        "ig-migrate",
+        path.join(__dirname, "../migration-collection.json"),
+    );
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = "migration-56";
+
+    columnActionsThemes.forEach((theme) => {
+        it(`should rename $background-color to $background in ${theme}`, async () => {
+            appTree.create(
+                testFilePath,
+                `$custom-${theme}: ${theme}($background-color: red);`,
+            );
+
+            const tree = await schematicRunner.runSchematic(
+                migrationName,
+                {},
+                appTree,
+            );
+
+            expect(tree.readContent(testFilePath)).toEqual(
+                `$custom-${theme}: ${theme}($background: red);`,
+            );
+        });
+    });
+
+    gridToolbarThemes.forEach((theme) => {
+        it(`should rename $background-color to $background in ${theme}`, async () => {
+            appTree.create(
+                testFilePath,
+                `$custom-${theme}: ${theme}($background-color: red);`,
+            );
+
+            const tree = await schematicRunner.runSchematic(
+                migrationName,
+                {},
+                appTree,
+            );
+
+            expect(tree.readContent(testFilePath)).toEqual(
+                `$custom-${theme}: ${theme}($background: red);`,
+            );
+        });
+    });
+
+    it('should rename --ig-column-actions-background-color CSS variable', async () => {
+        appTree.create(
+            testFilePath,
+            `igx-column-actions { --ig-column-actions-background-color: #fff; }`,
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `igx-column-actions { --ig-column-actions-background: #fff; }`,
+        );
+    });
+
+    it('should rename --ig-grid-toolbar-background-color CSS variable', async () => {
+        appTree.create(
+            testFilePath,
+            `igx-grid-toolbar { --ig-grid-toolbar-background-color: #333; }`,
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `igx-grid-toolbar { --ig-grid-toolbar-background: #333; }`,
+        );
+    });
+
+    it('should rename --ig-grid-filtering-dialog-background to --ig-query-builder-background', async () => {
+        appTree.create(
+            testFilePath,
+            `igx-grid { --ig-grid-filtering-dialog-background: #111; }`,
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `igx-grid { --ig-query-builder-background: #111; }`,
+        );
+    });
+
+    it('should leave unrelated CSS variables unchanged', async () => {
+        const original = `igx-grid { --ig-grid-content-background: #fff; }`;
+        appTree.create(testFilePath, original);
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(original);
+    });
+
+    paginatorThemes.forEach((theme) => {
+        it(`should rename $text-color to $foreground in ${theme}`, async () => {
+            appTree.create(
+                testFilePath,
+                `$custom-${theme}: ${theme}($text-color: red);`,
+            );
+
+            const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+            expect(tree.readContent(testFilePath)).toEqual(
+                `$custom-${theme}: ${theme}($foreground: red);`,
+            );
+        });
+
+        it(`should rename $background-color to $background in ${theme}`, async () => {
+            appTree.create(
+                testFilePath,
+                `$custom-${theme}: ${theme}($background-color: blue);`,
+            );
+
+            const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+            expect(tree.readContent(testFilePath)).toEqual(
+                `$custom-${theme}: ${theme}($background: blue);`,
+            );
+        });
+    });
+
+    it('should rename --ig-paginator-text-color CSS variable', async () => {
+        appTree.create(
+            testFilePath,
+            `igx-paginator { --ig-paginator-text-color: #000; }`,
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `igx-paginator { --ig-paginator-foreground: #000; }`,
+        );
+    });
+
+    it('should rename --ig-paginator-background-color CSS variable', async () => {
+        appTree.create(
+            testFilePath,
+            `igx-paginator { --ig-paginator-background-color: #eee; }`,
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `igx-paginator { --ig-paginator-background: #eee; }`,
+        );
+    });
+});
diff --git a/projects/igniteui-angular/migrations/update-21_2_2/index.ts b/projects/igniteui-angular/migrations/update-21_2_2/index.ts
new file mode 100644
index 00000000000..d8aea28d0a0
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-21_2_2/index.ts
@@ -0,0 +1,35 @@
+import type { Rule, SchematicContext, Tree } from "@angular-devkit/schematics";
+import { UpdateChanges } from "../common/UpdateChanges";
+
+const version = "21.2.2";
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(
+        `Applying migration for Ignite UI for Angular to version ${version}`,
+    );
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+
+    for (const entryPath of update.sassFiles) {
+        let content = host.read(entryPath).toString();
+        let migrated = content;
+
+        // grid-theme: --ig-grid-filtering-dialog-background → --ig-query-builder-background
+        migrated = migrated.replace(/--ig-grid-filtering-dialog-background\b/g, '--ig-query-builder-background');
+
+        // column-actions-theme CSS variable rename
+        migrated = migrated.replace(/--ig-column-actions-background-color\b/g, '--ig-column-actions-background');
+
+        // grid-toolbar-theme CSS variable rename
+        migrated = migrated.replace(/--ig-grid-toolbar-background-color\b/g, '--ig-grid-toolbar-background');
+
+        // paginator-theme CSS variable renames
+        migrated = migrated.replace(/--ig-paginator-text-color\b/g, '--ig-paginator-foreground');
+        migrated = migrated.replace(/--ig-paginator-background-color\b/g, '--ig-paginator-background');
+
+        if (migrated !== content) {
+            host.overwrite(entryPath, migrated);
+            context.logger.info(`  ✓ Migrated ${entryPath}`);
+        }
+    }
+};