Fix icon color on secondary and tertiary buttons (hover) (#2297)

## 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: #2297
Khan · Aug 22, 2024 · efa9909 · efa9909
1 parent 79b9fdb
commit efa9909
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/.changeset/small-walls-destroy.md 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
@@ -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
@@ -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: {