Fix icon color on secondary and tertiary buttons (hover)

.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.

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

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: {