refactor(input/validator): use input theme for validator and address latest input comments

Author: didimmova

src/components/input/themes/shared/input.bootstrap.scss

@@ -155,12 +155,6 @@ $theme: $bootstrap;
     }
 }
 
-[part~='filled'] {
-    [part~='input'] {
-        color: var-get($theme, 'input-prefix-color--filled');
-    }
-}
-
 [part~='prefixed'] [part='prefix'],
 [part~='suffixed'] [part='suffix'] {
     ::slotted(*) {
@@ -190,6 +184,18 @@ $theme: $bootstrap;
     }
 }
 
+:host([type='search']) {
+    [part^='container'] {
+        background: var-get($theme, 'search-background');
+        box-shadow: var-get($theme, 'search-resting-elevation');
+        border-radius: var-get($theme, 'search-border-radius');
+
+        &:focus-within {
+            background: var-get($theme, 'search-background');
+        }
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     [part='prefix'],

src/components/input/themes/shared/input.common.scss

@@ -68,6 +68,10 @@ $theme: $base;
 }
 
 :host(:focus-within) {
+    [part^='container'] {
+        caret-color: var-get($theme, 'focused-text-color');
+    }
+
     [part='prefix'] {
         color: var-get($theme, 'input-prefix-color--focused');
         background: var-get($theme, 'input-prefix-background--focused');

src/components/input/themes/shared/input.fluent.scss

@@ -90,7 +90,6 @@ $theme: $fluent;
     }
 
     [part~='input'] {
-        color: var-get($theme, 'idle-text-color');
         background: initial;
         font-size: rem(14px);
         padding-inline: pad-inline(rem(8px));

src/components/input/themes/shared/input.indigo.scss

@@ -167,7 +167,25 @@ $transition-duration: .25s;
     }
 }
 
-:host([type='search']) {
+:host([type='search']:not([disabled])) {
+    [part^='container'] {
+        background: var-get($theme, 'search-background');
+        box-shadow: var-get($theme, 'search-resting-elevation');
+        border-radius: var-get($theme, 'search-border-radius');
+
+        &:focus-within,
+        &:focus-within:hover {
+            background: var-get($theme, 'box-background-focus');
+        }
+    }
+
+    &:focus-within,
+    &:focus-within:hover {
+        [part^='container'] {
+            background: var-get($theme, 'box-background-focus');
+        }
+    }
+
     %suffix-preffix {
         padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
     }

src/components/input/themes/shared/input.material.scss

@@ -281,8 +281,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
 :host(:not([outlined]):disabled) {
     [part~='container'] {
         background: var-get($theme, 'box-disabled-background');
-        border-color: var-get($theme, 'disabled-border-color');
-        border-block-end-color: var-get( $theme, 'disabled-bottom-line-color');
+        border-block-end-color: var-get($theme, 'disabled-bottom-line-color');
         border-bottom-style: dashed;
     }
 }
@@ -303,6 +302,11 @@ input:placeholder-shown + [part='notch'] [part='label'],
             }
         }
     }
+
+    [part='prefix'],
+    [part='suffix'] {
+        max-height: 100%;
+    }
 }
 
 :host(:not([readonly])[type='search']:hover),