From 58033e401e11a6bba87d576248f5e5c61c361274 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Mon, 16 Mar 2026 09:54:33 +0200
Subject: [PATCH 1/7] feat(grid): add initial implementation

---
 .../core/src/core/styles/components/grid/_grid-theme.scss  | 6 ++++++
 src/styles/_demo-theme.scss                                | 7 +++++++
 2 files changed, 13 insertions(+)

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 24d0caf723d..69615983afb 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
@@ -21,6 +21,12 @@
     @include css-vars($theme);
     @include scale-in-ver-center();
 
+    @include tokens(checkbox-theme(
+        $empty-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+        $fill-color: var(--ig-grid-accent-color)
+    ));
+    @include tokens(chip-theme($background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background))));
+
     $variant: map.get($theme, '_meta', 'theme');
     $theme-variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
diff --git a/src/styles/_demo-theme.scss b/src/styles/_demo-theme.scss
index cc446ab4a7d..64cf23a82f1 100644
--- a/src/styles/_demo-theme.scss
+++ b/src/styles/_demo-theme.scss
@@ -17,6 +17,13 @@ body {
 
 :root {
     --some-dynamic-color: hsl(#{math.random(360)}, 100%, 50%);
+
+    @include tokens(grid-theme(
+        $schema: $schema,
+        $background: #F9FAFA,
+        $foreground: #3B4249,
+        $accent-color: #0D6EFD
+    ));
 }
 
 .nav-header {

From e1b5a13cb9177fa5da9ba1f2d7598fdee65c546c Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 17 Mar 2026 12:59:48 +0200
Subject: [PATCH 2/7] feat(grid): add tokens for components used in the grid

---
 .../styles/components/grid/_grid-theme.scss   | 163 +++++++++++++++++-
 .../components/input/_input-group-theme.scss  |   2 +-
 2 files changed, 158 insertions(+), 7 deletions(-)

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 69615983afb..11b9e7898c7 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
@@ -3,6 +3,7 @@
 @use '../../base' as *;
 @use './excel-filtering-theme' as *;
 @use 'igniteui-theming/sass/animations' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
 
 @mixin _filtering-scroll-mask($theme, $dir) {
     display: block;
@@ -21,17 +22,167 @@
     @include css-vars($theme);
     @include scale-in-ver-center();
 
-    @include tokens(checkbox-theme(
-        $empty-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
-        $fill-color: var(--ig-grid-accent-color)
-    ));
-    @include tokens(chip-theme($background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background))));
-
     $variant: map.get($theme, '_meta', 'theme');
     $theme-variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: $variant != 'bootstrap';
 
+    $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}'
+    );
+
+    igx-grid {
+        @include tokens(
+            grid-toolbar-theme(
+                $schema: $schema,
+                $background-color: var(--ig-grid-background),
+                $title-text-color: var(--ig-grid-foreground),
+                $dropdown-background: var(--ig-grid-background),
+                $item-text-color: var(--ig-grid-foreground),
+                $item-hover-background: color-mix(in srgb, var(--ig-grid-accent-color) 8%, var(--ig-grid-background)),
+                $item-hover-text-color: var(--ig-grid-foreground),
+                $item-focus-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background)),
+                $item-focus-text-color: var(--ig-grid-foreground),
+                $border-color: color-mix(in srgb, var(--ig-grid-foreground) 20%, var(--ig-grid-background))
+            )
+        );
+
+        @include tokens(
+            grid-summary-theme(
+                $schema: $schema,
+                $background-color: var(--ig-grid-background),
+                $label-color: var(--ig-grid-accent-color),
+                $result-color: var(--ig-grid-foreground)
+            )
+        );
+
+        @include tokens(
+            column-actions-theme(
+                $schema: $schema,
+                $background-color: var(--ig-grid-background),
+                $title-color: var(--ig-grid-accent-color)
+            )
+        );
+
+        @include tokens(
+            list-theme(
+                $schema: $schema,
+                $background: var(--ig-grid-background)
+            )
+        );
+
+        .igx-excel-filter__menu,
+        .igx-excel-filter__menu .igx-button-group {
+            @include tokens(
+                button-group-theme(
+                    $schema: $schema,
+                    $item-background: transparent,
+                    $item-text-color: var(--ig-grid-foreground),
+                    $item-selected-text-color: var(--ig-grid-accent-color),
+                    $shadow: none
+                ),
+                $mode: 'scoped'
+            );
+        }
+
+        igx-paginator {
+            @include tokens(
+                paginator-theme(
+                    $schema: $schema,
+                    $background-color: var(--ig-grid-background),
+                    $text-color: var(--ig-grid-foreground)
+                )
+            );
+        }
+
+        .igx-drop-down__list {
+            @include tokens(
+                drop-down-theme(
+                    $schema: $schema,
+                    $background-color: var(--ig-grid-background),
+                    $selected-item-background: var(--ig-grid-accent-color),
+                )
+            );
+        }
+
+        @include tokens(
+            checkbox-theme(
+                $schema: $schema,
+                $empty-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+                $fill-color: var(--ig-grid-accent-color),
+                $label-color: var(--ig-grid-foreground),
+            )
+        );
+
+        @include tokens(
+            chip-theme(
+                $schema: $schema,
+                $background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                $text-color: var(--ig-grid-foreground)
+            )
+        );
+
+        @include tokens(outlined-button-theme($schema: $schema, $foreground: var(--ig-grid-accent-color)));
+        @include tokens(flat-button-theme($schema: $schema, $foreground: var(--ig-grid-accent-color)));
+        @include tokens(contained-button-theme($schema: $schema, $background: var(--ig-grid-accent-color)));
+
+        @include tokens(
+            select-theme(
+                $schema: $schema,
+                $toggle-button-background: var(--ig-grid-accent-color),
+                $toggle-button-background-disabled: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+            )
+        );
+
+        @include tokens(
+            flat-icon-button-theme(
+                $schema: $schema,
+                $foreground: var(--ig-grid-accent-color)
+            )
+        );
+
+        @include tokens(
+            outlined-icon-button-theme(
+                $schema: $schema,
+                $foreground: var(--ig-grid-accent-color)
+            )
+        );
+
+        @if $variant == 'material' {
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $box-background: var(--ig-grid-background),
+                    $idle-bottom-line-color: var(--ig-grid-accent-color),
+                    $border-color: var(--ig-grid-accent-color),
+                    $idle-text-color: var(--ig-grid-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $border-color: var(--ig-grid-accent-color),
+                    $idle-text-color: var(--ig-grid-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+                )
+            );
+        }
+
+        @include tokens(query-builder-theme($schema: $schema, $background: var(--ig-grid-background)));
+    }
+
     $cbx-size: map.get((
         'material': rem(20px),
         'fluent': rem(20px),
diff --git a/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss
index c3e1e78ca44..f146ed5c6df 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss
@@ -259,7 +259,7 @@
     }
 
     %form-group-display--filled {
-        color: var-get($theme, 'input-prefix-color--filled');
+        color: var-get($theme, 'filled-text-color');
 
         igx-prefix,
         [igxPrefix] {

From 37d257a279e41cb774b1df5fca7ea8572fb4b9a1 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 19 Mar 2026 12:20:40 +0200
Subject: [PATCH 3/7] feat(grid): implement new properties and set more inner
 component themes

---
 .../grid/_excel-filtering-theme.scss          |  78 ++------
 .../styles/components/grid/_grid-theme.scss   | 185 +++++++++++-------
 2 files changed, 125 insertions(+), 138 deletions(-)

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 0ebc1c4fb0d..390cebc9d6d 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
@@ -40,7 +40,7 @@
         flex-grow: 1;
 
         @if $variant == 'indigo' {
-            box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) color(null, 'gray', if($theme-variant == 'light', 400, 100));
+            box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) var-get($theme, 'excel-filtering-border-color');
 
             // TODO: The border-radius should not be hardcoded.
             border-radius: border-radius(rem(4px));
@@ -102,13 +102,13 @@
         opacity: 1;
 
         igx-icon {
-            color: if($variant == 'indigo', color($color: 'primary', $variant: 500), color($color: 'secondary'));
+            color: var-get($theme, 'sorted-header-icon-color');
         }
 
         @if $variant == 'indigo' {
             &:hover {
                 igx-icon {
-                    color: color($color: 'primary', $variant: 400);
+                    color: var-get($theme, 'sortable-header-icon-hover-color');
                 }
             }
         }
@@ -164,11 +164,7 @@
                 --disabled-selected-border-color: transparent;
             }
         } @else {
-            @if $theme-variant == 'light' {
-                background: contrast-color($color: 'gray', $variant: 900);
-            } @else {
-                background: color($color: 'gray', $variant: 50);
-            }
+            background: var-get($theme, 'filtering-row-background');
 
             %igx-group-display {
                 --item-background: transparent;
@@ -348,11 +344,7 @@
 
     %grid-excel-actions--selected {
         igx-icon {
-            color: if(
-                $variant == 'indigo',
-                color($color: 'primary', $variant: 200),
-                color($color: 'secondary')
-            );
+            color: var-get($theme, 'excel-filtering-actions-selected-icon-color');
         }
     }
 
@@ -401,25 +393,10 @@
         &:hover,
         &:focus {
             color: var-get($theme, 'excel-filtering-actions-hover-foreground');
+            background: var-get($theme, 'excel-filtering-actions-hover-background');
 
-            @if $variant == 'indigo' {
-                @if $theme-variant == 'light' {
-                    background: color($color: 'gray', $variant: 200);
-                } @else {
-                    background: contrast-color($color: 'gray', $variant: 50, $opacity: .1);
-                }
-
-                igx-icon {
-                    /* stylelint-disable max-nesting-depth */
-                    @if $theme-variant == 'light' {
-                        color: color($color: 'gray', $variant: 700);
-                    } @else {
-                        color: contrast-color($color: 'gray', $variant: 50, $opacity: .8);
-                    }
-                    /* stylelint-enable max-nesting-depth */
-                }
-            } @else {
-                background: color($color: 'gray', $variant: 100);
+            igx-icon {
+                color: var-get($theme, 'excel-filtering-actions-hover-icon-color');
             }
         }
 
@@ -427,11 +404,7 @@
             igx-icon {
                 --component-size: 2;
 
-                @if $theme-variant == 'light' {
-                    color: color($color: 'gray', $variant: 600);
-                } @else {
-                    color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
-                }
+                color: var-get($theme, 'excel-filtering-actions-icon-color');
             }
         }
 
@@ -449,7 +422,6 @@
     }
 
     %grid-excel-actions__action--active {
-        background: color($color: 'gray', $variant: 100);
         color: var-get($theme, 'excel-filtering-actions-hover-foreground');
     }
 
@@ -489,8 +461,6 @@
             overflow: hidden;
 
             @if $variant == 'indigo' {
-                --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,
@@ -510,19 +480,8 @@
             }
 
             border: 0;
-
-            @if $bootstrap-theme {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
-            } @else {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
-            }
-
-            @if $variant == 'indigo' and $theme-variant == 'dark' {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
-            }
+            border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+            border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
         }
 
         %igx-excel-filter__tree {
@@ -531,19 +490,8 @@
             margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1);
             margin-block: 0;
             flex: 1;
