feat(Button): Improve disabled button state, noissue

src/Button/README.stories.mdx

@@ -48,8 +48,10 @@ The base5-ui button component. Built on top of ButtonCore.
 
 ## Examples
 
+Basic button types and sizes:
+
 <Canvas>
-	<InlineList spacing="s">
+	<InlineList spacing="s" width="100%">
 		<Button color="primary" icon="ok">
 			Save
 		</Button>
@@ -68,24 +70,52 @@ The base5-ui button component. Built on top of ButtonCore.
 		<Button isActive size="medium">
 			Done
 		</Button>
-		<Button isDisabled size="medium">
-			Mark as done
+	</InlineList>
+</Canvas>
+
+Disabled:
+
+<Canvas>
+	<InlineList spacing="s">
+		<Button isDisabled color="primary" icon="ok">
+			Save
+		</Button>
+		<Button isDisabled> Cancel</Button>
+		<Button isDisabled size="medium" color="important">
+			Delete
+		</Button>
+		<Button isDisabled size="medium" icon="send">
+			Share
+		</Button>
+		<Button isDisabled icon="tools" size="medium" color="shaded" />
+		<Button isDisabled size="small" color="transparent">
+			Forgot password?
+		</Button>
+		<Button isDisabled round icon="plus" color="important" />
+		<Button isDisabled isActive size="medium">
+			Done
 		</Button>
 	</InlineList>
 </Canvas>
 
+Full-width button:
+
 <Canvas>
 	<Button fullWidth color="primary" icon="ok">
 		Login
 	</Button>
 </Canvas>
 
+Large, left-aligned button:
+
 <Canvas>
-	<Button fullWidth align="left" size="large" color="shaded" icon="plus">
+	<Button fullWidth align="left" size="large" color="transparent" icon="plus">
 		Add to My learning
 	</Button>
 </Canvas>
 
+Button with text overflow:
+
 <Canvas>
 	<Box width={285}>
 		<Button textOverflow="ellipsis" iconRight="chevron">

src/Button/index.js

@@ -2,7 +2,7 @@ import React, {forwardRef} from 'react';
 import PropTypes from 'prop-types';
 import styled, {css} from 'styled-components';
 
-import {alpha} from '../utils/colors';
+import {alpha, mix, getSolidBackgroundShade, isDark} from '../utils/colors';
 import {pxToRem} from '../utils/units';
 import {fillParent, ellipsis, overflowWrap} from '../mixins';
 import {
@@ -129,7 +129,7 @@ const Wrapper = styled(ButtonCore).withConfig({
 	${p =>
 		p.color === 'default' &&
 		css`
-			&::before {
+			&:not(.is-disabled)::before {
 				content: '';
 				${fillParent}
 				border-radius: inherit;
@@ -146,20 +146,36 @@ const Wrapper = styled(ButtonCore).withConfig({
 	}
 
 	&.is-disabled {
-		color: white;
-		background-color: ${alpha('black', 0.3)};
-		border-color: transparent;
-		opacity: 0.3;
-		text-shadow: 0 1px 3px black;
+		${p => {
+			const darkColor = mix(p.theme.text)(
+				'white',
+				p.theme.textDimStrength * 0.75
+			);
+			const lightColor = getSolidBackgroundShade(p.theme);
+
+			if (p.color === 'primary' || p.color === 'important') {
+				const isTextDark = isDark(
+					p.theme.globals.buttons[p.color].text
+				);
+				return `
+				color: ${isTextDark ? darkColor : lightColor};
+				background-color: ${isTextDark ? lightColor : darkColor};
+				`;
+			} else {
+				return `
+				color: ${darkColor};
+				background-color: ${lightColor};
+				`;
+			}
+		}}
+
 		cursor: not-allowed;
 
 		${p =>
 			(p.color === 'transparent' || p.color === 'shaded') &&
 			css`
-				color: ${p => p.theme.text};
 				background-color: transparent;
 				border-color: transparent;
-				text-shadow: none;
 			`}
 	}
 `;