Improved dark mode

src/Colors.stories.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Flex, Column } from './components/Structure'
+import { Text } from './components/Typography'
+import useTheme from './hooks/useTheme'
+import theme from './lib/theme'
+
+export default {
+  title: 'Colors',
+}
+
+const Color = ({ color }) => {
+  const bg = useTheme(`colors.${color}`)
+  return (
+    <Flex width="100px" height="100px" bg={bg} borderRadius="3px" m="10px" alignItems="center" justifyContent="center">
+      <Text>{bg}</Text>
+    </Flex>
+  )
+}
+
+const colors = Object.keys(theme.colors)
+
+
+export const Default = () => (
+  <Column>
+    {colors.map((color) => <Color color={color} key={color} />)}
+  </Column>
+)

src/components/Banner/stories.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Banner from '.'
-import Button from '../Button'
+import { Button } from '../Button'
 
 export default {
   title: 'Banner',

src/components/Button/Button.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Base } from './styled'
+import { Flex } from '../Structure'
+import Overlay from '../Overlay'
+import Loading from '../Loading'
+import { Text } from '../Typography'
+import useTheme from '../../hooks/useTheme'
+
+const ButtonComponent = ({
+  children,
+  LeftIcon,
+  RightIcon,
+  loading,
+  disabled,
+  large,
+  small,
+  error,
+  info,
+  warning,
+  success,
+  ...props
+}) => {
+  const variants = {
+    error,
+    info,
+    success,
+    warning,
+    large,
+    small,
+  }
+  const iconColor = useTheme('colors.icon_inverse', { ignoreTheme: true })
+  return (
+    <Base {...variants} {...props} disabled={loading || disabled}>
+      {loading && (
+        <Overlay>
+          <Loading white ignoreTheme />
+        </Overlay>
+      )}
+      {Boolean(LeftIcon) && (
+        <Flex mr={2}>
+          <LeftIcon color={iconColor} />
+        </Flex>
+      )}
+      <Text white ignoreTheme>
+        {children}
+      </Text>
+      {Boolean(RightIcon) && (
+        <Flex ml={2}>
+          <RightIcon color={iconColor} />
+        </Flex>
+      )}
+    </Base>
+  )
+}
+
+ButtonComponent.propTypes = {
+  children: PropTypes.bool,
+  LeftIcon: PropTypes.node,
+  RightIcon: PropTypes.node,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+  large: PropTypes.bool,
+  small: PropTypes.bool,
+  error: PropTypes.bool,
+  info: PropTypes.bool,
+  warning: PropTypes.bool,
+  success: PropTypes.bool,
+}
+
+export default ButtonComponent

src/components/Button/stories.js → src/components/Button/Button.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import { FiUser } from 'react-icons/fi'
-import Button from '.'
+import { Button } from "."
 
 export default {
   title: 'Button',

src/components/Button/ButtonIcon.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Base } from './styled'
+import Overlay from '../Overlay'
+import Loading from '../Loading'
+import useTheme from '../../hooks/useTheme'
+
+const ButtonIconComponent = ({
+  Icon,
+  loading,
+  disabled,
+  large,
+  small,
+  error,
+  info,
+  warning,
+  success,
+  ...props
+}) => {
+  const variants = {
+    error,
+    info,
+    success,
+    warning,
+    large,
+    small,
+  }
+
+  const iconColor = useTheme('colors.icon_inverse', { ignoreTheme: true })
+
+  return (
+    <Base {...variants} {...props} disabled={loading || disabled} circle>
+      {loading && (
+        <Overlay>
+          <Loading white ignoreTheme />
+        </Overlay>
+      )}
+      {Boolean(Icon) && (
+        <Icon color={iconColor} />
+      )}
+    </Base>
+  )
+}
+
+ButtonIconComponent.propTypes = {
+  Icon: PropTypes.node,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+  large: PropTypes.bool,
+  small: PropTypes.bool,
+  error: PropTypes.bool,
+  info: PropTypes.bool,
+  warning: PropTypes.bool,
+  success: PropTypes.bool,
+}
+
+export default ButtonIconComponent

src/components/Button/ButtonIcon.stories.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { FiUser } from 'react-icons/fi'
+import { ButtonIcon } from '.'
+
+export default {
+  title: 'ButtonIcon',
+}
+
+const props = {
+  onClick: action('onClick'),
+  Icon: FiUser,
+}
+
+export const Default = () => <ButtonIcon {...props}>ButtonIcon</ButtonIcon>
+
+export const Warning = () => <ButtonIcon {...props} warning>ButtonIcon</ButtonIcon>
+
+export const Error = () => <ButtonIcon {...props} error>ButtonIcon</ButtonIcon>
+
+export const Success = () => <ButtonIcon {...props} success>ButtonIcon</ButtonIcon>
+
+export const Info = () => <ButtonIcon {...props} info>ButtonIcon</ButtonIcon>
+
+export const Small = () => <ButtonIcon {...props} small>ButtonIcon</ButtonIcon>
+
+export const Large = () => <ButtonIcon {...props} large>ButtonIcon</ButtonIcon>
+
+export const LeftIcon = () => <ButtonIcon {...props}>ButtonIcon</ButtonIcon>
+
+export const RightIcon = () => <ButtonIcon {...props}>ButtonIcon</ButtonIcon>
+
+export const Loading = () => <ButtonIcon {...props} loading>ButtonIcon</ButtonIcon>
+
+export const LoadingSuccess = () => <ButtonIcon {...props} success loading>ButtonIcon</ButtonIcon>

