fix(input): clear button uses contrast when setting color on item (#26592)

resolves #26337

core/src/components/input/input.scss

@@ -158,12 +158,14 @@
   background-color: transparent;
   background-repeat: no-repeat;
 
+  color: $text-color-step-400;
+
   visibility: hidden;
   appearance: none;
 }
 
-.input-clear-icon ion-icon {
+:host(.in-item-color) .input-clear-icon {
-  color: $text-color-step-400;
+  color: inherit;
 }
 
 /**

core/src/components/input/input.tsx

@@ -12,7 +12,7 @@ import type {
 } from '../../interface';
 import type { Attributes } from '../../utils/helpers';
 import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';
-import { createColorClasses } from '../../utils/theme';
+import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -454,6 +454,7 @@ export class Input implements ComponentInterface {
           [mode]: true,
           'has-value': this.hasValue(),
           'has-focus': this.hasFocus,
+          'in-item-color': hostContext('ion-item.ion-color', this.el),
         })}
       >
         <input

core/src/components/input/test/basic/input.e2e.ts

@@ -185,7 +185,7 @@ test.describe('input: clear button', () => {
    */
   test('should keep the input focused when the clear button is pressed', async ({ page }) => {
     await page.setContent(`
-      <ion-input value="abc" clear-input="true"></ion-searchbar>
+      <ion-input value="abc" clear-input="true"></ion-input>
     `);
 
     const input = page.locator('ion-input');
@@ -200,4 +200,17 @@ test.describe('input: clear button', () => {
 
     await expect(nativeInput).toBeFocused();
   });
+
+  test('should inherit color when used in item with color property', async ({ page }) => {
+    await page.setContent(`
+      <ion-item color="primary">
+        <ion-input value="Text" clear-input="true"></ion-input>
+      </ion-item>
+    `);
+
+    const item = page.locator('ion-item');
+    expect(await item.screenshot()).toMatchSnapshot(
+      `input-with-clear-button-item-color-${page.getSnapshotSettings()}.png`
+    );
+  });
 });