feat(input-group): update inputs computed styles

Author: didimmova

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

@@ -147,7 +147,7 @@
     $search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation');
     $search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation');
 
-    @if $variant == 'material' and $box-background != transparent {
+    @if $variant == 'material' {
         @if not($box-background-hover) and $box-background {
             $box-background-hover: var(--box-background);
         }
@@ -169,11 +169,11 @@
         }
 
         @if not($placeholder-color) and $box-background {
-            $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+            $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
         }
 
         @if not($hover-placeholder-color) and $box-background-hover {
-            $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.6);
+            $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.9);
         }
 
         @if not($idle-text-color) and $box-background {
@@ -192,24 +192,12 @@
             $focused-text-color: adaptive-contrast(var(--box-background-focus));
         }
 
-        @if not($idle-bottom-line-color) and $box-background {
-            $idle-bottom-line-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
-        }
-
-        @if not($hover-bottom-line-color) and $box-background {
-            $hover-bottom-line-color: adaptive-contrast(var(--box-background));
-        }
-
         @if not($idle-secondary-color) and $box-background {
-            $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
-        }
-
-        @if not($focused-secondary-color) and $box-background-focus {
-            $focused-secondary-color: adaptive-contrast(var(--box-background-focus));
+            $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
         }
 
         @if not($input-prefix-color) and $box-background {
-            $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+            $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
         }
 
         @if not($input-prefix-color--filled) and $box-background {
@@ -221,7 +209,7 @@
         }
 
         @if not($input-suffix-color) and $box-background {
-            $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.6);
+            $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
         }
 
         @if not($input-suffix-color--filled) and $box-background {
@@ -295,44 +283,50 @@
         }
     }
 
-    //material search input
-    @if $search-background != transparent {
-        @if not($placeholder-color) and $search-background {
-            $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
-        }
+    //search input
+    @if not($placeholder-color) and $search-background {
+        $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+    }
 
-        @if not($hover-placeholder-color) and $placeholder-color {
-            $hover-placeholder-color: var(--placeholder-color);
-        }
+    @if not($hover-placeholder-color) and $placeholder-color {
+        $hover-placeholder-color: var(--placeholder-color);
+    }
 
+    @if $variant == 'indigo' {
+        @if not($box-background-hover) and $search-background {
+            $box-background-hover: var(--search-background);
+        }
+    } @else {
         @if not($idle-secondary-color) and $placeholder-color {
             $idle-secondary-color: var(--placeholder-color);
         }
+    }
 
-        @if not($idle-text-color) and $search-background {
-            $idle-text-color: adaptive-contrast(var(--search-background));
-        }
+    @if not($idle-text-color) and $search-background {
+        $idle-text-color: adaptive-contrast(var(--search-background));
+    }
 
-        @if not($focused-secondary-color) and $search-background {
-            $focused-secondary-color: adaptive-contrast(var(--search-background));
-        }
+    @if not($filled-text-color) and $search-background {
+        $filled-text-color: adaptive-contrast(var(--search-background));
+    }
 
-        @if not($filled-text-color) and $search-background {
-            $filled-text-color: adaptive-contrast(var(--search-background));
-        }
+    @if not($filled-text-hover-color) and $search-background {
+        $filled-text-hover-color: adaptive-contrast(var(--search-background));
+    }
 
-        @if not($filled-text-hover-color) and $search-background {
-            $filled-text-hover-color: adaptive-contrast(var(--search-background));
-        }
+    @if not($focused-text-color) and $search-background {
+        $focused-text-color: adaptive-contrast(var(--search-background));
+    }
 
-        @if not($focused-text-color) and $search-background {
-            $focused-text-color: adaptive-contrast(var(--search-background));
-        }
+    @if not($input-prefix-color) and $search-background {
+        $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+    }
 
-        @if not($input-prefix-color) and $search-background {
-            $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
-        }
+    @if not($input-suffix-color) and $search-background {
+        $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+    }
 
+    @if $variant != 'indigo' {
         @if not($input-prefix-color--filled) and $search-background {
             $input-prefix-color--filled: adaptive-contrast(var(--search-background));
         }
@@ -341,18 +335,16 @@
             $input-prefix-color--focused: adaptive-contrast(var(--search-background));
         }
 
-        @if not($input-suffix-color) and $search-background {
-            $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.6);
-        }
-
         @if not($input-suffix-color--filled) and $search-background {
             $input-suffix-color--filled: adaptive-contrast(var(--search-background));
         }
 
         @if not($input-suffix-color--focused) and $search-background {
             $input-suffix-color--focused: adaptive-contrast(var(--search-background));
         }
+    }
 
+    @if $search-background != transparent {
         @if not($search-disabled-background) and $search-background {
             $search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
         }
@@ -377,8 +369,7 @@
     @if not($search-disabled-shadow) {
         $search-disabled-shadow: elevation($search-disabled-elevation);
     }
-
-    // //end material search input
+    //end search input
 
     @if not($input-prefix-color) and $input-suffix-color {
         $input-prefix-color: var(--input-suffix-color);