From ca895e9e130039300ecbcc059933dc87b47e1f5a Mon Sep 17 00:00:00 2001
From: Abraham Preciado Morales <apreciado@esri.com>
Date: Tue, 23 Apr 2024 09:58:56 -0700
Subject: [PATCH] fix(input-date-picker): update the focus and hover chevron
 icon color (#9146)

**Related Issue:**
[7712](https://github.com/Esri/calcite-design-system/issues/7712)

### Summary
This updates `input-date-picker` chevron colors to be
`--calcite-color-text-3` when idle and `--calcite-color-text-1` when
hovered or pressed.
---
 .../input-date-picker/input-date-picker.scss         | 12 ++++++++++++
 .../input-date-picker/input-date-picker.tsx          |  1 +
 .../src/components/input-date-picker/resources.ts    |  1 +
 3 files changed, 14 insertions(+)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
index 330c67a409a..36d09338696 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -37,6 +37,18 @@
 
 .input-wrapper {
   @apply relative;
+
+  .chevron-icon {
+    color: var(--calcite-color-text-3);
+  }
+
+  &:focus-within,
+  &:active,
+  &:hover {
+    .chevron-icon {
+      color: var(--calcite-color-text-1);
+    }
+  }
 }
 
 .toggle-icon {
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 956d53ebdb3..ea685bcc803 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -681,6 +681,7 @@ export class InputDatePicker
       // we set tab index to -1 to prevent delegatesFocus from stealing focus before we can set it
       <span class={CSS.toggleIcon} tabIndex={-1}>
         <calcite-icon
+          class={CSS.chevronIcon}
           icon={open ? "chevron-up" : "chevron-down"}
           scale={getIconScale(this.scale)}
         />
diff --git a/packages/calcite-components/src/components/input-date-picker/resources.ts b/packages/calcite-components/src/components/input-date-picker/resources.ts
index 5c3a881fab2..3007647d643 100644
--- a/packages/calcite-components/src/components/input-date-picker/resources.ts
+++ b/packages/calcite-components/src/components/input-date-picker/resources.ts
@@ -12,4 +12,5 @@ export const CSS = {
   menuActive: "menu-container--active",
   toggleIcon: "toggle-icon",
   verticalArrowContainer: "vertical-arrow-container",
+  chevronIcon: "chevron-icon",
 };