touch up interactive icons

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}>
     `;

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,

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);

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));
   }
 
   /*