✨ Add dark mode

src/Alert.jsx

@@ -17,6 +17,7 @@ const Alert = ({ children, ...rest }) => (
 
 Alert.propTypes = {
   children: PropTypes.node.isRequired,
+  dark: PropTypes.bool,
   outline: PropTypes.bool,
   /** button size */
   size: sizeTypeFull,

src/Badge.jsx

@@ -15,6 +15,7 @@ const Badge = ({ children, ...rest }) => (
 
 Badge.propTypes = {
   children: PropTypes.node.isRequired,
+  dark: PropTypes.bool,
   outline: PropTypes.bool,
   size: sizeTypeFull,
   variant: variantType,

src/Button.jsx

@@ -33,15 +33,12 @@ const Button = ({ children, ...rest }) => (
 );
 
 Button.propTypes = {
-  /** boolean indicating whether the button should render with an animation */
   animate: PropTypes.bool,
   as: PropTypes.string,
-  /** match its parent width */
   block: PropTypes.bool,
   children: PropTypes.node.isRequired,
-  /** boolean indicating whether the button should render as disabled */
+  dark: PropTypes.bool,
   disabled: PropTypes.bool,
-  /** callback on the click event */
   onClick: PropTypes.func,
   outline: PropTypes.bool,
   size: sizeTypeFull,

src/utils/helpers.js

@@ -53,6 +53,14 @@ export const themeGet = (props: Object, path: string, options: Object = {}): any
   }
 
   if (key) {
+    if (Array.isArray(key)) {
+      const value = key
+        .filter(d => !!props[d])
+        .map(d => props[d])[0] || base;
+
+      return selection[value];
+    }
+
     return getValue(selection[props[key] || base], key);
   }
 

src/utils/system.js

@@ -50,29 +50,38 @@ const textTransform = style({
 
 const base = {
   color: props => {
-    const { outline } = props;
+    const { dark, outline } = props;
     const colors = themeGet(props, 'colors');
     const selectedColor = getColor(props);
 
     let baseColor = getYiq(selectedColor) > 180 ? colors.black : colors.white;
-    baseColor = outline ? selectedColor : baseColor;
+    baseColor = outline || dark ? selectedColor : baseColor;
 
     return css`
       color: ${baseColor};
     `;
   },
   variant(props) {
-    const { outline } = props;
-    const colors = themeGet(props, 'colors');
+    const { dark, outline } = props;
+    const { colors, darkColor } = themeGet(props);
     const themeColor = getColor(props);
 
-    let selectedColor = getYiq(themeColor) > 180 ? colors.black : colors.white;
-    selectedColor = outline ? themeColor : selectedColor;
     const backgroundColor = outline ? colors.white : themeColor;
+    const baseColor = getYiq(themeColor) > 180 ? colors.black : colors.white;
+    let selectedColor = outline ? themeColor : baseColor;
+
+    if (dark) {
+      const colorDiff = Math.abs(getYiq(darkColor) - getYiq(themeColor));
+      selectedColor = colorDiff > 40 ? themeColor : lighten(0.3, themeColor);
+    }
+    else if (outline) {
+      const colorDiff = Math.abs(getYiq(backgroundColor) - getYiq(themeColor));
+      selectedColor = colorDiff > 50 ? themeColor : darken(0.2, themeColor);
+    }
 
     return css`
-      background-color: ${backgroundColor};
-      border: 1px solid ${themeColor};
+      background-color: ${dark ? darkColor : backgroundColor};
+      border: 1px solid ${dark && !outline ? darkColor : themeColor};
       color: ${selectedColor};
     `;
   },
@@ -660,7 +669,7 @@ export const HeadingStyles = {
     const { gutterBottom } = props;
     const gutter = themeGet(props, 'gutter');
     const headingWeight = themeGet(props, 'headingWeight');
-    const headingSize = themeGet(props, 'headingSizes', { key: 'as', base: 'h1' });
+    const headingSize = themeGet(props, 'headingSizes', { key: ['size', 'as'], base: 'h1' });
 
     return css`
       font-size: ${px(headingSize)};

src/utils/theme.js

@@ -70,6 +70,8 @@ export const colors = {
   black: '#000',
 };
 
+export const darkColor = '#3C3F41';
+
 export const grays = {
   gray05: '#f4f4f4',
   gray10: '#e6e6e6',

stories/Alert.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs/react';
 
-import { Alert, Box, Flex, Heading } from '../src';
+import { Alert, Box, Flex, Heading, Paragraph } from '../src';
 import { sizeOptions, variantOptions } from '../src/utils/options';
 
 import { SVG, ViewCheckbox } from './helpers/components';
@@ -13,11 +13,12 @@ storiesOf('Alert', module)
   .addDecorator(backgroundAddon)
   .addDecorator(withKnobs)
   .add('default', withInfo({
-    propTablesExclude: [ViewCheckbox, Heading],
+    propTablesExclude: [ViewCheckbox, Box, Heading, Paragraph],
   })(() => (
     <ViewCheckbox>
       <Alert
         alignHorizontal={select('Align Horizontal', ['left', 'center', 'right'], 'left')}
+        dark={boolean('Dark', false)}
         outline={boolean('Outline', false)}
         size={select('Size', sizeOptions, 'md')}
         variant={select('Variant', variantOptions, 'primary')}
@@ -54,14 +55,30 @@ storiesOf('Alert', module)
   .add('with variant', () => (
     <ViewCheckbox>
       {variantOptions.map((d, i) => (
-        <Alert key={i} variant={d}>{capitalize(d)}</Alert>
+        <Alert key={i} variant={d}>
+          <Heading as="h4">{capitalize(d)}</Heading>
+          <Paragraph>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</Paragraph>
+        </Alert>
+      ))}
+    </ViewCheckbox>
+  ))
+  .add('with dark mode', () => (
+    <ViewCheckbox>
+      {variantOptions.map((d, i) => (
+        <Alert key={i} variant={d} dark>
+          <Heading as="h4">{capitalize(d)}</Heading>
+          <Paragraph>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</Paragraph>
+        </Alert>
       ))}
     </ViewCheckbox>
   ))
   .add('with outline', () => (
     <ViewCheckbox>
       {variantOptions.map((d, i) => (
-        <Alert key={i} outline variant={d}>{capitalize(d)}</Alert>
+        <Alert key={i} outline variant={d}>
+          <Heading as="h4">{capitalize(d)}</Heading>
+          <Paragraph>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</Paragraph>
+        </Alert>
       ))}
     </ViewCheckbox>
   ));

stories/Badge.stories.js

@@ -62,6 +62,13 @@ storiesOf('Badge', module)
       ))}
     </ViewCheckbox>
   ))
+  .add('with dark mode', () => (
+    <ViewCheckbox>
+      {variantOptions.map((d, i) => (
+        <Badge key={i} variant={d} dark>{capitalize(d)}</Badge>
+      ))}
+    </ViewCheckbox>
+  ))
   .add('with outline', () => (
     <ViewCheckbox>
       {variantOptions.map((d, i) => (

stories/Button.stories.js

@@ -54,7 +54,21 @@ storiesOf('Button', module)
           variant={d}
           disabled={boolean('Disabled', false)}
           onClick={action('clicked')}
-          outline={boolean('Outline', false)}
+        >
+          {capitalize(d)}
+        </Button>
+      ))}
+    </ViewCheckbox>
+  ))
+  .add('with dark mode', () => (
+    <ViewCheckbox>
+      {variantOptions.map((d, i) => (
+        <Button
+          key={i}
+          variant={d}
+          dark
+          disabled={boolean('Disabled', false)}
+          onClick={action('clicked')}
         >
           {capitalize(d)}
         </Button>

stories/ButtonGroup.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
-import { withKnobs, select } from '@storybook/addon-knobs/react';
+import { withKnobs, select, boolean } from '@storybook/addon-knobs/react';
 
 import { Button, ButtonGroup } from '../src';
 import { sizeOptions, variantOptions } from '../src/utils/options';
@@ -20,10 +20,27 @@ storiesOf('ButtonGroup', module)
         size={select('Size', sizeOptions, 'md')}
         variant={select('Variant', variantOptions, 'primary')}
       >
-        <Button>First</Button>
-        <Button outline>Second</Button>
-        <Button outline>Third</Button>
-        <Button outline>Forth</Button>
+        <Button
+          dark={boolean('Dark', false)}
+          outline
+        >
+          First
+        </Button>
+        <Button>
+          Second
+        </Button>
+        <Button
+          dark={boolean('Dark', false)}
+          outline
+        >
+          Third
+        </Button>
+        <Button
+          dark={boolean('Dark', false)}
+          outline
+        >
+          Forth
+        </Button>
       </ButtonGroup>
     </ViewCheckbox>
   )));

stories/Flex.stories.js

@@ -15,15 +15,37 @@ storiesOf('Flex', module)
   })(() => (
     <ViewCheckbox>
       <Flex
-        alignItems={select('Align Items', ['', 'flex-start', 'center', 'flex-end', 'baseline', 'stretch'], 'stretch')}
-        alignContent={select('Align Content', ['', 'flex-start', 'center', 'flex-end', 'stretch', 'space-between', 'space-around'], 'stretch')}
+        alignItems={select('Align Items', [
+          '',
+          'flex-start',
+          'center',
+          'flex-end',
+          'baseline',
+          'stretch',
+        ], 'stretch')}
+        alignContent={select('Align Content', [
+          '',
+          'flex-start',
+          'center',
+          'flex-end',
+          'stretch',
+          'space-between',
+          'space-around',
+        ], 'center')}
         flexDirection={select('Flex Direction', ['row', 'row-reverse', 'column', 'column-reverse'], 'row')}
         flexWrap={select('Flex Wrap', ['nowrap', 'wrap', 'wrap-reverse'], 'wrap')}
         height={text('Height')}
-        justifyContent={select('Justify Content', ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'], 'flex-start')}
+        justifyContent={select('Justify Content', [
+          'flex-start',
+          'center',
+          'flex-end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+        ], 'flex-start')}
         p={text('Padding')}
         m={text('Margin')}
-        minHeight={text('Min Height')}
+        minHeight={text('Min Height', '300px')}
         width={text('Width')}
       >
         <Box bg="#f04" p={10} textAlign="center" width="40%">Box 40%</Box>