Merge pull request #238 from dhis2/fix-toggled-button-disabled-style

fix(button): toggled button disabled style
dhis2 · Aug 13, 2020 · 3cdeb20 · 3cdeb20
2 parents d35af16 + f2542a1
commit 3cdeb20
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/packages/core/src/Button/Button.stories.js b/packages/core/src/Button/Button.stories.js
diff --git a/packages/core/src/Button/Button.styles.js b/packages/core/src/Button/Button.styles.js
@@ -245,8 +245,8 @@ export default css`
     .toggled {
         background: ${colors.grey700};
         border: 1px solid ${colors.grey900};
-        color: ${colors.white};
-        fill: ${colors.white};
+        color: ${colors.grey050};
+        fill: ${colors.grey050};
     }
 
     .toggled:focus {
@@ -256,6 +256,7 @@ export default css`
 
     .toggled:hover {
         background: ${colors.grey800};
+        border-color: ${colors.grey900};
     }
 
     .toggled:focus::after {
@@ -264,6 +265,15 @@ export default css`
 
     .toggled:active,
     .toggled:active:focus {
-        background: ${colors.grey800};
+        background: ${colors.grey900};
+        border-color: ${colors.grey900};
+    }
+
+    .toggled:disabled {
+        background: ${colors.grey500};
+        border-color: ${colors.grey600};
+        color: ${colors.grey050};
+        fill: ${colors.grey050};
+        opacity: 1;
     }
 `