-
-            @if $bootstrap-theme {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
-            } @else {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
-            }
-
-            @if $variant == 'indigo' and $theme-variant == 'dark' {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
-            }
+            border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+            border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
 
             igx-icon {
                 width: var(--ig-icon-size, #{$tree-node-expander-size});
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 11b9e7898c7..9df9e24b402 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
@@ -43,111 +43,108 @@
 
     igx-grid {
         @include tokens(
-            grid-toolbar-theme(
+            action-strip-theme(
                 $schema: $schema,
-                $background-color: var(--ig-grid-background),
-                $title-text-color: var(--ig-grid-foreground),
-                $dropdown-background: var(--ig-grid-background),
-                $item-text-color: var(--ig-grid-foreground),
-                $item-hover-background: color-mix(in srgb, var(--ig-grid-accent-color) 8%, var(--ig-grid-background)),
-                $item-hover-text-color: var(--ig-grid-foreground),
-                $item-focus-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background)),
-                $item-focus-text-color: var(--ig-grid-foreground),
-                $border-color: color-mix(in srgb, var(--ig-grid-foreground) 20%, var(--ig-grid-background))
+                $background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, transparent),
+                $actions-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background))
             )
         );
 
         @include tokens(
-            grid-summary-theme(
+            banner-theme(
                 $schema: $schema,
-                $background-color: var(--ig-grid-background),
-                $label-color: var(--ig-grid-accent-color),
-                $result-color: var(--ig-grid-foreground)
+                $banner-background: var(--ig-grid-background),
+                $banner-message-color: var(--ig-grid-foreground),
+                $banner-illustration-color: var(--ig-grid-foreground),
+                $banner-border-color: color-mix(in srgb, var(--ig-grid-foreground) 20%, var(--ig-grid-background))
             )
         );
+        
+        @include tokens(
+            button-group-theme(
+                $schema: $schema,
+                $item-background: transparent,
+                $item-text-color: var(--ig-grid-foreground),
+                $item-selected-text-color: var(--ig-grid-accent-color),
+                $shadow: none
+            ),
+        );
+
+        @include tokens(contained-button-theme($schema: $schema, $background: var(--ig-grid-accent-color)));
+
+        @include tokens(flat-button-theme($schema: $schema, $foreground: var(--ig-grid-accent-color)));
+
+        @include tokens(outlined-button-theme($schema: $schema, $foreground: var(--ig-grid-accent-color)));
 
         @include tokens(
-            column-actions-theme(
+            checkbox-theme(
                 $schema: $schema,
-                $background-color: var(--ig-grid-background),
-                $title-color: var(--ig-grid-accent-color)
+                $empty-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+                $empty-fill-color: var(--ig-grid-background),
+                $tick-color-hover: color-mix(in srgb, var(--ig-grid-foreground) 40%, var(--ig-grid-background)),
+                $fill-color: var(--ig-grid-accent-color),
+                $label-color: var(--ig-grid-foreground),
             )
         );
 
         @include tokens(
-            list-theme(
+            chip-theme(
                 $schema: $schema,
-                $background: var(--ig-grid-background)
+                $background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                $text-color: var(--ig-grid-foreground)
             )
         );
 
-        .igx-excel-filter__menu,
-        .igx-excel-filter__menu .igx-button-group {
-            @include tokens(
-                button-group-theme(
-                    $schema: $schema,
-                    $item-background: transparent,
-                    $item-text-color: var(--ig-grid-foreground),
-                    $item-selected-text-color: var(--ig-grid-accent-color),
-                    $shadow: none
-                ),
-                $mode: 'scoped'
-            );
-        }
-
-        igx-paginator {
-            @include tokens(
-                paginator-theme(
-                    $schema: $schema,
-                    $background-color: var(--ig-grid-background),
-                    $text-color: var(--ig-grid-foreground)
-                )
-            );
-        }
+        @include tokens(
+            column-actions-theme(
+                $schema: $schema,
+                $background-color: var(--ig-grid-background),
+                $title-color: var(--ig-grid-accent-color)
+            )
+        );
 
         .igx-drop-down__list {
             @include tokens(
                 drop-down-theme(
                     $schema: $schema,
                     $background-color: var(--ig-grid-background),
-                    $selected-item-background: var(--ig-grid-accent-color),
+                    $border-color: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                    $selected-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background)),
+                    $selected-hover-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 16%, var(--ig-grid-background)),
+                    $selected-focus-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 24%, var(--ig-grid-background)),
                 )
             );
         }
 
         @include tokens(
-            checkbox-theme(
-                $schema: $schema,
-                $empty-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
-                $fill-color: var(--ig-grid-accent-color),
-                $label-color: var(--ig-grid-foreground),
-            )
-        );
-
-        @include tokens(
-            chip-theme(
+            grid-summary-theme(
                 $schema: $schema,
-                $background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
-                $text-color: var(--ig-grid-foreground)
+                $background-color: var(--ig-grid-background),
+                $label-color: var(--ig-grid-accent-color),
+                $result-color: var(--ig-grid-foreground)
             )
         );
 
-        @include tokens(outlined-button-theme($schema: $schema, $foreground: var(--ig-grid-accent-color)));
-        @include tokens(flat-button-theme($schema: $schema, $foreground: var(--ig-grid-accent-color)));
-        @include tokens(contained-button-theme($schema: $schema, $background: var(--ig-grid-accent-color)));
-
         @include tokens(
-            select-theme(
+            grid-toolbar-theme(
                 $schema: $schema,
-                $toggle-button-background: var(--ig-grid-accent-color),
-                $toggle-button-background-disabled: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+                $background-color: var(--ig-grid-background),
+                $title-text-color: var(--ig-grid-foreground),
+                $dropdown-background: var(--ig-grid-background),
+                $item-text-color: var(--ig-grid-foreground),
+                $item-hover-background: color-mix(in srgb, var(--ig-grid-accent-color) 8%, var(--ig-grid-background)),
+                $item-hover-text-color: var(--ig-grid-foreground),
+                $item-focus-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background)),
+                $item-focus-text-color: var(--ig-grid-foreground),
+                $border-color: color-mix(in srgb, var(--ig-grid-foreground) 20%, var(--ig-grid-background))
             )
         );
 
         @include tokens(
             flat-icon-button-theme(
                 $schema: $schema,
-                $foreground: var(--ig-grid-accent-color)
+                $foreground: var(--ig-grid-accent-color),
+                $disabled-background: color-mix(in srgb, var(--ig-grid-foreground) 10%, var(--ig-grid-background))
             )
         );
 
