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;
     }
 `