Styled Components (styled-components)

styled-components.jsx

import React, { Component } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { modularScale } from 'polished';

const BASE = '#DBECF3';
const BRAND = '#062E40';
const BRAND_ALT = '#34A5B6';
const ATTENTION = '#F94253';

const UNIT = 1;

const HALF = `${UNIT / 2}rem`;
const ONE = `${UNIT}rem`;
const TWO = `${UNIT * 2}rem`;
const FOUR = `${UNIT * 4}rem`;

const color = (props) => {
  if (props.primary) return BRAND;
  if (props.secondary) return BRAND_ALT;
  if (props.danger) return ATTENTION;
  return BASE
}

const Button = styled.button`
  background: ${props => color(props)};
  padding: ${ONE};
  font-size: ${TWO};
  filter: invert(${props => props.invert ? '100' : '0'}%);
  border: 0;
  border-radius: ${HALF};
  font-family: ${props => props.theme.font};
  &:hover {
    background: currentColor;
  }
`;

const Link = Button.withComponent('a');

const Logo = styled(({className}) => (
  <img className={className} src="http://www.esajuhana.com/img/logo.png" alt="Esa Juhana" />
))`
  width: ${FOUR};
  display: block
`;

const Header = styled(({className, children}) => (
  <header className={className}>
    <a href="/" title="Home">
      <Logo />
    </a>
    {children}
  </header>
))`
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: ${BRAND};
  color: ${BASE};
  padding: ${ONE};
`;

const Footer = styled(({className, children}) => (
  <footer className={className}>
    {children}
  </footer>
))`
  justify-content: space-between;
  background: ${BRAND};
  color: ${BASE};
  padding: ${ONE};
  text-align: center;
  margin-top: auto;
`;

const PageContent = styled(({className, children}) => (
  <section className={className}>
    {children}
  </section>
))`
  margin: 1rem
`;

const AppContent = styled(({className, children}) => (
  <div className={className}>
    <Header>@Thevangelist</Header>
    <PageContent>
      {children}
    </PageContent>
    <Footer>
      <p>Copyright 2017 &copy; - @thevangelist</p>
    </Footer>    
  </div>
))`
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: ${BRAND}
`;

const H1 = styled.h1`font-size: ${modularScale(6, 0.5)}`;
const H2 = styled.h2`font-size: ${modularScale(5, 0.5)}`;
const H3 = styled.h3`font-size: ${modularScale(4, 0.5)}`;
const H4 = styled.h4`font-size: ${modularScale(3, 0.5)}`;
const H5 = styled.h5`font-size: ${modularScale(2, 0.5)}`;
const H6 = styled.h6`font-size: ${modularScale(1, 0.5)}`;

// We're passing a default theme for Buttons that aren't wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    font: 'sans-serif'
  }
}

// Define what props.theme will look like
const theme = {
  font: 'serif'
};

class App extends Component {
  render() {
    return (
      <AppContent>
        <H1>Trying out Styled-Components</H1>
        <H2>Inventing new ways to style everything</H2>
        <Button>Normal</Button>
        <Button invert>Invert</Button>
        <Button primary>Primary</Button>
        <Button primary invert>Primary</Button>
        <Button secondary>Secondary</Button>
        <Button secondary invert>Secondary</Button>
        <Button danger>Danger</Button>
        <Button danger invert>Danger</Button>
        <ThemeProvider theme={theme}>
          <Button>Normal</Button>
        </ThemeProvider>
        <Link>Link Button</Link>
        <Link invert>Link Button</Link>
      </AppContent>
    );
  }
}

export default App;