fix(textarea): update disabled and readonly to match ionic theme

core/src/components/textarea/test/states/textarea.e2e.ts

@@ -45,4 +45,30 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
       await expect(container).toHaveScreenshot(screenshot(`textarea-focused`));
     });
   });
+
+  test.describe(title('textarea: states'), () => {
+    test('should render readonly textarea correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-textarea fill="outline" label="Email" value="[email protected]" readonly="true"></ion-textarea>
+      `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-readonly`));
+    });
+
+    test('should render disabled textarea correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-textarea fill="outline" label="Email" value="[email protected]" disabled="true"></ion-textarea>
+      `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-disabled`));
+    });
+  });
 });

core/src/components/textarea/textarea.ionic.scss

@@ -6,9 +6,10 @@
 // --------------------------------------------------
 
 :host {
+  --border-color: #{globals.$ion-primitives-neutral-500};
   --color: #{globals.$ion-primitives-neutral-1200};
-  --highlight-color-valid: #{globals.$ion-semantics-success-base};
-  --highlight-color-invalid: #{globals.$ion-semantics-danger-base};
+  --highlight-color-valid: #{globals.$ion-semantics-success-900};
+  --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
   --background: #{globals.$ion-primitives-base-white};
@@ -166,3 +167,36 @@ ion-icon {
 :host(.has-focus) .textarea-highlight {
   transform: scale(1);
 }
+
+// Textarea Hover
+// ----------------------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --border-color: #{globals.$ion-primitives-neutral-600};
+  }
+}
+
+// Textarea - Disabled
+// ----------------------------------------------------------------
+
+:host(.textarea-disabled) {
+  --color: #{globals.$ion-primitives-neutral-500};
+  --background: #{globals.$ion-primitives-neutral-100};
+  --border-color: #{globals.$ion-primitives-neutral-300};
+  --placeholder-color: #{globals.$ion-primitives-neutral-500};
+}
+
+:host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
+:host(.textarea-disabled) .textarea-bottom .counter,
+:host(.textarea-disabled) .label-text-wrapper,
+:host(.textarea-disabled) .ion-icon {
+  color: globals.$ion-primitives-neutral-500;
+}
+
+// Textarea - Readonly
+// ----------------------------------------------------------------
+
+:host(.textarea-readonly) {
+  --background: #{globals.$ion-primitives-neutral-100};
+}

core/src/components/textarea/textarea.tsx

@@ -676,7 +676,7 @@ export class Textarea implements ComponentInterface {
   }
 
   render() {
-    const { inputId, disabled, size, labelPlacement, el, hasFocus } = this;
+    const { inputId, disabled, readonly, size, labelPlacement, el, hasFocus } = this;
     const fill = this.getFill();
     const theme = getIonTheme(this);
     const shape = this.getShape();
@@ -719,6 +719,7 @@ export class Textarea implements ComponentInterface {
           [`textarea-size-${size}`]: true,
           [`textarea-label-placement-${labelPlacement}`]: true,
           'textarea-disabled': disabled,
+          'textarea-readonly': readonly,
         })}
       >
         {/**