fix(textarea): update sass themes

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

@@ -43,7 +43,6 @@ $theme: $bootstrap;
     border-radius: var-get($theme, 'border-border-radius');
     padding-inline: pad-inline(8px, 10px, 14px);
     padding-block: pad-block(4px, 6px, 8px);
-    color: var-get($theme, 'idle-text-color');
     background: transparent;
     box-shadow: none;
     z-index: 1;
@@ -156,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(*) {
@@ -191,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

@@ -3,6 +3,10 @@
 
 $theme: $base;
 
+[part~='input'] {
+    color: var-get($theme, 'idle-text-color');
+}
+
 [part='prefix'] {
     color: var-get($theme, 'input-prefix-color');
     background: var-get($theme, 'input-prefix-background');
@@ -14,6 +18,10 @@ $theme: $base;
 }
 
 [part~='filled'] {
+    [part~='input'] {
+        color: var-get($theme, 'filled-text-color');
+    }
+
     [part='prefix'] {
         color: var-get($theme, 'input-prefix-color--filled');
         background: var-get($theme, 'input-prefix-background--filled');
@@ -43,7 +51,27 @@ $theme: $base;
     }
 }
 
+:host(:not([readonly],[disabled]):hover) {
+    [part~='filled'] {
+        [part~='input'] {
+            color: var-get($theme, 'filled-text-hover-color');
+        }
+    }
+}
+
+:host(:not([readonly],[disabled]):focus-within) {
+    [part~='filled'] {
+        [part~='input'] {
+            color: var-get($theme, 'focused-text-color');
+        }
+    }
+}
+
 :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');
@@ -81,7 +109,12 @@ $theme: $base;
 :host(:disabled),
 :host([disabled]) {
     [part~='input']::placeholder {
-        color: var-get($theme, 'disabled-text-color');
+        color: var-get($theme, 'disabled-placeholder-color');
+    }
+
+    [part='prefix'],
+    [part='suffix'] {
+        background: inherit;
     }
 }
 
@@ -98,4 +131,4 @@ $theme: $base;
     ::slotted([slot='prefix']) {
         padding-inline: var(--affix-padding);
     }
-}
+}

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

@@ -77,10 +77,19 @@ $theme: $fluent;
             pointer-events: none;
             z-index: 1;
         }
+
+        [part='prefix']:first-child {
+            border-start-start-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
+            border-end-start-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
+        }
+
+        [part='suffix']:last-child {
+            border-start-end-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
+            border-end-end-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
+        }
     }
 
     [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

@@ -40,7 +40,7 @@ $transition-duration: .25s;
     }
 
     [part='prefix'] {
-        border-start-start-radius: var-get($theme, 'border-border-radius');
+        border-start-start-radius: var-get($theme, 'box-border-radius');
         grid-area: 1 / 1;
 
         ::slotted(*) {
@@ -49,7 +49,7 @@ $transition-duration: .25s;
     }
 
     [part='suffix'] {
-        border-start-end-radius: var-get($theme, 'border-border-radius');
+        border-start-end-radius: var-get($theme, 'box-border-radius');
         grid-area: 1 / 3;
 
         ::slotted(*) {
@@ -91,7 +91,6 @@ $transition-duration: .25s;
     [part~='input'] {
         @include type-style('body-2');
 
-        color: var-get($theme, 'idle-text-color');
         font-size: rem(12px);
         line-height: rem(16px);
         background: initial;
@@ -115,20 +114,8 @@ $transition-duration: .25s;
     }
 }
 
-[part~='filled'] {
-    [part~='input'] {
-        color: var-get($theme, 'filled-text-color');
-    }
-}
-
 :host(:not([disabled],[readonly]):hover),
 :host(:not([disabled])[readonly][role='combobox']:hover) {
-    [part~='filled'] {
-        [part~='input'] {
-            color: var-get($theme, 'filled-text-hover-color');
-        }
-    }
-
     [part^='container'] {
         background: var-get($theme, 'box-background-hover');
         border-color: var-get($theme, 'hover-bottom-line-color');
@@ -155,12 +142,6 @@ $transition-duration: .25s;
     [part='label'] {
         color: var-get($theme, 'focused-secondary-color');
     }
-
-    [part~='filled'] {
-        [part~='input'] {
-            color: var-get($theme, 'focused-text-color');
-        }
-    }
 }
 
 :host(:not([aria-haspopup='dialog'],[role='combobox'],[disabled])[readonly]) {
@@ -186,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

@@ -82,7 +82,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
 }
 
 [part='start'] {
-    border-start-start-radius: var-get($theme, 'border-border-radius');
+    border-start-start-radius: var-get($theme, 'box-border-radius');
     justify-content: flex-start;
     grid-area: 1 / 1;
 
@@ -113,7 +113,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
 }
 
 [part='end'] {
-    border-start-end-radius: var-get($theme, 'border-border-radius');
+    border-start-end-radius: var-get($theme, 'box-border-radius');
     justify-content: flex-end;
     grid-area: 1 / 4;
 
@@ -281,7 +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-bottom-style: dashed;
     }
 }
@@ -302,6 +302,11 @@ input:placeholder-shown + [part='notch'] [part='label'],
             }
         }
     }
