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

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
- There was a misalignment between the disabled and readonly state
textarea with the desired designed UX.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- update textarea css vars;
- add styles for disabled textarea;
- add styles for readonly textarea;

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[textarea
preview](https://ionic-framework-git-rou-11586-ionic1.vercel.app/src/components/textarea/test/basic?ionic:theme=ionic)

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

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

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('textarea: states'), () => {
     test('should render readonly textarea correctly', async ({ page }) => {
       await page.setContent(

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-valid: #{globals.$ion-semantics-success-900};
-  --highlight-color-invalid: #{globals.$ion-semantics-danger-base};
+  --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,35 @@ 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 {
+  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,
         })}
       >
         {/**