@@ -158,7 +155,7 @@
             )
         );
 
-        @if $variant == 'material' {
+        @if $variant == 'material' or $variant == 'indigo' {
             @include tokens(
                 input-group-theme(
                     $schema: $schema,
@@ -176,11 +173,60 @@
                     $border-color: var(--ig-grid-accent-color),
                     $idle-text-color: var(--ig-grid-foreground),
                     $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+                    $input-prefix-background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                )
+            );
+        }
+
+        @include tokens(
+            list-theme(
+                $schema: $schema,
+                $background: var(--ig-grid-background)
+            )
+        );
+
+        igx-paginator {
+            @include tokens(
+                paginator-theme(
+                    $schema: $schema,
+                    $background-color: var(--ig-grid-background),
+                    $text-color: var(--ig-grid-foreground),
+                    $border-color: color-mix(in srgb, var(--ig-grid-foreground) 16%, var(--ig-grid-background)),
                 )
             );
         }
 
         @include tokens(query-builder-theme($schema: $schema, $background: var(--ig-grid-background)));
+
+        @include tokens(
+            scrollbar-theme(
+                $schema: $schema,
+                $sb-track-bg-color: var(--ig-grid-background),
+                $sb-thumb-bg-color: color-mix(in srgb, var(--ig-grid-foreground) 50%, var(--ig-grid-background)),
+                $sb-track-border-color: color-mix(in srgb, var(--ig-grid-foreground) 16%, var(--ig-grid-background)),
+            ),
+            $mode: 'scoped'
+        );
+
+        @if $variant == 'indigo' {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-foreground: var(--ig-grid-accent-color),
+                    $toggle-button-foreground-disabled: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-background: var(--ig-grid-accent-color),
+                    $toggle-button-background-disabled: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+                )
+            );
+        }
+
+        @include tokens(tree-theme($background: var(--ig-grid-background)), $mode: 'scoped');
     }
 
     $cbx-size: map.get((
@@ -1971,7 +2017,7 @@
     }
 
     %grid-summaries--body {
-        --summaries-patch-background: var(--ig-gray-100);
+        // --summaries-patch-background: var(--ig-gray-100);
 
         border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
         background-color: var-get($theme, 'summaries-patch-background');
@@ -2869,14 +2915,7 @@
     @include excel-filtering($theme);
 
     %advanced-filtering-dialog {
-	    @if $variant == 'indigo' {
-		    $light-variant: contrast-color($color: 'gray', $variant: 900);
-		    $dark-variant: color($color: 'gray', $variant: 50);
-		    background: if($theme-variant == 'light', $light-variant,  $dark-variant);
-	    } @else {
-		    background: color($color: 'surface', $variant: 500);
-	    }
-
+	    background: var-get($theme, 'filtering-row-background');
         box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
 
         @if $variant == 'material' or $variant == 'bootstrap' {

From 9dca793ed4c3dbd38b459469f2ad5e1c3175a4c3 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 19 Mar 2026 13:12:15 +0200
Subject: [PATCH 4/7] chore(grid): fix button-group tokens import

---
 .../styles/components/grid/_grid-theme.scss   | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

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 9df9e24b402..46e30007035 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
@@ -59,16 +59,20 @@
                 $banner-border-color: color-mix(in srgb, var(--ig-grid-foreground) 20%, var(--ig-grid-background))
             )
         );
-        
-        @include tokens(
-            button-group-theme(
-                $schema: $schema,
-                $item-background: transparent,
-                $item-text-color: var(--ig-grid-foreground),
-                $item-selected-text-color: var(--ig-grid-accent-color),
-                $shadow: none
-            ),
-        );
+
+        .igx-excel-filter__menu .igx-button-group,
+        .igx-button-group {
+            @include tokens(
+                button-group-theme(
+                    $schema: $schema,
+                    $item-background: transparent,
+                    $item-text-color: var(--ig-grid-foreground),
+                    $item-selected-text-color: var(--ig-grid-accent-color),
+                    $shadow: none
+                ),
+                $mode: 'scoped'
+            );
+        }
 
         @include tokens(contained-button-theme($schema: $schema, $background: var(--ig-grid-accent-color)));
 

From 6fc3907c0d7cb289cc67ff335710776456a5b1fc Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 19 Mar 2026 19:49:15 +0200
Subject: [PATCH 5/7] feat(grid): improve grid theming

---
 .../styles/components/grid/_grid-theme.scss   | 122 +++++++++++++-----
 .../grid-search-box.component.html            |   8 +-
 .../grid-search-box.component.ts              |   2 +-
 3 files changed, 93 insertions(+), 39 deletions(-)

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 46e30007035..8dc55cea273 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
@@ -46,7 +46,8 @@
             action-strip-theme(
                 $schema: $schema,
                 $background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, transparent),
-                $actions-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background))
+                $actions-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background)),
+                $icon-color: var(--ig-grid-foreground),
             )
         );
 