+
+    [part='prefix'],
+    [part='suffix'] {
+        max-height: 100%;
+    }
 }
 
 :host(:not([readonly])[type='search']:hover),
@@ -624,6 +629,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
         border-color: var-get($theme, 'disabled-border-color');
     }
 
+    [part~='container'] {
+        background: var-get($theme, 'border-disabled-background');
+    }
+
     input:placeholder-shown + [part='notch'],
     [part~='filled'] + [part='notch'] {
         @extend %floated-styles;

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

@@ -38,10 +38,10 @@ $theme: $bootstrap;
 [part~='prefixed'] {
     [part~='prefix'] {
         border-block-width: rem(1px);
+        border-inline-width: 0;
         border-style: solid;
         border-color: var-get($theme, 'border-color');
         overflow: hidden;
-        border-inline-width: 0;
         border: {
             start: {
                 start-radius: var-get($theme, 'border-border-radius');
@@ -67,10 +67,10 @@ $theme: $bootstrap;
 [part~='suffixed'] {
     [part~='suffix'] {
         border-block-width: rem(1px);
+        border-inline-width: 0;
         border-style: solid;
         border-color: var-get($theme, 'border-color');
         overflow: hidden;
-        border-inline-width: 0;
         border: {
             start: {
                 end-radius: var-get($theme, 'border-border-radius');
@@ -164,22 +164,22 @@ textarea {
         box-shadow: none;
     }
 
-    ::slotted([slot='suffix']) {
-        border-inline-end: rem(1px) solid var(--disabled-border-color);
-    }
-
     ::slotted([slot='prefix']) {
         border-inline-start: rem(1px) solid var(--disabled-border-color);
     }
+
+    ::slotted([slot='suffix']) {
+        border-inline-end: rem(1px) solid var(--disabled-border-color);
+    }
 }
 
 :host(:not([disabled])),
 :host(:not(:disabled)) {
-    ::slotted([slot='suffix']) {
-        border-inline-end: rem(1px) solid var(--border-color);
+     ::slotted([slot='prefix']) {
+        border-inline-start: rem(1px) solid var(--border-color);
     }
 
-    ::slotted([slot='prefix']) {
-        border-inline-start: rem(1px) solid var(--border-color);
+    ::slotted([slot='suffix']) {
+        border-inline-end: rem(1px) solid var(--border-color);
     }
 }

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

@@ -17,6 +17,10 @@ $theme: $base;
     }
 }
 
+[part~='input'] {
+    color: var-get($theme, 'idle-text-color');
+}
+
 [part~='filled'] {
     [part~='input'] {
         color: var-get($theme, 'filled-text-color');
@@ -69,6 +73,34 @@ textarea {
     }
 }
 
+:host(:not([readonly]):hover) {
+    [part~='filled'] {
+        [part~='input'] {
+            color: var-get($theme, 'filled-text-hover-color');
+        }
+    }
+}
+
+:host(:not([readonly]):focus-within) {
+    [part~='prefix'],
+    [part~='filled'][part~='prefix'] {
+        color: var-get($theme, 'input-prefix-color--focused');
+        background: var-get($theme, 'input-prefix-background--focused');
+    }
+
+    [part~='suffix'],
+    [part~='filled'][part~='suffix'] {
+        color: var-get($theme, 'input-suffix-color--focused');
+        background: var-get($theme, 'input-suffix-background--focused');
+    }
+
+    [part~='filled'] {
+        [part~='input'] {
+            color: var-get($theme, 'focused-text-color');
+        }
+    }
+}
+
 :host(:not([disabled],[readonly]):state(ig-invalid)),
 :host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {

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

@@ -48,6 +48,16 @@ $border-size: rem(1px);
         pointer-events: none;
         z-index: 1;
     }
+
+    [part='prefix']:first-child {
+        border-start-start-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
+        border-end-start-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
+    }
+
+    [part='suffix']:last-child {
+        border-start-end-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
+        border-end-end-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
+    }
 }