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/_excel-filtering-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss
index 0ebc1c4fb0d..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
@@ -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});
@@ -721,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 24d0caf723d..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
@@ -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,312 @@
     $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,
+    igx-tree-grid,
+    igx-hierarchical-grid,
+    igx-pivot-grid,
+    igx-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(
+            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 {
+            @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),
+                $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),
+                $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)
+            )
+        );
+
+        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)),
+                )
+            );
+        }
+
+        @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(
+            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((
         'material': rem(20px),
         'fluent': rem(20px),
@@ -249,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;
@@ -310,7 +618,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)});
@@ -367,13 +675,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);
                 }
 
@@ -411,7 +719,7 @@
             }
 
             igx-prefix:focus {
-                color: color(map.get($theme, 'palette'), 'secondary');
+                color: var-get($theme, 'sorted-header-icon-color');
             }
 
             igx-suffix {
@@ -419,7 +727,7 @@
                     outline-style: none;
 
                     &:focus {
-                        color: color($color: 'secondary');
+                        color: var-get($theme, 'sorted-header-icon-color');
                     }
 
                     + igx-icon {
@@ -436,43 +744,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 +1317,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 +2118,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');
@@ -2712,14 +3016,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' {
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/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 {