@@ -88,6 +89,7 @@
                 $tick-color-hover: color-mix(in srgb, var(--ig-grid-foreground) 40%, var(--ig-grid-background)),
                 $fill-color: var(--ig-grid-accent-color),
                 $label-color: var(--ig-grid-foreground),
+                $disabled-color: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background))
             )
         );
 
@@ -95,7 +97,7 @@
             chip-theme(
                 $schema: $schema,
                 $background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
-                $text-color: var(--ig-grid-foreground)
+                $text-color: var(--ig-grid-foreground),
             )
         );
 
@@ -112,6 +114,7 @@
                 drop-down-theme(
                     $schema: $schema,
                     $background-color: var(--ig-grid-background),
+                    $item-text-color: var(--ig-grid-foreground),
                     $border-color: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
                     $selected-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background)),
                     $selected-hover-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 16%, var(--ig-grid-background)),
@@ -124,6 +127,7 @@
             grid-summary-theme(
                 $schema: $schema,
                 $background-color: var(--ig-grid-background),
+                $border-color: color-mix(in srgb, var(--ig-grid-foreground) 20%, var(--ig-grid-background)),
                 $label-color: var(--ig-grid-accent-color),
                 $result-color: var(--ig-grid-foreground)
             )
@@ -144,6 +148,14 @@
             )
         );
 
