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

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: resolves #26337

The input inherits contrast color from the ion-item when the item has the color property set. However, the clear icon remains a dark gray. This means that the clear button often does not have the correct contrast on the item background.

What is the new behavior?

• The clear icon inherits the color from the item when color is set on ion-item.
  Note: I chose this architecture to avoid a global css style like ion-item.ion-color ion-input .input-clear-icon. I could not target this within the ion-item stylesheets because ::slotted only targets elements that have been placed into a slot.

Does this introduce a breaking change?

• Yes
• No
  I originally thought making the initial change was a breaking change, but it wasn’t. If developers were targeting ion-icon to change the color, that css will still work as it requires a more specific selector than .input-clear-icon already.

Other information

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.