Creating themed components based on styled.div

Button.jsx

import { darken, getLuminance } from 'polished';
import styled, { css } from 'styled-components';

const isDarkColor = color => getLuminance(color) <= .5;

const Button = styled.button`
  background: white;
  border: 1px solid black;
  color: black;
  cursor: pointer;
  display: inline-block;
  border-radius: 5px;
  font-size: 1em;
  margin: .1em;
  padding: 0.5em 1.25em;

  &:hover {
    background: lightgray;
  }

  &:active {
    background: gray;
    color: white
  }

  ${props => props.size === 'sm' && css`
    border-radius: 3px;
    font-size: .9em;
    padding: 0.25em 1em;
  `}

  ${props => props.size === 'lg' && css`
    border-radius: 8px;
    font-size: 1.1em;
    padding: .75em 1.5em;
  `}

  ${['primary', 'success', 'info', 'warning', 'danger'].map(color => (
    props => props[color] && css`
      background: ${props.outlined ? 'white' : props.theme[color]};
      border-color: ${props.theme[color]};
      color: ${props.outlined ? props.theme[color] : isDarkColor(props.theme[color]) ? 'white' : 'black'};

      &:hover {
        border-color: ${props.outlined ? props.theme[color] : darken(.1, props.theme[color])};
        background: ${props.outlined ? props.theme[color] : darken(.1, props.theme[color])};
        color: ${isDarkColor(props.theme[color]) ? 'white' : 'black'};
      }

      &:active, &.active {
        border-color: ${props.outlined ? darken(.1, props.theme[color]) : darken(.2, props.theme[color])};
        background: ${props.outlined ? darken(.1, props.theme[color]) : darken(.2, props.theme[color])};
        color: ${isDarkColor(props.theme[color]) ? 'white' : 'black'};
      }
    `
  ))}
`;

export default Button;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import Button from './components/Button';
import reportWebVitals from './reportWebVitals';
import './index.css';

const theme = {
  primary: '#7552cc',
  success: '#279b37',
  info: '#00bce4',
  warning: '#ffc845',
  danger: '#eb2226',
};

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <div style={{ width: '100%' }}>
        <Button primary size="sm">Primary</Button>
        <Button success size="sm">Success</Button>
        <Button info size="sm">Info</Button>
        <Button warning size="sm">Warning</Button>
        <Button danger size="sm">Danger</Button>
      </div>
      <div style={{ width: '100%' }}>
        <Button primary outlined size="sm">Primary</Button>
        <Button success outlined size="sm">Success</Button>
        <Button info outlined size="sm">Info</Button>
        <Button warning outlined size="sm">Warning</Button>
        <Button danger outlined size="sm">Danger</Button>
      </div>
      <div style={{ width: '100%' }}>
        <Button primary>Primary</Button>
        <Button success>Success</Button>
        <Button info>Info</Button>
        <Button warning>Warning</Button>
        <Button danger>Danger</Button>
      </div>
      <div style={{ width: '100%' }}>
        <Button primary outlined>Primary</Button>
        <Button success outlined>Success</Button>
        <Button info outlined>Info</Button>
        <Button warning outlined>Warning</Button>
        <Button danger outlined>Danger</Button>
      </div>
      <div style={{ width: '100%' }}>
        <Button primary size="lg">Primary</Button>
        <Button success size="lg">Success</Button>
        <Button info size="lg">Info</Button>
        <Button warning size="lg">Warning</Button>
        <Button danger size="lg">Danger</Button>
      </div>
      <div style={{ width: '100%' }}>
        <Button primary outlined size="lg">Primary</Button>
        <Button success outlined size="lg">Success</Button>
        <Button info outlined size="lg">Info</Button>
        <Button warning outlined size="lg">Warning</Button>
        <Button danger outlined size="lg">Danger</Button>
      </div>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();