fix(combo/select): toggle button styles

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -261,7 +261,6 @@
         }
     }
 
-    %form-group-bundle:not(%form-group-bundle--disabled):hover,
     %form-group-bundle:not(%form-group-bundle--disabled):focus-within {
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-focus');
@@ -274,6 +273,14 @@
         }
     }
 
+    @if $variant == 'indigo' {
+        %form-group-bundle:not(%form-group-bundle--disabled):hover {
+            %igx-combo__toggle-button {
+                color: var-get($theme, 'toggle-button-foreground-focus');
+            }
+        }
+    }
+
     .igx-input-group--filled {
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-filled');
@@ -293,8 +300,10 @@
     }
 
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
-        %igx-combo__toggle-button {
-            background: var-get($theme, 'toggle-button-background-focus--border');
+        @if $variant != 'fluent' {
+            %igx-combo__toggle-button {
+                background: var-get($theme, 'toggle-button-background-focus--border');
+            }
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -244,6 +244,24 @@
             }
         }
 
+        @include m(warning) {
+            @include e(label) {
+                @extend %form-group-label--warning !optional;
+            }
+
+            @include e(line) {
+                @extend %form-group-line--warning !optional;
+            }
+
+            @include e(hint) {
+                @extend %form-group-helper--warning !optional;
+            }
+
+            @include e(bundle) {
+                @extend %form-group-bundle--warning !optional;
+            }
+        }
+
         @include m(invalid) {
             @include e(label) {
                 @extend %form-group-label--error !optional;

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -512,6 +512,7 @@
     }
 
     %form-group-display--disabled {
+        pointer-events: none;
         user-select: none;
         color: var-get($theme, 'disabled-text-color') !important;
 
@@ -613,6 +614,13 @@
         caret-color: initial;
     }
 
+    %form-group-bundle--warning {
+        &::after {
+            border-block-end-color: var-get($theme, 'warning-secondary-color');
+        }
+        caret-color: initial;
+    }
+
     %form-group-bundle--error {
         &::after {
             border-block-end-color: var-get($theme, 'error-secondary-color');
@@ -803,6 +811,25 @@
         &::after {
             display: none;
         }
+
+        &:hover {
+            %form-group-bundle-start {
+                border-color: var-get($theme, 'hover-border-color');
+            }
+
+            %igx-input-group__filler {
+                border-color: var-get($theme, 'hover-border-color');
+            }
+
+            %igx-input-group__notch {
+                border-block-start-color: var-get($theme, 'hover-border-color');
+                border-block-end-color: var-get($theme, 'hover-border-color');
+            }
+
+            %form-group-bundle-end {
+                border-color: var-get($theme, 'hover-border-color');
+            }
+        }
     }
 
     %form-group-bundle-border--disabled {
@@ -981,6 +1008,21 @@
         }
     }
 
+    %form-group-label--focused-border:not(:is(
+        %form-group-border--error, 
+        %form-group-border--warning, 
+        %form-group-border--success))
+    {
+        &:hover {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %igx-input-group__filler,
+            %igx-input-group__notch {
+                border-color: var-get($theme, 'focused-border-color');
+            }
+        }
+    }
+
     %form-group-label--float-border {
         --label-position: #{sizable(18px, 22px, 26px)};
 
@@ -1064,6 +1106,10 @@
         color: var-get($theme, 'focused-secondary-color');
     }
 
+    %form-group-label--warning {
+        color: var-get($theme, 'warning-secondary-color');
+    }
+
     %form-group-label--success {
         color: var-get($theme, 'success-secondary-color');
     }
@@ -1305,10 +1351,19 @@
         %igx-input-group__filler {
             border-block-color: var-get($theme, 'success-secondary-color');
         }
+
+        %form-group-bundle--border:hover {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %igx-input-group__filler,
+            %igx-input-group__notch {
+                border-color: var-get($theme, 'success-secondary-color');
+            }
+        }
     }
 
     %form-group-line--warning {
-        background: var-get($theme, 'error-secondary-color');
+        background: var-get($theme, 'warning-secondary-color');
     }
 
     %form-group-border--warning {
@@ -1328,6 +1383,15 @@
         %igx-input-group__filler {
             border-block-color: var-get($theme, 'warning-secondary-color');
         }
+
+        %form-group-bundle--border:hover {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %igx-input-group__filler,
+            %igx-input-group__notch {
+                border-color: var-get($theme, 'warning-secondary-color');
+            }
+        }
     }
 
     %form-group-line--error {
@@ -1351,6 +1415,15 @@
         %igx-input-group__filler {
             border-block-color: var-get($theme, 'error-secondary-color');
         }
+
+        %form-group-bundle--border:hover {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %igx-input-group__filler,
+            %igx-input-group__notch {
+                border-color: var-get($theme, 'error-secondary-color');
+            }
+        }
     }
 
     %form-group-border--disabled {
@@ -1413,6 +1486,10 @@
             color: var-get($theme, 'success-secondary-color');
         }
 
+        %form-group-helper--warning {
+            color: var-get($theme, 'warning-secondary-color');
+        }
+
         %form-group-helper--error {
             color: var-get($theme, 'error-secondary-color');
         }

projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss

@@ -101,13 +101,20 @@
         }
     }
 
-    %form-group-bundle:hover,
     %form-group-bundle:focus-within {
         %igx-select__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-focus');
         }
     }
 
+    @if $variant == 'indigo' {
+        %form-group-bundle:hover {
+            %igx-select__toggle-button {
+                color: var-get($theme, 'toggle-button-foreground-focus');
+            }
+        }
+    }
+
     .igx-input-group--filled {
         %igx-select__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-filled');
@@ -120,8 +127,10 @@
     }
 
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
-        %igx-select__toggle-button {
-            background: var-get($theme, 'toggle-button-background-focus--border');
+        @if $variant != 'fluent' {
+            %igx-select__toggle-button {
+                background: var-get($theme, 'toggle-button-background-focus--border');
+            }
         }
     }