fix(button): adjust disabled styles

dhis2 · Sep 17, 2020 · 0001fd0 · 0001fd0
1 parent bc7b030
commit 0001fd0
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 12 deletions.
diff --git 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
@@ -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;
     }
 `