From 0001fd002cf7fde3a9a7625c224d61f0d1064126 Mon Sep 17 00:00:00 2001 From: joe-cooper <33054985+cooper-joe@users.noreply.github.com> Date: Wed, 16 Sep 2020 16:39:34 +0200 Subject: [PATCH] fix(button): adjust disabled styles --- packages/core/src/Button/Button.stories.js | 40 ++++++++++++++++++++-- packages/core/src/Button/Button.styles.js | 13 +++---- 2 files changed, 41 insertions(+), 12 deletions(-) diff --git a/packages/core/src/Button/Button.stories.js b/packages/core/src/Button/Button.stories.js index 1d409790e7..089605fba6 100644 --- a/packages/core/src/Button/Button.stories.js +++ b/packages/core/src/Button/Button.stories.js @@ -38,9 +38,43 @@ export const Destructive = () => ( ) export const Disabled = () => ( - <Button disabled name="Disabled button" value="default" onClick={logger}> - Label me! - </Button> + <> + <Button + disabled + name="Disabled button" + value="default" + onClick={logger} + > + Label me! + </Button> + <Button + primary + disabled + name="Disabled primary button" + value="default" + onClick={logger} + > + Label me! + </Button> + <Button + secondary + disabled + name="Disabled secondary button" + value="default" + onClick={logger} + > + Label me! + </Button> + <Button + destructive + disabled + name="Disabled destructive button" + value="default" + onClick={logger} + > + Label me! + </Button> + </> ) export const Small = () => ( diff --git a/packages/core/src/Button/Button.styles.js b/packages/core/src/Button/Button.styles.js index c83638934c..731f3e3b5c 100644 --- a/packages/core/src/Button/Button.styles.js +++ b/packages/core/src/Button/Button.styles.js @@ -137,13 +137,11 @@ export default css` } .primary:disabled { - border-color: ${theme.primary800}; - background: linear-gradient(180deg, #1565c0 0%, #0650a3 100%); - background-color: #b6c8e2; + border-color: #93a6bd; + background: #b3c6de; box-shadow: none; color: ${colors.white}; fill: ${colors.white}; - opacity: 0.33; } .secondary { @@ -212,13 +210,11 @@ export default css` } .destructive:disabled { - border-color: #a10b0b; - background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%); - background-color: #e5b5b7; + border-color: #c59898; + background: #d6a8a8; box-shadow: none; color: ${colors.white}; fill: ${colors.white}; - opacity: 0.33; } .icon-only { @@ -274,6 +270,5 @@ export default css` border-color: ${colors.grey600}; color: ${colors.grey050}; fill: ${colors.grey050}; - opacity: 1; } `