From efa99094cf09f632f2456bd3f032c345a1114bcf Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Thu, 22 Aug 2024 13:29:00 -0400
Subject: [PATCH] Fix icon color on secondary and tertiary buttons (hover)
 (#2297)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:

While working on some other changes, I noticed that the icon color on secondary
and tertiary buttons was not being set correctly. This PR fixes that issue by
setting the icon color to the same color as the text.

Issue: XXX-XXXX

## Test plan:

Navigate to /?path=/story/packages-button--icon
Hover over the secondary and tertiary buttons
Verify that the icon color on secondary and tertiary buttons is the same as the
text color

### BEFORE

https://github.com/user-attachments/assets/1902a543-463c-443d-824b-6b6d1263fc0d

### AFTER

https://github.com/user-attachments/assets/5b9929a9-3082-4d2b-b439-1a4b2e0222c7

Author: jandrade

Reviewers: beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), 🚫 Chromatic - Get results on regular PRs, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), 🚫 Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️  dependabot, ✅ gerald

Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2297
---
 .changeset/small-walls-destroy.md             |  5 +++++
 .../wonder-blocks-button/button.stories.tsx   | 20 +++++++++++++++++++
 .../src/themes/default.ts                     |  4 +++-
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/small-walls-destroy.md

diff --git a/.changeset/small-walls-destroy.md b/.changeset/small-walls-destroy.md
new file mode 100644
index 000000000..01cd82513
--- /dev/null
+++ b/.changeset/small-walls-destroy.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": patch
+---
+
+Fixes an issue on the icon color where it was using the incorrect value over dark backgrounds. The icon color now inherits the color from the button to preserve the same color defined for the text.
diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__docs__/wonder-blocks-button/button.stories.tsx
index a3dfa98bd..7980236d7 100644
--- a/__docs__/wonder-blocks-button/button.stories.tsx
+++ b/__docs__/wonder-blocks-button/button.stories.tsx
@@ -409,6 +409,26 @@ const IconExample = () => (
                 </Button>
             ))}
         </View>
+        <LabelLarge style={styles.label}>Over a dark background</LabelLarge>
+        <View
+            style={[
+                styles.row,
+                {backgroundColor: color.darkBlue, padding: spacing.medium_16},
+            ]}
+        >
+            {kinds.map((kind, idx) => (
+                <Button
+                    light={true}
+                    kind={kind}
+                    startIcon={pencilSimpleBold}
+                    endIcon={plus}
+                    style={styles.button}
+                    key={idx}
+                >
+                    {kind}
+                </Button>
+            ))}
+        </View>
     </View>
 );
 
diff --git a/packages/wonder-blocks-button/src/themes/default.ts b/packages/wonder-blocks-button/src/themes/default.ts
index 63ef85d46..fde16661e 100644
--- a/packages/wonder-blocks-button/src/themes/default.ts
+++ b/packages/wonder-blocks-button/src/themes/default.ts
@@ -73,7 +73,9 @@ const theme = {
              * Icons
              */
             icon: {
-                secondaryHover: tokens.color.blue,
+                // Allows the icon to be visible on hover in both light and dark
+                // backgrounds.
+                secondaryHover: "inherit",
             },
         },
         border: {