diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
index b942c0e20a8..2fd4a3f3a0d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
@@ -352,12 +352,12 @@
             &:active {
                 @extend %item-overlay;
 
-                color: var-get($theme, 'item-selected-text-color');
+                color: var-get($theme, 'item-selected-hover-text-color');
                 background: var-get($theme, 'item-selected-background');
                 border-color: var-get($theme, 'item-selected-border-color');
 
                 igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
+                    color: var-get($theme, 'item-selected-hover-icon-color');
                 }
 
                 &::before {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
index 2b978400de7..153ed8ae3df 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
@@ -407,7 +407,11 @@
         border-color: var-get($flat-theme, 'focus-visible-border-color');
 
         igx-icon {
-            color: var-get($flat-theme, 'icon-color');
+            @if $variant == 'material' {
+                color: var-get($flat-theme, 'icon-color-hover');
+            } @else {
+                color: var-get($flat-theme, 'icon-color');
+            }
         }
 
         &:hover {
@@ -547,7 +551,16 @@
         &:active {
             background: var-get($outlined-theme, 'focus-background');
             color: var-get($outlined-theme, 'focus-foreground');
-            border-color: var-get($outlined-theme, 'active-border-color');
+
+            @if $variant == 'material' {
+                border-color: var-get($outlined-theme, 'focus-border-color');
+
+                igx-icon {
+                    color: var-get($outlined-theme, 'focus-foreground');
+                }
+            } @else {
+                border-color: var-get($outlined-theme, 'active-border-color');
+            }
 
             @if $variant == 'indigo' {
                 igx-icon {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index d1f9b070cb3..33400a86676 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -888,7 +888,7 @@
             @include css-vars((
                 name: 'igx-grid-row',
                 row-ghost-background: map.get($theme, 'row-ghost-background'),
-                row-drag-color: map.get($theme, 'row-drago-color')
+                row-drag-color: map.get($theme, 'row-drag-color')
             ));
         }
     }
@@ -1000,7 +1000,11 @@
         }
 
         %igx-icon--error {
-            color: color($color: 'gray', $variant: 500);
+            @if $variant == 'fluent' and $theme-variant == 'light' or $variant == 'material' and $theme-variant == 'light' {
+                color: color($color: 'gray', $variant: 600);
+            } @else {
+                color: color($color: 'gray', $variant: 500);
+            }
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
index 329de693b52..7eb832c9a53 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
@@ -35,7 +35,7 @@
         'material': clamp(1px, rem(1px), rem(1px)),
         'fluent': clamp(1px, rem(1px), rem(1px)),
         'bootstrap': clamp(1px, rem(1px), rem(1px)),
-        'indigo': clamp(2px, rem(2px), rem(2px))
+        'indigo': clamp(1px, rem(1px), rem(1px))
     ), $variant);
 
     $separator-size: map.get((
@@ -99,18 +99,18 @@
         &:focus {
             outline: none;
 
-            %igx-stepper__step-title {
-                color: var-get($theme, 'title-focus-color');
-            }
-
-            %igx-stepper__step-subtitle {
-                color: var-get($theme, 'subtitle-focus-color');
-            }
-
             %igx-stepper__step-header {
                 background: var-get($theme, 'step-focus-background');
                 color: var-get($theme, 'title-focus-color');
 
+                %igx-stepper__step-title {
+                    color: var-get($theme, 'title-focus-color');
+                }
+
+                %igx-stepper__step-subtitle {
+                    color: var-get($theme, 'subtitle-focus-color');
+                }
+
                 @if $variant == 'bootstrap' {
                     box-shadow: inset 0 0 0 $outline-width var-get($theme, 'indicator-outline');
                 }
@@ -239,13 +239,13 @@
     }
 
     %igx-stepper__step-header--current {
-        background: var-get($theme, 'current-step-background') !important;
+        background: var-get($theme, 'current-step-background');
         color: var-get($theme, 'current-title-color');
 
         %igx-stepper__step-indicator {
-            color: var-get($theme, 'current-indicator-color') !important;
-            background: var-get($theme, 'current-indicator-background') !important;
-            box-shadow: 0 0 0 $outline-width var-get($theme, 'current-indicator-outline') !important;
+            color: var-get($theme, 'current-indicator-color');
+            background: var-get($theme, 'current-indicator-background');
+            box-shadow: 0 0 0 $outline-width var-get($theme, 'current-indicator-outline');
         }
 
         %igx-stepper__step-title {
@@ -263,7 +263,7 @@
         }
 
         &:hover {
-            background: var-get($theme, 'current-step-hover-background') !important;
+            background: var-get($theme, 'current-step-hover-background');
 
             %igx-stepper__step-title {
                 color: var-get($theme, 'current-title-hover-color');
@@ -418,12 +418,26 @@
     }
 
     %igx-stepper__step--completed {
-
-        %igx-stepper__step-header {
+        %igx-stepper__step-header:not(%igx-stepper__step-header--current) {
             background: var-get($theme, 'complete-step-background');
 
+            %igx-stepper__step-indicator {
+                color: var-get($theme, 'complete-indicator-color');
+                background: var-get($theme, 'complete-indicator-background');
+                box-shadow: 0 0 0 $outline-width var-get($theme, 'complete-indicator-outline');
+            }
+
+            %igx-stepper__step-title {
+                color: var-get($theme, 'complete-title-color');
+            }
+
+            %igx-stepper__step-subtitle {
+                color: var-get($theme, 'complete-subtitle-color');
+            }
+
             &:hover {
                 background: var-get($theme, 'complete-step-hover-background');
+
                 %igx-stepper__step-title {
                     color: var-get($theme, 'complete-title-hover-color');
                 }
@@ -439,22 +453,8 @@
             }
         }
 
-        %igx-stepper__step-indicator {
-            color: var-get($theme, 'complete-indicator-color');
-            background: var-get($theme, 'complete-indicator-background');
-            box-shadow: 0 0 0 $outline-width var-get($theme, 'complete-indicator-outline');
-        }
-
-        %igx-stepper__step-title {
-            color: var-get($theme, 'complete-title-color');
-        }
-
-        %igx-stepper__step-subtitle {
-            color: var-get($theme, 'complete-subtitle-color');
-        }
-
         &:focus {
-            %igx-stepper__step-header {
+            %igx-stepper__step-header:not(%igx-stepper__step-header--current) {
                 background: var-get($theme, 'complete-step-focus-background');
 
                 %igx-stepper__step-title {