+        @include tokens(
+            highlight-theme(
+                $schema: $schema,
+                $resting-background: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+                $active-background: var(--ig-grid-accent-color)
+            )
+        );
+
         @include tokens(
             flat-icon-button-theme(
                 $schema: $schema,
@@ -159,7 +171,14 @@
             )
         );
 
-        @if $variant == 'material' or $variant == 'indigo' {
+        @include tokens(
+            ripple-theme(
+                $schema: $schema,
+                $color: var(--ig-grid-foreground)
+            )
+        );
+
+        @if $variant == 'material' {
             @include tokens(
                 input-group-theme(
                     $schema: $schema,
@@ -170,6 +189,25 @@
                     $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
                 )
             );
+
+            .igx-input-group--search {
+                @include tokens(
+                    input-group-theme(
+                        $schema: $schema,
+                        $search-background: var(--ig-grid-background)
+                    )
+                );
+            }
+        }
+        @if $variant == 'indigo' {
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $idle-bottom-line-color: var(--ig-grid-accent-color),
+                    $idle-text-color: var(--ig-grid-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+                )
+            );
         } @else {
             @include tokens(
                 input-group-theme(
@@ -200,7 +238,12 @@
             );
         }
 
-        @include tokens(query-builder-theme($schema: $schema, $background: var(--ig-grid-background)));
+        @include tokens(
+            query-builder-theme(
+                $schema: $schema,
+                $background: var(--ig-grid-background)
+            )
+        );
 
         @include tokens(
             scrollbar-theme(
@@ -230,7 +273,22 @@
             );
         }
 
-        @include tokens(tree-theme($background: var(--ig-grid-background)), $mode: 'scoped');
+        @include tokens(
+            tree-theme(
+                $schema: $schema,
+                $background: var(--ig-grid-background)
+            ),
+            // $mode: 'scoped'
+        );
+
+        @include tokens(
+            watermark-theme(
+                $schema: $schema,
+                $base-color: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+                $color: var(--ig-grid-foreground),
+                $border-color: color-mix(in srgb, var(--ig-grid-accent-color) 16%, var(--ig-grid-background))
+            )
+        );
     }
 
     $cbx-size: map.get((
@@ -517,7 +575,7 @@
                 min-width: rem(140px);
 
                 @if $variant != 'fluent' {
-                    border: rem(1px) solid color($color: 'gray', $variant: 300);
+                    border: rem(1px) solid color-mix(in srgb, var(--ig-grid-accent-color, var(--ig-gray-300)) 70%, var(--ig-grid-background, var(--ig-gray-300)));
                 }
 
                 --size: calc(#{$filtering-row-height} - #{rem(8px)});
@@ -574,13 +632,13 @@
 
                 &:hover{
                     color: var-get($theme, 'filtering-row-text-color');
-                    border-color: color($color: 'primary', $variant: 500);
+                    border-color: var(--ig-grid-accent-color, var(--ig-primary-500));
                 }
             }
 
             .igx-input-group--focused {
                 @if $variant != 'fluent' {
-                    border-color: color($color: 'primary', $variant: 500);
+                    border-color: var(--ig-grid-accent-color, var(--ig-primary-500));
                     border-width: rem(1px);
                 }
 
@@ -618,7 +676,7 @@
             }
 
             igx-prefix:focus {
-                color: color(map.get($theme, 'palette'), 'secondary');
+                color: var-get($theme, 'sorted-header-icon-color');
             }
 
             igx-suffix {
@@ -626,7 +684,7 @@
                     outline-style: none;
 
                     &:focus {
-                        color: color($color: 'secondary');
+                        color: var-get($theme, 'sorted-header-icon-color');
                     }
 
                     + igx-icon {
@@ -643,43 +701,43 @@
     igx-tree-grid {
         @if $variant == 'material' {
             @if $theme-variant == 'light' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-500)) 50%, var(--ig-grid-background, var(--ig-gray-500)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-300)) 12%, var(--ig-grid-background, var(--ig-gray-300)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-300)) 24%, var(--ig-grid-background, var(--ig-gray-300)));
             }
             @if $theme-variant == 'dark' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-300)) 50%, var(--ig-grid-background, var(--ig-gray-300)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-200)) 12%, var(--ig-grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-200)) 24%, var(--ig-grid-background, var(--ig-gray-200)));
             }
         }
 
         @if $variant == 'fluent' {
             @if $theme-variant == 'dark' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-400)) 50%, var(--ig-grid-background, var(--ig-gray-400)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-200)) 12%, var(--ig-grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-200)) 24%, var(--ig-grid-background, var(--ig-gray-200)));
             }
         }
 
         @if $variant == 'bootstrap' {
             @if $theme-variant == 'dark' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-400)) 50%, var(--ig-grid-background, var(--ig-gray-400)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-200)) 12%, var(--ig-grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-200)) 24%, var(--ig-grid-background, var(--ig-gray-200)));
             }
         }
 
         @if $variant == 'indigo' {
             @if $theme-variant == 'light' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-500)) 50%, var(--ig-grid-background, var(--ig-gray-500)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-200)) 12%, var(--ig-grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-300)) 24%, var(--ig-grid-background, var(--ig-gray-300)));
             }
             @if $theme-variant == 'dark' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-300)) 50%, var(--ig-grid-background, var(--ig-gray-300)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-200)) 12%, var(--ig-grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-200)) 24%, var(--ig-grid-background, var(--ig-gray-200)));
             }
         }
     }
