From c30d685c3283d61cf02f1c5c6aeb7e57fc1b7341 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 11 Apr 2024 12:55:44 -0400
Subject: [PATCH] feat(input): add hover state to the ionic theme (#29313)

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?
The ionic input does not have a hover state.

## What is the new behavior?
Adds a hover state.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information
We do not currently have a way to test hover states. See
https://github.com/microsoft/playwright/issues/12077 for more
information.

---------

Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
---
 core/src/components/input/input.ionic.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 21411caa5f..411599422f 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -1,3 +1,4 @@
+@use "../../foundations/ionic.vars.scss" as tokens;
 @import "./input";
 @import "./input.ionic.vars";
 @import "./input.ionic.outline.scss";
@@ -23,10 +24,18 @@
 // ----------------------------------------------------------------
 
 .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);
+  color: tokens.$ionic-color-neutral-600;
 }
 
 :host(.ion-touched.ion-invalid) .error-text {
   color: var(--text-color-invalid);
 }
+
+// Input Hover
+// ----------------------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --border-color: #{tokens.$ionic-color-neutral-600};
+  }
+}