From f1ee5ee508fcd0c0cb1a8b6eae4c5dc9051800f6 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 12 Jun 2024 18:09:06 -0400
Subject: [PATCH] touch up interactive icons

---
 src/components/icon-button/icon-button.ts |  1 +
 src/components/input/input.styles.ts      | 11 ++++++++---
 src/components/select/select.styles.ts    | 12 ++++++++----
 src/components/tag/tag.styles.ts          |  6 +++++-
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index f9031f256..8b13ed2f6 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -142,6 +142,7 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
           library=${ifDefined(this.library)}
           src=${ifDefined(this.src)}
           aria-hidden="true"
+          fixed-width
         ></wa-icon>
       </${tag}>
     `;
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index 0333ae124..3ee5dac09 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -123,7 +123,7 @@ export default css`
 
   .input__prefix ::slotted(wa-icon),
   .input__suffix ::slotted(wa-icon) {
-    color: var(--wa-color-neutral-fill-loud);
+    color: var(--wa-color-neutral-on-quiet);
   }
 
   /*
@@ -225,7 +225,7 @@ export default css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--wa-color-neutral-fill-loud);
+    color: var(--wa-color-neutral-on-quiet);
     border: none;
     background: none;
     padding: 0;
@@ -233,9 +233,14 @@ export default css`
     cursor: pointer;
   }
 
+  .input__clear:hover,
+  .input__password-toggle:hover {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  }
+
   .input__clear:active,
   .input__password-toggle:active {
-    color: color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active));
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
   }
 
   .input__clear:focus,
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index c4813a232..1eba33d12 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -239,7 +239,7 @@ export default css`
     flex: 0;
     display: inline-flex;
     align-items: center;
-    color: var(--wa-color-neutral-fill-loud);
+    color: var(--wa-color-neutral-on-quiet);
   }
 
   /* Clear button */
@@ -248,7 +248,7 @@ export default css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--wa-color-neutral-fill-loud);
+    color: var(--wa-color-neutral-on-quiet);
     border: none;
     background: none;
     padding: 0;
@@ -260,8 +260,12 @@ export default css`
     outline: none;
   }
 
+  .select__clear:hover {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  }
+
   .select__clear:active {
-    color: color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active));
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
   }
 
   /* Expand icon */
@@ -269,7 +273,7 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    color: var(--wa-color-text-quiet);
+    color: var(--wa-color-neutral-on-quiet);
     transition: rotate var(--wa-transition-slow) ease;
     rotate: 0;
     margin-inline-start: var(--wa-space-s);
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 525fce1a0..e508629b1 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -59,8 +59,12 @@ export default css`
     padding: 0;
   }
 
+  .tag:hover > wa-icon-button {
+    color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-hover));
+  }
+
   .tag:active > wa-icon-button {
-    color: var(--content-color);
+    color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-active));
   }
 
   /*