fix(fuselage): IconButton hover color (#754)

Author: juliajforesti

packages/fuselage/src/styles/variables/buttons.scss

@@ -184,8 +184,8 @@ $icon-info: (
   background-color: -color('icon-info', 'background-color', transparent),
   border-color: -color('icon-info', 'border-color', transparent),
   color: -color('icon-info', 'color', colors.info(600)),
-  hover-background-color: -color('icon-info', 'hover-background-color', colors.info(300)),
-  hover-border-color: -color('icon-info', 'hover-border-color', colors.info(300)),
+  hover-background-color: -color('icon-info', 'hover-background-color', colors.neutral(400)),
+  hover-border-color: -color('icon-info', 'hover-border-color', colors.neutral(400)),
   active-background-color: -color('icon-info', 'active-background-color', colors.info(400)),
   active-border-color: -color('icon-info', 'active-border-color', colors.info(400)),
   focus-background-color: -color('icon-info', 'focus-background-color', colors.info(300)),
@@ -200,8 +200,8 @@ $icon-success: (
   background-color: -color('icon-success', 'background-color', transparent),
   border-color: -color('icon-success', 'border-color', transparent),
   color: -color('icon-success', 'color', colors.success(800)),
-  hover-background-color: -color('icon-success', 'hover-background-color', colors.success(300)),
-  hover-border-color: -color('icon-success', 'hover-border-color', colors.success(300)),
+  hover-background-color: -color('icon-success', 'hover-background-color', colors.neutral(400)),
+  hover-border-color: -color('icon-success', 'hover-border-color', colors.neutral(400)),
   active-background-color: -color('icon-success', 'active-background-color', colors.success(400)),
   active-border-color: -color('icon-success', 'active-border-color', colors.success(400)),
   focus-background-color: -color('icon-success', 'focus-background-color', colors.success(300)),
@@ -216,8 +216,8 @@ $icon-warning: (
   background-color: -color('icon-warning', 'background-color', transparent),
   border-color: -color('icon-warning', 'border-color', transparent),
   color: -color('icon-warning', 'color', colors.warning(900)),
-  hover-background-color: -color('icon-warning', 'hover-background-color', colors.warning(300)),
-  hover-border-color: -color('icon-warning', 'hover-border-color', colors.warning(300)),
+  hover-background-color: -color('icon-warning', 'hover-background-color', colors.neutral(400)),
+  hover-border-color: -color('icon-warning', 'hover-border-color', colors.neutral(400)),
   active-background-color: -color('icon-warning', 'active-background-color', colors.warning(400)),
   active-border-color: -color('icon-warning', 'active-border-color', colors.warning(400)),
   focus-background-color: -color('icon-warning', 'focus-background-color', colors.warning(300)),
@@ -232,8 +232,8 @@ $icon-danger: (
   background-color: -color('icon-danger', 'background-color', transparent),
   border-color: -color('icon-danger', 'border-color', transparent),
   color: -color('icon-danger', 'color', colors.danger(500)),
-  hover-background-color: -color('icon-danger', 'hover-background-color', colors.danger(300)),
-  hover-border-color: -color('icon-danger', 'hover-border-color', colors.danger(300)),
+  hover-background-color: -color('icon-danger', 'hover-background-color', colors.neutral(400)),
+  hover-border-color: -color('icon-danger', 'hover-border-color', colors.neutral(400)),
   active-background-color: -color('icon-danger', 'active-background-color', colors.danger(400)),
   active-border-color: -color('icon-danger', 'active-border-color', colors.danger(400)),
   focus-background-color: -color('icon-danger', 'focus-background-color', colors.danger(300)),