fix(textarea): use proper design for helper and error text

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

@@ -347,3 +347,123 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: highlights'), () => {
+    test.describe('textarea: no fill', () => {
+      test('should render valid state correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-textarea
+            value="[email protected]"
+            class="ion-valid has-focus"
+            label="Email"
+            label-placement="stacked"
+            error-text="Please enter a valid email"
+            helper-text="Enter an email"
+            counter="true"
+            maxlength="20"
+          ></ion-textarea>
+        `,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-valid`));
+      });
+      test('should render invalid state correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-textarea
+            value="[email protected]"
+            class="ion-touched ion-invalid"
+            label="Email"
+            label-placement="stacked"
+            error-text="Please enter a valid email"
+            helper-text="Enter an email"
+            counter="true"
+            maxlength="20"
+          ></ion-textarea>
+        `,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-invalid`));
+      });
+    });
+    test.describe('textarea: outline', () => {
+      test('should render valid state correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-textarea
+            fill="outline"
+            value="[email protected]"
+            class="ion-valid has-focus"
+            label="Email"
+            label-placement="stacked"
+            error-text="Please enter a valid email"
+            helper-text="Enter an email"
+            counter="true"
+            maxlength="20"
+          ></ion-textarea>
+        `,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-valid`));
+      });
+      test('should render invalid state correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-textarea
+            fill="outline"
+            value="[email protected]"
+            class="ion-touched ion-invalid"
+            label="Email"
+            label-placement="stacked"
+            error-text="Please enter a valid email"
+            helper-text="Enter an email"
+            counter="true"
+            maxlength="20"
+          ></ion-textarea>
+        `,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-invalid`));
+      });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-textarea.custom {
+              --highlight-color-valid: purple;
+            }
+          </style>
+
+          <div class="container">
+            <ion-textarea
+              fill="outline"
+              value="[email protected]"
+              class="custom has-focus ion-valid"
+              label="Email"
+              label-placement="stacked"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`textarea-outline-custom-highlight`));
+      });
+    });
+  });
+});

core/src/components/textarea/textarea.common.scss

@@ -351,8 +351,6 @@
 
   border-top: var(--border-width) var(--border-style) var(--border-color);
 
-  font-size: dynamic-font(12px);
-
   white-space: normal;
 }
 
@@ -381,8 +379,6 @@
 
 .textarea-bottom .helper-text {
   display: block;
-
-  color: $text-color-step-300;
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {

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

@@ -134,6 +134,10 @@ ion-icon {
   color: globals.$ion-primitives-neutral-800;
 }
 
+:host(.has-focus.ion-valid) .helper-text {
+  color: var(--highlight-color-valid);
+}
+
 :host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
   --border-width: #{globals.$ion-border-size-025};
@@ -193,6 +197,21 @@ ion-icon {
   color: globals.$ion-primitives-neutral-500;
 }
 
+:host(.textarea-disabled.has-focus.ion-valid) {
+  --border-color: rgba(#{globals.$ion-semantics-success-base-rgb}, 0.6);
+}
+
+:host(.textarea-disabled.ion-touched.ion-invalid) {
+  --border-color: rgba(#{globals.$ion-semantics-danger-base-rgb}, 0.6);
+}
+
+:host(.textarea-disabled.has-focus.ion-valid) .textarea-bottom .helper-text,
+:host(.textarea-disabled.ion-touched.ion-invalid) .error-text,
+:host(.textarea-disabled.ion-color) .textarea-bottom .helper-text,
+:host(.textarea-disabled.ion-color) .helper-text {
+  opacity: 0.6;
+}
+
 // Textarea - Readonly
 // ----------------------------------------------------------------
 

core/src/components/textarea/textarea.native.scss

@@ -57,11 +57,18 @@
   font-size: globals.dynamic-font(12px);
 }
 
+// Textarea Hint Text
+// ----------------------------------------------------------------
+
+.textarea-bottom .helper-text {
+  color: globals.$text-color-step-300;
+}
+
 // Textarea Max Length Counter
 // ----------------------------------------------------------------
 
 .textarea-bottom .counter {
-  color: #{globals.$text-color-step-450};
+  color: globals.$text-color-step-300;
 
   padding-inline-start: 16px;
 }