Styled Components Button for React

Button.jsx

import React from "react";
import { string } from "prop-types";
import styled from "styled-components";

const Button = styled.button`
  cursor: pointer;
  font-weight: 600;
  border-radius: 4px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  vertical-align: bottom;
  transition: 0.2s;
  cursor: pointer;
  ${textTransform}
  ${color}
  ${size}
  ${pointer}
`;

Button.propTypes = {
  className: string,
  type: string
};

Button.defaultProps = {
  className: undefined,
  type: "button"
};

export default Button;

function color({ disabled, secondary, flat, outline, outlined, link, neutral, theme }) {
  const color = disabled
    ? theme.disabled
    : neutral 
    ? theme.neutral
    : secondary
    ? theme.secondary
    : theme.primary;
  const colorContrast = disabled
    ? theme.disabledContrast
    : neutral 
    ? theme.neutralContrast
    : link
    ? theme.link
    : secondary
    ? theme.primaryContrast
    : theme.secondaryContrast;
  const colorHover = disabled
    ? theme.disabled
    : neutral 
    ? theme.neutral75
    : secondary
    ? theme.secondary75
    : theme.primary75;

  if (link) {
    return linkColors(color, colorContrast, colorHover);
  }

  if (flat) {
    return flatColors(color, colorContrast, colorHover);
  }

  if (outline || outlined) {
    return outlineColors(color, colorContrast, colorHover);
  }

  return filledColors(color, colorContrast, colorHover);
}

function flatColors(color) {
  return `
    border: 0;
    color: ${color};
    svg {
      fill: ${color};
      stroke: ${color};
    }
    background-color: transparent;
  `;
}

function outlineColors(color, colorContrast, colorHover) {
  return `
    border: 1px solid ${color};
    color: ${color};
    svg {
      fill: ${color};
      stroke: ${color};
    }

    background-color: transparent;
    
    &:hover { 
      border-color: ${colorHover};
    }
  `;
}

function filledColors(color, colorContrast, colorHover) {
  return `
  border: 2px solid ${color};
  background-color: ${color};
  color: ${colorContrast};
  svg {
    fill: ${colorContrast};
    stroke: ${colorContrast};
  }

  &:hover {
    border-color: transparent;
    background-color: ${colorHover};
  }
  `;
}

function linkColors(color, colorContrast) {
  return `
    border: 0;
    background-color: transparent;
    color: ${colorContrast};
    svg {
      fill: ${colorContrast};
      stroke: ${colorContrast};
    }
  `;
}

function textTransform({ link }) {
  if (link) {
    return "&:hover { text-decoration: underline; }";
  }
  return "text-transform: uppercase;";
}

function size({ small }) {
  return `padding: ${small ? "0.4rem 0.7rem;" : "0.8rem 1.4rem;"}`;
}

function pointer({ disabled }) {
  return disabled ? "cursor: unset;" : "";
}

theme.json

{
  "primary": "#1a73e8",
  "primary75": "#1a73e8BF",
  "primary50": "#1a73e880",
  "primary25": "#1a73e840",
  "primaryContrast": "white",

  "secondary": "#34A753",
  "secondary75": "#34A753BF",
  "secondary50": "#34A75380",
  "secondary25": "#34A75340",
  "secondaryContrast": "white",

  "neutral": "#494949",
  "neutral75": "#494949BF",
  "neutral50": "#49494980",
  "neutral25": "#49494940",
  "neutralContrast": "white",

  "disabled": "#F0F0F0",
  "disabledContrast": "#666",

  "error": "#FCC",
  "errorContrast": "#D00",

  "link": "#0047b8",

  "separator": "#D4D4D4",
  
  "table": {
    "head": {
      "background": "#F0F0F0",
      "backgroundContrast": "#666"
    },

    "background": "#FFF",
    "backgroundOdd": "#FAFAFA"
  }
}