@@ -1216,17 +1274,13 @@
         }
 
         %igx-icon--error {
-            @if $variant == 'indigo' or $theme-variant == 'dark' {
-                color: color($color: 'gray', $variant: 500);
-            } @else {
-                color: color($color: 'gray', $variant: 600);
-            }
+            color: var-get($theme, 'grouparea-color');
         }
     }
 
     %igx-grid__td--bool-true {
         %igx-icon--success {
-            color: color($color: 'gray', $variant: 700);
+            color: var-get($theme, 'drop-area-text-color');
         }
     }
 
diff --git a/src/app/grid-search-box/grid-search-box.component.html b/src/app/grid-search-box/grid-search-box.component.html
index f4acb8f175c..32493b7f9fd 100644
--- a/src/app/grid-search-box/grid-search-box.component.html
+++ b/src/app/grid-search-box/grid-search-box.component.html
@@ -30,17 +30,17 @@
             }
             <div class="chips">
                 <igx-chips-area>
-                    <igx-chip (click)="updateSearch()" [color]="caseSensitive? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
+                    <igx-chip (click)="updateSearch()" [color]="caseSensitive? 'var(--item-focus-background)' : 'rgba(0, 0, 0, .04)'">
                         <span title="Match Case">Aa</span>
                     </igx-chip>
-                    <igx-chip (click)="updateExactSearch()" [color]="exactMatch? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
+                    <igx-chip (click)="updateExactSearch()" [color]="exactMatch? 'var(--item-focus-background)' : 'rgba(0, 0, 0, .04)'">
                         <u title="Match Whole Word">Ab</u>
                     </igx-chip>
                 </igx-chips-area>
             </div>
             <div class="searchButtons">
-                <igx-icon igxRipple [igxRippleCentered]="true" (click)="grid.findPrev(searchText, caseSensitive, exactMatch)">navigate_before</igx-icon>
-                <igx-icon igxRipple [igxRippleCentered]="true" (click)="grid.findNext(searchText, caseSensitive, exactMatch)">navigate_next</igx-icon>
+                <igx-icon (click)="grid.findPrev(searchText, caseSensitive, exactMatch)">navigate_before</igx-icon>
+                <igx-icon (click)="grid.findNext(searchText, caseSensitive, exactMatch)">navigate_next</igx-icon>
             </div>
         </igx-suffix>
     }
diff --git a/src/app/grid-search-box/grid-search-box.component.ts b/src/app/grid-search-box/grid-search-box.component.ts
index 557f3931a07..586ccb73982 100644
--- a/src/app/grid-search-box/grid-search-box.component.ts
+++ b/src/app/grid-search-box/grid-search-box.component.ts
@@ -7,7 +7,7 @@ import { IGX_CHIPS_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IgxGridComponent, Igx
     selector: 'app-grid-search-box',
     styleUrls: ['./grid-search-box.component.scss'],
     templateUrl: './grid-search-box.component.html',
-    imports: [IgxIconComponent, FormsModule, IgxRippleDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_CHIPS_DIRECTIVES]
+    imports: [IgxIconComponent, FormsModule, IGX_INPUT_GROUP_DIRECTIVES, IGX_CHIPS_DIRECTIVES]
 })
 export class GridSearchBoxComponent {
     @Input()

From c7a01a0a870b77642a57d5a5f27264e531c9094d Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Fri, 20 Mar 2026 10:14:36 +0200
Subject: [PATCH 6/7] feat(grid-builder): update button disabled states and
 hardcoded values

---
 .../grid/_excel-filtering-theme.scss          |   2 +-
 .../styles/components/grid/_grid-theme.scss   | 105 ++++++++++++------
 .../query-builder/_query-builder-theme.scss   |   6 -
 3 files changed, 73 insertions(+), 40 deletions(-)

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 390cebc9d6d..86ff42158d7 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
@@ -669,7 +669,7 @@
 
         @if $bootstrap-theme {
             padding-block-start: pad-block(rem(16px));
-            border-top: rem(1px) solid color($color: 'gray', $variant: 300);
+            border-top: rem(1px) solid color-mix(in srgb, var(--ig-grid-foreground, --ig-gray-300) 20%, var(--ig-grid-background, --ig-gray-300));
         }
 
         %grid-excel-filter__apply,
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 8dc55cea273..5f16687f5e1 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
@@ -47,7 +47,7 @@
                 $schema: $schema,
                 $background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, transparent),
                 $actions-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background)),
