Styled Component with Carbon Design System Reference

styles.js

//https://www.carbondesignsystem.com/components/button/code

import styled from 'styled-components'

const COLORS = {
  primary: '#fff',
  secondary: '#3d70b2',
  tertiary: '#5a6872',
  ghost: '#3d70b2',
  danger: '#e0182d',
}

const BACKGROUNDCOLORS = {
  primary: COLORS.secondary,
  secondary: 'transparent',
  tertiary: 'transparent',
  ghost: 'transparent',
  danger: 'transparent',
}

const BACKGROUNDCOLOR_HOVER = {
  primary: '#30588c',
  secondary: COLORS.secondary,
  tertiary: COLORS.tertiary,
  ghost: COLORS.secondary,
  danger: COLORS.danger,
}

const BORDERS = {
  primary: 'transparent',
  secondary: COLORS.secondary,
  tertiary: COLORS.tertiary,
  ghost: 'transparent',
  danger: COLORS.danger
}

const OUTLINE = {
  primary: '#30588c',
  secondary: COLORS.secondary,
  tertiary: COLORS.tertiary,
  ghost: COLORS.ghost,
  danger: COLORS.danger,
}

export const SButton = styled.button`
  cursor: pointer;
  margin: .5rem;
  font-family: 'Roboto', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  padding: 0 1rem;
  height: 2.5rem;
  outline: none;

  border: ${props => `2px solid ${BORDERS[props.state]}`};
  background-color: ${props => BACKGROUNDCOLORS[props.state]};
  color: ${props => COLORS[props.state]};

  :hover {
    background-color: ${props => BACKGROUNDCOLOR_HOVER[props.state]};
    color: #fff;
    transition: background-color .3s;
  }

  :focus {
    border: 2px solid #f4f7fb;
    outline: ${props => `2px solid ${OUTLINE[props.state]}`}
  }

  :disabled {
    opacity: .5;
    cursor: not-allowed;

    background-color: ${props => BACKGROUNDCOLORS[props.state]};
    border: ${props => `2px solid ${BORDERS[props.state]}`};
    color: ${props => COLORS[props.state]};
  }
`