From 6144c849e3d2030dccd8b53d1a0d1b003a5bb41a Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Tue, 11 Jun 2024 21:44:30 -0400
Subject: [PATCH] touch up icon and copy button styles

---
 .../copy-button/copy-button.styles.ts          | 18 +++++++++++++++++-
 src/components/copy-button/copy-button.ts      |  7 ++++---
 .../icon-button/icon-button.styles.ts          |  7 +++++--
 src/components/icon-button/icon-button.ts      |  2 ++
 src/components/tooltip/tooltip.styles.ts       |  6 +++---
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/copy-button/copy-button.styles.ts b/src/components/copy-button/copy-button.styles.ts
index 03cc167d1..d3ec36a91 100644
--- a/src/components/copy-button/copy-button.styles.ts
+++ b/src/components/copy-button/copy-button.styles.ts
@@ -2,10 +2,12 @@ import { css } from 'lit';
 
 export default css`
   :host {
+    --background-color-hover: var(--wa-color-neutral-fill-quiet);
     --error-color: var(--wa-color-danger-fill-loud);
     --success-color: var(--wa-color-success-fill-loud);
 
     display: inline-block;
+    color: var(--wa-color-text-quiet);
   }
 
   .copy-button__button {
@@ -15,13 +17,27 @@ export default css`
     background: none;
     border: none;
     border-radius: var(--wa-border-radius-s);
-    font-size: inherit;
     color: inherit;
+    font-size: inherit;
     padding: var(--wa-space-xs);
     cursor: pointer;
     transition: color var(--wa-transition-fast) var(--wa-transition-easing);
   }
 
+  .copy-button__button:hover:not([disabled]),
+  .copy-button__button:focus-visible:not([disabled]) {
+    background-color: var(--background-color-hover);
+  }
+
+  .copy-button:not(.copy-button--success, .copy-button--error) .copy-button__button:hover:not([disabled]),
+  .copy-button:not(.copy-button--success, .copy-button--error) .copy-button__button:focus-visible:not([disabled]) {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  }
+
+  .copy-button:not(.copy-button--success, .copy-button--error) .copy-button__button:active:not([disabled]) {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+  }
+
   .copy-button--success .copy-button__button {
     color: var(--success-color);
   }
diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts
index dd1835c22..dea0adb97 100644
--- a/src/components/copy-button/copy-button.ts
+++ b/src/components/copy-button/copy-button.ts
@@ -38,6 +38,7 @@ import type WaTooltip from '../tooltip/tooltip.js';
  * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.
  * @csspart tooltip__body - The tooltip's exported `body` part.
  *
+ * @cssproperty --background-color-hover - The color of the button's background on hover.
  * @cssproperty --success-color - The color to use for success feedback.
  * @cssproperty --error-color - The color to use for error feedback.
  */
@@ -212,13 +213,13 @@ export default class WaCopyButton extends WebAwesomeElement {
           @click=${this.handleCopy}
         >
           <slot part="copy-icon" name="copy-icon">
-            <wa-icon library="system" name="copy" variant="regular"></wa-icon>
+            <wa-icon library="system" name="copy" variant="regular" fixed-width></wa-icon>
           </slot>
           <slot part="success-icon" name="success-icon" variant="solid" hidden>
-            <wa-icon library="system" name="check"></wa-icon>
+            <wa-icon library="system" name="check" fixed-width></wa-icon>
           </slot>
           <slot part="error-icon" name="error-icon" variant="solid" hidden>
-            <wa-icon library="system" name="xmark"></wa-icon>
+            <wa-icon library="system" name="xmark" fixed-width></wa-icon>
           </slot>
         </button>
       </wa-tooltip>
diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts
index e825dbafd..1212d8d9f 100644
--- a/src/components/icon-button/icon-button.styles.ts
+++ b/src/components/icon-button/icon-button.styles.ts
@@ -2,6 +2,8 @@ import { css } from 'lit';
 
 export default css`
   :host {
+    --background-color-hover: var(--wa-color-neutral-fill-quiet);
+
     display: inline-block;
     color: var(--wa-color-text-quiet);
   }
@@ -23,11 +25,12 @@ export default css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--wa-color-brand-fill-loud);
+    background-color: var(--wa-color-neutral-fill-quiet);
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
   }
 
   .icon-button:active:not(.icon-button--disabled) {
-    color: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active));
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
   }
 
   .icon-button:focus {
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index f9c368dd0..f9031f256 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -21,6 +21,8 @@ import type { CSSResultGroup } from 'lit';
  * @event wa-blur - Emitted when the icon button loses focus.
  * @event wa-focus - Emitted when the icon button gains focus.
  *
+ * @cssproperty --background-color-hover - The color of the button's background on hover.
+ *
  * @csspart base - The component's base wrapper.
  */
 @customElement('wa-icon-button')
diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts
index 62cfef6d9..5c5861b7f 100644
--- a/src/components/tooltip/tooltip.styles.ts
+++ b/src/components/tooltip/tooltip.styles.ts
@@ -8,9 +8,6 @@ export default css`
     --padding: var(--wa-space-2xs) var(--wa-space-xs);
 
     display: contents;
-    color: var(--wa-tooltip-content-color);
-    font-size: var(--wa-tooltip-font-size);
-    line-height: var(--wa-tooltip-line-height);
   }
 
   .tooltip {
@@ -45,6 +42,9 @@ export default css`
     border-radius: var(--border-radius);
     background: var(--background);
     font: inherit;
+    color: var(--wa-tooltip-content-color);
+    font-size: var(--wa-tooltip-font-size);
+    line-height: var(--wa-tooltip-line-height);
     text-align: start;
     white-space: normal;
     padding: var(--padding);