diff --git a/projects/igniteui-angular-elements/src/index.html b/projects/igniteui-angular-elements/src/index.html
index 7925ee28f86..f64eb4d7dd8 100644
--- a/projects/igniteui-angular-elements/src/index.html
+++ b/projects/igniteui-angular-elements/src/index.html
@@ -17,9 +17,6 @@
         igc-grid,
         igc-tree-grid {
             max-height: 550px;
-            --ig-grid-grouparea-background: #ff000012;
-            --ig-grid-drop-area-background: #ff004c12;
-            --ig-paginator-border-color: #d0ab23;
         }
 
         .range-wrapper {
@@ -443,7 +440,7 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
     <script type="module">
         import { html } from "/lit-html.js";
         // jump around vite import analysis with dynamic import url
-        const hgridData = (await import(`/assets/${'data'}/projects-hgrid.js`)).default;
+        const hgridData = (await import(/* @vite-ignore */ `/assets/${'data'}/projects-hgrid.js`)).default;
         let hgrid = document.getElementById('hgrid1');
         hgrid.data = hgridData;
 
diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
index 1cd13a4877e..24134084c08 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
@@ -373,6 +373,10 @@
                 border-color: var-get($theme, 'item-selected-border-color');
                 background: var-get($theme, 'item-selected-hover-background');
 
+                igx-icon {
+                    color: var-get($theme, 'item-selected-icon-color');
+                }
+
                 &::before {
                     background: var-get($theme, 'item-selected-focus-background');
                 }
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..6c76bf9531b 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');
                 }
             }
         }
@@ -126,65 +126,8 @@
 
         @if $variant != 'indigo' {
             background: var-get($theme, 'filtering-row-background');
-
-            %igx-group-display {
-                --elevation: none;
-                --item-background: #{var-get($theme, 'filtering-row-background')};
-                --item-hover-background: #{color($color: 'gray', $variant: 100)};
-                --item-selected-background: #{color($color: 'gray', $variant: 100)};
-                --item-text-color: #{color($color: 'gray', $variant: 700)};
-                --item-icon-color: #{color($color: 'gray', $variant: 700)};
-                --item-hover-text-color: #{color($color: 'gray', $variant: 800)};
-                --item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
-                --item-selected-text-color: #{if(
-                $variant == 'indigo',
-                contrast-color($color: 'surface'),
-                color($color: 'secondary', $variant: 500)
-            )};
-                --item-selected-icon-color: #{if(
-                $variant == 'indigo',
-                contrast-color($color: 'surface'),
-                color($color: 'secondary', $variant: 500)
-            )};
-                --item-selected-hover-icon-color: #{if(
-                $variant == 'fluent',
-                color($color: 'secondary', $variant: 500),
-                contrast-color($color: 'gray', $variant: 50)
-            )};
-                --item-border-color: transparent;
-                --item-hover-border-color: transparent;
-                --item-focused-border-color: #{if(
-                $variant == 'fluent',
-                color($color: 'gray', $variant: 700),
-                transparent
-            )};
-                --item-selected-border-color: transparent;
-                --item-selected-hover-border-color: transparent;
-                --item-disabled-border: transparent;
-                --disabled-selected-border-color: transparent;
-            }
         } @else {
-            @if $theme-variant == 'light' {
-                background: contrast-color($color: 'gray', $variant: 900);
-            } @else {
-                background: color($color: 'gray', $variant: 50);
-            }
-
-            %igx-group-display {
-                --item-background: transparent;
-                @if $theme-variant == 'dark' {
-                    --item-text-color: #{contrast-color($color: 'surface', $variant: 500)};
-                }
-                --border-color: transparent;
-                --item-border-color: transparent;
-                --item-focused-border-color: transparent;
-                --item-hover-border-color: transparent;
-                --item-selected-border-color: transparent;
-                --item-selected-hover-border-color: transparent;
-                --item-disabled-border: transparent;
-                --disabled-selected-border-color: transparent;
-                --elevation: none;
-            }
+            background: var-get($theme, 'filtering-dialog-background');
 
             %igx-group-item {
                 &:not(:nth-child(1)) {
@@ -348,11 +291,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 +340,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 +351,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 +369,6 @@
     }
 
     %grid-excel-actions__action--active {
-        background: color($color: 'gray', $variant: 100);
         color: var-get($theme, 'excel-filtering-actions-hover-foreground');
     }
 
@@ -468,6 +387,7 @@
         display: grid;
         place-items: center;
         height: 100%;
+        color: var-get($theme, 'excel-filtering-subheader-foreground');
     }
 
     %grid-excel-main {
@@ -489,7 +409,7 @@
             overflow: hidden;
 
             @if $variant == 'indigo' {
-                --background: #{color($color: 'surface', $variant: 500)};
+                --background: var(--ig-grid-background, #{color($color: 'surface', $variant: 500)});
 
                 margin-inline: calc(sizable(rem(-16px)) * -1);
 
@@ -510,19 +430,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 +440,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});
@@ -721,7 +619,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 24d0caf723d..09cbec87456 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;
@@ -26,6 +27,368 @@
     $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,
+    igc-grid,
+    igx-tree-grid,
+    igc-tree-grid,
+    igx-hierarchical-grid,
+    igc-hierarchical-grid,
+    igx-pivot-grid,
+    igc-pivot-grid,
+    igx-grid-lite,
+    igc-grid-lite {
+        @include tokens(
+            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)),
+                $icon-color: var(--ig-grid-accent-color),
+            )
+        );
+
+        @include tokens(
+            badge-theme(
+                $schema: $schema,
+                $background-color: var(--ig-grid-accent-color),
+            )
+        );
+
+        @include tokens(
+            banner-theme(
+                $schema: $schema,
+                $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))
+            )
+        );
+
+        .igx-excel-filter__menu .igx-button-group,
+        .igx-button-group {
+            @if $variant == 'indigo' {
+                --ig-btn-group-selected-bg: #{dynamic-shade(var(--ig-grid-background), $offset: 10)};
+            }
+
+            @include tokens(
+                button-group-theme(
+                    $schema: $schema,
+                    $item-background: var(--ig-grid-background, #{var-get($theme, if($variant == 'indigo', 'filtering-dialog-background', 'filtering-row-background'))}),
+                    $item-border-color: transparent,
+                    $item-text-color: var(--ig-grid-foreground, #{color($color: 'gray', $variant: 700)}),
+                    $item-selected-background: if(
+                        $variant == 'indigo',
+                        var(--ig-btn-group-selected-bg, var(--ig-primary-500)),
+                        null
+                    ),
+                    $item-selected-text-color: var(--ig-grid-accent-color, #{if(
+                        $variant == 'indigo',
+                        contrast-color($color: 'surface'),
+                        if($variant == 'material',
+                            color($color: 'secondary', $variant: 500),
+                            color($color: 'primary', $variant: 500)
+                        )
+                    )}),
+                    $item-selected-hover-text-color: var(--ig-grid-foreground, #{color($color: 'gray', $variant: 700)}),
+                    $shadow: none
+                ),
+                $mode: 'scoped'
+            );
+        }
+
+        @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),
+                $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),
+                $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(
+            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,
+                $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),
+                $disabled-color: color-mix(in srgb, var(--ig-grid-foreground) 50%, var(--ig-grid-background)),
+            )
+        );
+
+        @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),
+                $ghost-background: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                $ghost-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)),
+            )
+        );
+
+        @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),
+                    $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)),
+                )
+            );
+        }
+
+        @include tokens(
+            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)
+            )
+        );
+
+        @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(
+            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,
+                $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-icon-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))
+            )
+        );
+
+        @if $variant == 'material' {
+            @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(
+                    $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(
+                    $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)),
+                    $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),
+                )
+            );
+        }
+
+        @include tokens(
+            list-theme(
+                $schema: $schema,
+                $background: var(--ig-grid-background),
+                $item-background-hover: color-mix(in srgb, var(--ig-grid-accent-color) 8%, var(--ig-grid-background))
+            )
+        );
+
+        @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(
+            progress-circular-theme(
+                $schema: $schema,
+                $base-circle-color: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                $fill-color-default: var(--ig-grid-accent-color),
+                $text-color: var(--ig-grid-foreground)
+            )
+        );
+
+        @include tokens(
+            progress-linear-theme(
+                $schema: $schema,
+                $track-color: color-mix(in srgb, var(--ig-grid-foreground) 12%, var(--ig-grid-background)),
+                $fill-color-default: var(--ig-grid-accent-color),
+                $text-color: var(--ig-grid-foreground)
+            ),
+        );
+
+        @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(
+                $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),
+                )
+            );
+        }
+
+        @include tokens(
+            tooltip-theme(
+                $schema: $schema,
+                $background: hsl(from var(--ig-grid-foreground) h s l / 80%)
+            ),
+        );
+
+        @include tokens(
+            tree-theme(
+                $schema: $schema,
+                $background: var(--ig-grid-background)
+            ),
+        );
+
+        @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((
         'material': rem(20px),
         'fluent': rem(20px),
@@ -249,6 +612,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;
@@ -310,7 +674,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)});
@@ -321,6 +685,7 @@
                 igx-prefix,
                 igx-suffix {
                     background: transparent;
+                    color: color-mix(in srgb, var(--ig-grid-foreground) 80%, var(--ig-grid-background));
                     border-radius: 0;
 
                     /* stylelint-disable-next-line */
@@ -367,13 +732,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);
                 }
 