-                $icon-color: var(--ig-grid-foreground),
+                $icon-color: var(--ig-grid-accent-color),
             )
         );
 
@@ -75,11 +75,33 @@
             );
         }
 
-        @include tokens(contained-button-theme($schema: $schema, $background: var(--ig-grid-accent-color)));
+        @include tokens(
+            contained-button-theme(
+                $schema: $schema,
+                $background: var(--ig-grid-accent-color),
+                $disabled-background: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+                $disabled-foreground: color-mix(in srgb, var(--ig-grid-foreground) 50%, var(--ig-grid-background)),
+            )
+        );
 
-        @include tokens(flat-button-theme($schema: $schema, $foreground: var(--ig-grid-accent-color)));
+        @include tokens(
+            flat-button-theme(
+                $schema: $schema,
+                $foreground: var(--ig-grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+            )
+        );
 
-        @include tokens(outlined-button-theme($schema: $schema, $foreground: var(--ig-grid-accent-color)));
+        @include tokens(
+            outlined-button-theme(
+                $schema: $schema,
+                $foreground: var(--ig-grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+                $disabled-border-color: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+            )
+        );
 
         @include tokens(
             checkbox-theme(
@@ -98,6 +120,9 @@
                 $schema: $schema,
                 $background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
                 $text-color: var(--ig-grid-foreground),
+                $disabled-background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                $disabled-text-color: color-mix(in srgb, var(--ig-grid-foreground) 50%, var(--ig-grid-background)),
+                $disabled-border-color: color-mix(in srgb, var(--ig-grid-foreground) 24%, var(--ig-grid-background)),
             )
         );
 
@@ -160,46 +185,45 @@
             flat-icon-button-theme(
                 $schema: $schema,
                 $foreground: var(--ig-grid-accent-color),
-                $disabled-background: color-mix(in srgb, var(--ig-grid-foreground) 10%, var(--ig-grid-background))
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
             )
         );
 
         @include tokens(
             outlined-icon-button-theme(
                 $schema: $schema,
-                $foreground: var(--ig-grid-accent-color)
-            )
-        );
-
-        @include tokens(
-            ripple-theme(
-                $schema: $schema,
-                $color: var(--ig-grid-foreground)
+                $foreground: var(--ig-grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
+                $disabled-border-color: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background))
             )
         );
 
         @if $variant == 'material' {
-            @include tokens(
-                input-group-theme(
-                    $schema: $schema,
-                    $box-background: var(--ig-grid-background),
-                    $idle-bottom-line-color: var(--ig-grid-accent-color),
-                    $border-color: var(--ig-grid-accent-color),
-                    $idle-text-color: var(--ig-grid-foreground),
-                    $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
-                )
-            );
+            .igx-input-group--box {
+                @include tokens(
+                    input-group-theme(
+                        $schema: $schema,
+                        $box-background: var(--ig-grid-background),
+                        $idle-bottom-line-color: var(--ig-grid-accent-color),
+                        $border-color: var(--ig-grid-accent-color),
+                        $idle-text-color: var(--ig-grid-foreground),
+                        $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+                    )
+                );
+            }
 
             .igx-input-group--search {
                 @include tokens(
                     input-group-theme(
                         $schema: $schema,
-                        $search-background: var(--ig-grid-background)
+                        $search-background: color-mix(in srgb, var(--ig-grid-foreground) 6%, var(--ig-grid-background)),
+                        $idle-text-color: var(--ig-grid-foreground),
                     )
                 );
             }
-        }
-        @if $variant == 'indigo' {
+        } @else if $variant == 'indigo' {
             @include tokens(
                 input-group-theme(
                     $schema: $schema,
@@ -215,7 +239,9 @@
                     $border-color: var(--ig-grid-accent-color),
                     $idle-text-color: var(--ig-grid-foreground),
                     $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
-                    $input-prefix-background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                    $input-prefix-background: var(--ig-grid-accent-color),
+                    $border-disabled-background: transparent,
+                    $disabled-border-color: color-mix(in srgb, var(--ig-grid-accent-color) 50%, transparent),
                 )
             );
         }
@@ -238,12 +264,24 @@
             );
         }
 
