fix(input): update helper text color for ionic theme (#29269)

core/src/components/input/input.ionic.scss

@@ -12,3 +12,11 @@
 :host(.input-size-large) {
   min-height: 48px;
 }
+
+// Input Hint Text
+// ----------------------------------------------------------------
+
+.input-bottom .helper-text {
+  // TODO(FW-6112): Verify the design token is correct once it's available and remove the hardcoded value.
+  color: var(--ionic-color-neutral-600, #535353);
+}

core/src/components/input/test/bottom-content/input.e2e.ts

@@ -36,6 +36,31 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   });
 });
 
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: bottom content'), () => {
+    test('entire input component should render correctly with no fill', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input value="hi@ionic.io" label="Email" helper-text="Enter an email" maxlength="20" counter="true"></ion-input>
+      `,
+        config
+      );
+      const input = page.locator('ion-input');
+      await expect(input).toHaveScreenshot(screenshot(`input-full-bottom-no-fill`));
+    });
+    test('entire input component should render correctly with outline fill', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input fill="outline" value="hi@ionic.io" label="Email" helper-text="Enter an email" maxlength="20" counter="true"></ion-input>
+      `,
+        config
+      );
+      const input = page.locator('ion-input');
+      await expect(input).toHaveScreenshot(screenshot(`input-full-bottom-outline`));
+    });
+  });
+});
+
 /**
  * Rendering is the same across modes
  */
@@ -53,7 +78,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 /**
  * Rendering is the same across modes
  */
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input: hint text'), () => {
     test.describe('input: hint text functionality', () => {
       test('helper text should be visible initially', async ({ page }) => {