fix: IconButton disabled color and background (#762)

Author: juliajforesti

packages/fuselage/src/components/Button/IconButton.stories.tsx

@@ -35,36 +35,66 @@ export default {
 export const _IconButton: ComponentStory<typeof IconButton> = () => (
   <IconButton icon='balloon' />
 );
+export const _IconButtonDisabled: ComponentStory<typeof IconButton> = () => (
+  <IconButton icon='balloon' disabled />
+);
+
 export const _IconButtonMini: ComponentStory<typeof IconButton> = () => (
   <IconButton icon='balloon' mini />
 );
-export const _IconButtonSecondary: ComponentStory<typeof IconButton> = () => (
-  <IconButton icon='balloon' secondary />
-);
+
 export const _IconButtonInfo: ComponentStory<typeof IconButton> = () => (
   <IconButton icon='balloon' info />
 );
+export const _IconButtonInfoDisabled: ComponentStory<
+  typeof IconButton
+> = () => <IconButton icon='balloon' info disabled />;
+
 export const _IconButtonSecondaryInfo: ComponentStory<
   typeof IconButton
 > = () => <IconButton icon='balloon' secondary info />;
+export const _IconButtonSecondaryInfoDisabled: ComponentStory<
+  typeof IconButton
+> = () => <IconButton icon='balloon' secondary info disabled />;
 
 export const _IconButtonSuccess: ComponentStory<typeof IconButton> = () => (
   <IconButton icon='balloon' success />
 );
+export const _IconButtonSuccessDisabled: ComponentStory<
+  typeof IconButton
+> = () => <IconButton icon='balloon' success disabled />;
+
 export const _IconButtonSecondarySuccess: ComponentStory<
   typeof IconButton
 > = () => <IconButton icon='balloon' secondary success />;
+export const _IconButtonSecondarySuccessDisabled: ComponentStory<
+  typeof IconButton
+> = () => <IconButton icon='balloon' secondary success disabled />;
 
 export const _IconButtonWarning: ComponentStory<typeof IconButton> = () => (
   <IconButton icon='balloon' warning />
 );
+export const _IconButtonWarningDisabled: ComponentStory<
+  typeof IconButton
+> = () => <IconButton icon='balloon' warning disabled />;
+
 export const _IconButtonSecondaryWarning: ComponentStory<
   typeof IconButton
 > = () => <IconButton icon='balloon' secondary warning />;
+export const _IconButtonSecondaryWarningDisabled: ComponentStory<
+  typeof IconButton
+> = () => <IconButton icon='balloon' secondary warning disabled />;
 
 export const _IconButtonDanger: ComponentStory<typeof IconButton> = () => (
   <IconButton icon='balloon' danger />
 );
+export const _IconButtonDangerDisabled: ComponentStory<
+  typeof IconButton
+> = () => <IconButton icon='balloon' danger disabled />;
+
 export const _IconButtonSecondaryDanger: ComponentStory<
   typeof IconButton
 > = () => <IconButton icon='balloon' secondary danger />;
+export const _IconButtonSecondaryDangerDisabled: ComponentStory<
+  typeof IconButton
+> = () => <IconButton icon='balloon' secondary danger disabled />;

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

@@ -175,9 +175,9 @@ $icon: (
   focus-background-color: -color('icon', 'focus-background-color', colors.neutral(400)),
   focus-border-color: -color('icon', 'focus-border-color', colors.neutral(500)),
   focus-shadow-color: -color('icon', 'focus-shadow-color', colors.neutral(100)),
-  disabled-background-color: -color('icon', 'disabled-background-color', colors.neutral(100)),
-  disabled-border-color: -color('icon', 'disabled-border-color', colors.neutral(100)),
-  disabled-color: -color('icon', 'disabled-color', colors.neutral(200)),
+  disabled-background-color: -color('icon', 'disabled-background-color', transparent),
+  disabled-border-color: -color('icon', 'disabled-border-color', transparent),
+  disabled-color: -color('icon', 'disabled-color', colors.neutral(600)),
 );
 
 $icon-info: (
@@ -191,8 +191,8 @@ $icon-info: (
   focus-background-color: -color('icon-info', 'focus-background-color', colors.info(300)),
   focus-border-color: -color('icon-info', 'focus-border-color', colors.info(400)),
   focus-shadow-color: -color('icon-info', 'focus-shadow-color', colors.info(100)),
-  disabled-background-color: -color('icon-info', 'disabled-background-color', colors.info(100)),
-  disabled-border-color: -color('icon-info', 'disabled-border-color', colors.info(100)),
+  disabled-background-color: -color('icon', 'disabled-background-color', transparent),
+  disabled-border-color: -color('icon', 'disabled-border-color', transparent),
   disabled-color: -color('icon-info', 'disabled-color', colors.info(200)),
 );
 
@@ -207,8 +207,8 @@ $icon-success: (
   focus-background-color: -color('icon-success', 'focus-background-color', colors.success(300)),
   focus-border-color: -color('icon-success', 'focus-border-color', colors.success(400)),
   focus-shadow-color: -color('icon-success', 'focus-shadow-color', colors.success(100)),
-  disabled-background-color: -color('icon-success', 'disabled-background-color', colors.success(100)),
-  disabled-border-color: -color('icon-success', 'disabled-border-color', colors.success(100)),
+  disabled-background-color: -color('icon', 'disabled-background-color', transparent),
+  disabled-border-color: -color('icon', 'disabled-border-color', transparent),
   disabled-color: -color('icon-success', 'disabled-color', colors.success(200)),
 );
 
@@ -223,8 +223,8 @@ $icon-warning: (
   focus-background-color: -color('icon-warning', 'focus-background-color', colors.warning(300)),
   focus-border-color: -color('icon-warning', 'focus-border-color', colors.warning(400)),
   focus-shadow-color: -color('icon-warning', 'focus-shadow-color', colors.warning(100)),
-  disabled-background-color: -color('icon-warning', 'disabled-background-color', colors.warning(100)),
-  disabled-border-color: -color('icon-warning', 'disabled-border-color', colors.warning(100)),
+  disabled-background-color: -color('icon', 'disabled-background-color', transparent),
+  disabled-border-color: -color('icon', 'disabled-border-color', transparent),
   disabled-color: -color('icon-warning', 'disabled-color', colors.warning(200)),
 );
 
@@ -239,7 +239,7 @@ $icon-danger: (
   focus-background-color: -color('icon-danger', 'focus-background-color', colors.danger(300)),
   focus-border-color: -color('icon-danger', 'focus-border-color', colors.danger(400)),
   focus-shadow-color: -color('icon-danger', 'focus-shadow-color', colors.danger(100)),
-  disabled-background-color: -color('icon-danger', 'disabled-background-color', colors.danger(100)),
-  disabled-border-color: -color('icon-danger', 'disabled-border-color', colors.danger(100)),
+  disabled-background-color: -color('icon', 'disabled-background-color', transparent),
+  disabled-border-color: -color('icon', 'disabled-border-color', transparent),
   disabled-color: -color('icon-danger', 'disabled-color', colors.danger(200)),
 );