@@ -402,6 +767,7 @@
                 igx-prefix,
                 igx-suffix {
                     background: transparent !important;
+                    color: var(--ig-grid-foreground);
                     border-radius: 0;
                 }
             }
@@ -411,7 +777,7 @@
             }
 
             igx-prefix:focus {
-                color: color(map.get($theme, 'palette'), 'secondary');
+                color: var-get($theme, 'sorted-header-icon-color');
             }
 
             igx-suffix {
@@ -419,7 +785,7 @@
                     outline-style: none;
 
                     &:focus {
-                        color: color($color: 'secondary');
+                        color: var-get($theme, 'sorted-header-icon-color');
                     }
 
                     + igx-icon {
@@ -436,43 +802,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)));
             }
         }
     }
@@ -1009,17 +1375,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');
         }
     }
 
@@ -1814,7 +2176,7 @@
     }
 
     %grid-summaries--body {
-        --summaries-patch-background: var(--ig-gray-100);
+        --summaries-patch-background: color-mix(in srgb, var(--ig-grid-foreground, var(--ig-gray-100)) 12%, var(--ig-grid-background, var(--ig-gray-100)));
 
         border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
         background-color: var-get($theme, 'summaries-patch-background');
@@ -2712,14 +3074,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-dialog-background');
         box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
 
         @if $variant == 'material' or $variant == 'bootstrap' {
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] {
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');
             }
         }
     }
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()
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.scss b/src/app/hierarchical-grid/hierarchical-grid.sample.scss
index 493f8cca993..db97e2e90e0 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.sample.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid.sample.scss
@@ -1,7 +1,9 @@
+@use '../../../projects/igniteui-angular/core/src/core/styles/themes' as *;
+
 :host::ng-deep {
     .activeRow {
-        background-color: rgb(201, 241, 201);
-      }
+        --row-odd-background: #{dynamic-shade(var(--row-even-background), $offset: 3)};
+    }
 }
 
 [igxButton="contained"] {
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 {