-        @include tokens(
-            query-builder-theme(
-                $schema: $schema,
-                $background: var(--ig-grid-background)
-            )
-        );
+        @if $variant == 'bootstrap' {
+            @include tokens(
+                query-builder-theme(
+                    $schema: $schema,
+                    $background: var(--ig-grid-background),
+                    $header-foreground: var(--ig-grid-foreground),
+                    $header-border: color-mix(in srgb, var(--ig-grid-foreground) 20%, var(--ig-grid-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                query-builder-theme(
+                    $schema: $schema,
+                    $background: var(--ig-grid-background),
+                    $header-foreground: var(--ig-grid-foreground),
+                )
+            );
+        }
 
         @include tokens(
             scrollbar-theme(
@@ -267,6 +305,7 @@
             @include tokens(
                 select-theme(
                     $schema: $schema,
+                    $toggle-button-foreground: var(--ig-grid-foreground),
                     $toggle-button-background: var(--ig-grid-accent-color),
                     $toggle-button-background-disabled: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
                 )
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 783b9ce11ec..7a3858e8125 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
@@ -257,11 +257,8 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
-				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
 				--focus-visible-background: transparent;
 				--focus-background: transparent;
-				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
-				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-and')};
@@ -307,11 +304,8 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
-				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
 				--focus-visible-background: transparent;
 				--focus-background: transparent;
-				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
-				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-or')};

From 645f17a9884e46ce0e2fc61b521ed8a16ff26702 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Fri, 20 Mar 2026 14:08:56 +0200
Subject: [PATCH 7/7] feat(grid-theme-builder): revert query-builder, fix
 select and checkbox themes

---
 .../components/checkbox/_checkbox-theme.scss  | 11 +---
 .../styles/components/grid/_grid-theme.scss   | 56 ++++++++++---------
 .../query-builder/_query-builder-theme.scss   |  6 ++
 .../components/select/_select-theme.scss      |  2 +-
 4 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/projects/igniteui-angular/core/src/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/checkbox/_checkbox-theme.scss
index 3bcf97b1d4d..d86c20b7fe9 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/checkbox/_checkbox-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/checkbox/_checkbox-theme.scss
@@ -175,15 +175,8 @@
     }
 
     %cbx-composite--x--disabled {
-        @if $variant == 'material' or $variant == 'fluent' {
-            background: var-get($theme, 'disabled-color');
-            border-color: var-get($theme, 'disabled-color');
-        }
-
-        @if $variant == 'indigo' or $variant == 'bootstrap' {
-            background: var-get($theme, 'disabled-indeterminate-color');
-            border-color: transparent;
-        }
+        background: var-get($theme, 'disabled-fill-color');
+        border-color: transparent;
 
         @if $variant != 'indigo' {
             %cbx-composite-mark {
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 5f16687f5e1..7f0b6fd1d1f 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
@@ -41,7 +41,11 @@
         '#{$theme-variant}-#{$variant}'
     );
 
-    igx-grid {
+    igx-grid,
+    igx-tree-grid,
+    igx-hierarchical-grid,
+    igx-pivot-grid,
+    igx-grid-lite {
         @include tokens(
             action-strip-theme(
                 $schema: $schema,
@@ -103,6 +107,14 @@
             )
         );
 
+        @include tokens(
+            calendar-theme(
+                $header-background: var(--ig-grid-accent-color),
+                $content-background: var(--ig-grid-background),
+                $content-foreground: var(--ig-grid-foreground),
+            )
+        );
+
         @include tokens(
             checkbox-theme(
                 $schema: $schema,
@@ -111,7 +123,7 @@
                 $tick-color-hover: color-mix(in srgb, var(--ig-grid-foreground) 40%, var(--ig-grid-background)),
                 $fill-color: var(--ig-grid-accent-color),
                 $label-color: var(--ig-grid-foreground),
-                $disabled-color: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background))
+                $disabled-color: color-mix(in srgb, var(--ig-grid-foreground) 50%, var(--ig-grid-background)),
             )
         );
 
@@ -141,6 +153,8 @@
                     $background-color: var(--ig-grid-background),
                     $item-text-color: var(--ig-grid-foreground),
                     $border-color: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                    $hover-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 8%, var(--ig-grid-background)),
+                    $focused-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background)),
                     $selected-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 12%, var(--ig-grid-background)),
                     $selected-hover-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 16%, var(--ig-grid-background)),
                     $selected-focus-item-background: color-mix(in srgb, var(--ig-grid-accent-color) 24%, var(--ig-grid-background)),
@@ -201,28 +215,19 @@
         );
 
         @if $variant == 'material' {
-            .igx-input-group--box {
-                @include tokens(
-                    input-group-theme(
-                        $schema: $schema,
-                        $box-background: var(--ig-grid-background),
-                        $idle-bottom-line-color: var(--ig-grid-accent-color),
-                        $border-color: var(--ig-grid-accent-color),
-                        $idle-text-color: var(--ig-grid-foreground),
-                        $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
-                    )
-                );
-            }
-
-            .igx-input-group--search {
-                @include tokens(
-                    input-group-theme(
-                        $schema: $schema,
-                        $search-background: color-mix(in srgb, var(--ig-grid-foreground) 6%, var(--ig-grid-background)),
-                        $idle-text-color: var(--ig-grid-foreground),
-                    )
-                );
-            }
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $box-background: var(--ig-grid-background),
+                    $search-background: color-mix(in srgb, var(--ig-grid-foreground) 6%, var(--ig-grid-background)),
+                    $idle-bottom-line-color: var(--ig-grid-accent-color),
+                    $idle-secondary-color: var(--ig-grid-foreground),
+                    $focused-secondary-color: var(--ig-grid-accent-color),
+                    $border-color: var(--ig-grid-accent-color),
+                    $idle-text-color: var(--ig-grid-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background)),
+                )
+            );
         } @else if $variant == 'indigo' {
             @include tokens(
                 input-group-theme(
@@ -305,9 +310,7 @@
             @include tokens(
                 select-theme(
                     $schema: $schema,
-                    $toggle-button-foreground: var(--ig-grid-foreground),
                     $toggle-button-background: var(--ig-grid-accent-color),
-                    $toggle-button-background-disabled: color-mix(in srgb, var(--ig-grid-accent-color) 50%, var(--ig-grid-background)),
                 )
             );
         }
@@ -553,6 +556,7 @@
         igx-prefix,
         igx-suffix {
             background: transparent !important;
+            color: var(--ig-input-group-idle-text-color) !important;
             border-radius: 0 !important;
             padding-top: 0 !important;
             padding-bottom: 0 !important;
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 7a3858e8125..783b9ce11ec 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
@@ -257,8 +257,11 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
+				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
 				--focus-visible-background: transparent;
 				--focus-background: transparent;
+				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-and')};
@@ -304,8 +307,11 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
+				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
 				--focus-visible-background: transparent;
 				--focus-background: transparent;
+				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-or')};
diff --git a/projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss
index aca394245c0..1f00f760b6c 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss
@@ -49,7 +49,7 @@
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
         @if $variant == 'material' {
             %igx-select__toggle-button {
-                background: var-get($theme, 'toggle-button-background-focus--border');
+                background: var-get($theme, 'toggle-button-background');
             }
         }
     }