src/components/Button/index.js

@@ -1,58 +1,2 @@
-import React from 'react'
-import { Base } from './styled'
-import { Flex } from '../Structure'
-import Overlay from '../Overlay'
-import Loading from '../Loading'
-import { Text } from '../Typography'
-import useTheme from '../../hooks/useTheme'
-
-const ButtonComponent = ({
-  children,
-  leftIcon: LeftIcon,
-  rightIcon: RightIcon,
-  loading,
-  disabled,
-  large,
-  small,
-  error,
-  info,
-  warning,
-  success,
-  ...props
-}) => {
-  const variants = {
-    error,
-    info,
-    success,
-    warning,
-    large,
-    small,
-  }
-  const iconColor = useTheme('colors.icon')
-  return (
-    <Base {...variants} {...props} disabled={loading || disabled}>
-      {loading && (
-        <Overlay>
-          <Loading ignoreTheme />
-        </Overlay>
-      )}
-      {Boolean(LeftIcon) && (
-        <Flex mr={2}>
-          <LeftIcon color={iconColor} />
-        </Flex>
-      )}
-      <Text white ignoreTheme>
-        {children}
-      </Text>
-      {Boolean(RightIcon) && (
-        <Flex ml={2}>
-          <RightIcon color={iconColor} />
-        </Flex>
-      )}
-    </Base>
-  )
-}
-
-ButtonComponent.propTypes = {}
-
-export default ButtonComponent
+export { default as Button } from './Button'
+export { default as ButtonIcon } from './ButtonIcon'

src/components/Button/styled.js

@@ -1,16 +1,18 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { theme, values } from '../../lib/mixins'
 
+const getHeight = values([
+  ['large', '50px'],
+  ['small', '25px'],
+  '42px',
+])
+
 export const Base = styled.button`
   ${theme('css.font')};
   ${theme('css.button')};
   ${theme('css.boxShadow')};
   font-weight: 500;
-  height: ${values([
-    ['large', '50px'],
-    ['small', '25px'],
-    '42px',
-  ])};
+  height: ${getHeight};
   padding: ${values([
     ['large', '0 30px'],
     ['small', '0 10px'],
@@ -35,6 +37,15 @@ export const Base = styled.button`
   overflow: hidden;
   text-align: center;
 
+  ${(props) => props.circle && css`
+    display: flex;
+    width: ${getHeight(props)};
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border-radius: 100%;
+  `}
+
   &:hover {
     transform: translate3d(0, -2px, 0);
     background: ${values([

src/components/Loading/index.js

@@ -1,13 +1,17 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { FiLoader } from 'react-icons/fi'
 import Spin from '../Spin'
 import useTheme from '../../hooks/useTheme'
 
-const LoadingComponent = (props) => {
-  const color = useTheme('colors.icon')
+const LoadingComponent = ({ ignoreTheme, white }) => {
+  const color = useTheme(white ? 'colors.icon_inverse' : 'colors.icon', { ignoreTheme })
   return <Spin><FiLoader color={color} /></Spin>
 }
 
-LoadingComponent.propTypes = {}
+LoadingComponent.propTypes = {
+  ignoreTheme: PropTypes.bool,
+  white: PropTypes.bool,
+}
 
 export default LoadingComponent

src/components/Structure/index.js

@@ -1,3 +1,5 @@
+import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
   space,
@@ -16,7 +18,7 @@ import {
   layout,
 } from 'styled-system'
 
-export const Flex = styled.div`
+export const StyledFlex = styled.div`
   ${space};
   ${color};
   ${width};
@@ -33,6 +35,12 @@ export const Flex = styled.div`
   ${layout};
 `
 
+export const Flex = ({ display, ...props }) => <StyledFlex {...props} display={display || 'flex'} />
+
+Flex.propTypes = {
+  display: PropTypes.any,
+}
+
 export const Row = styled(Flex)`
   display: flex;
   flex-direction: row;

src/components/Typography/index.js

@@ -111,10 +111,10 @@ export const Text = styled.p`
 
 export const Heading = styled((props) => <Text {...props} thin={false} medium={false} bold paragraph={false} />)`
   ${getFontSize('heading')};
-  color: #000;
+  color: ${theme('colors.text_title')};
 `
 
 export const Display = styled((props) => <Text {...props} thin={false} medium={false} bold paragraph={false} />)`
   ${getFontSize('display')};
-  color: #000;
+  color: ${theme('colors.text_title')};
 `

src/hooks/useTheme/index.js

@@ -1,11 +1,8 @@
-import { path } from 'rambda'
 import { useTheme as useStyledTheme } from 'styled-components'
+import { getValueFromTheme } from '../../lib/mixins'
 
-export default function useTheme(key) {
+export default function useTheme(key, options = {}) {
+  const { ignoreTheme } = options
   const theme = useStyledTheme()
-  if (path(key, theme)[theme.mode]) {
-    return path(key, theme)[theme.mode]
-  }
-
-  return path(key, theme)
+  return getValueFromTheme(key, { theme, ignoreTheme })
 }