Material-UI Create Color Styles

output.js

const output = {
  textError: {
    color: "#b00020",
    "&:hover": {
      backgroundColor: "rgba(176, 0, 32, 0.04)",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  textWarning: {
    color: "#cc6600",
    "&:hover": {
      backgroundColor: "rgba(204, 102, 0, 0.04)",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  textInfo: {
    color: "#1976d0",
    "&:hover": {
      backgroundColor: "rgba(25, 118, 208, 0.04)",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  textSuccess: {
    color: "#009933",
    "&:hover": {
      backgroundColor: "rgba(0, 153, 51, 0.04)",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  outlinedError: {
    color: "#b00020",
    border: "1px solid",
    borderColor: "rgba(176, 0, 32, 0.5)",
    "&:hover": {
      backgroundColor: "rgba(176, 0, 32, 0.04)",
      border: "1px solid",
      borderColor: "#b00020",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  outlinedWarning: {
    color: "#cc6600",
    border: "1px solid",
    borderColor: "rgba(204, 102, 0, 0.5)",
    "&:hover": {
      backgroundColor: "rgba(204, 102, 0, 0.04)",
      border: "1px solid",
      borderColor: "#cc6600",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  outlinedInfo: {
    color: "#1976d0",
    border: "1px solid",
    borderColor: "rgba(25, 118, 208, 0.5)",
    "&:hover": {
      backgroundColor: "rgba(25, 118, 208, 0.04)",
      border: "1px solid",
      borderColor: "#1976d0",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  outlinedSuccess: {
    color: "#009933",
    border: "1px solid",
    borderColor: "rgba(0, 153, 51, 0.5)",
    "&:hover": {
      backgroundColor: "rgba(0, 153, 51, 0.04)",
      border: "1px solid",
      borderColor: "#009933",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  containedError: {
    color: "#fff",
    backgroundColor: "#b00020",
    "&:hover": {
      backgroundColor: "rgb(123, 0, 22)",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  containedWarning: {
    color: "#fff",
    backgroundColor: "#cc6600",
    "&:hover": {
      backgroundColor: "rgb(142, 71, 0)",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  containedInfo: {
    color: "#fff",
    backgroundColor: "#1976d0",
    "&:hover": {
      backgroundColor: "rgb(17, 82, 145)",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
  containedSuccess: {
    color: "#fff",
    backgroundColor: "#009933",
    "&:hover": {
      backgroundColor: "rgb(0, 107, 35)",
      "@media (hover: none)": { backgroundColor: "transparent" },
    },
  },
};

usage.js

import { fade, makeStyles } from "@material-ui/core/styles";
import { equals, mergeAll } from "ramda";

const variants = ["text", "outlined", "contained"];
const colors = ["error", "warning", "info", "success"];

const isOutlined = equals(variants[1]);
const isContained = equals(variants[2]);

function template(variant, color, theme) {
  return mergeAll([
    {
      color: theme.palette[color].main,
    },
    isContained(variant) && {
      color: theme.palette[color].contrastText,
      backgroundColor: theme.palette[color].main,
    },
    isOutlined(variant) && {
      border: "1px solid",
      borderColor: fade(theme.palette[color].main, 0.5),
    },
    {
      "&:hover": mergeAll([
        {
          backgroundColor: fade(
            theme.palette[color].main,
            theme.palette.action.hoverOpacity
          ),
        },
        isContained(variant) && {
          backgroundColor: theme.palette[color].dark,
        },
        isOutlined(variant) && {
          border: "1px solid",
          borderColor: theme.palette[color].main,
        },
        {
          // reset on touch devices
          "@media (hover: none)": {
            backgroundColor: "transparent",
          },
        },
      ]),
    },
  ]);
}

const useStyles = makeStyles(theme => ({
  ...createColorStyles(colors, variants, template, theme),
  /* other stylesheets */
}));

utility.js

import { map, mergeAll, replace, toUpper, xprod } from "ramda";

const capitalize = replace(/^./, toUpper);

const name = (variant, color) => `${variant}${capitalize(color)}`;

const createColorStyles = (colors, variants, template, theme) =>
  mergeAll(
    map(
      ([variant, color]) => ({
        [name(variant, color)]: template(variant, color, theme),
      }),
      xprod(variants, colors)
    )
  );

export default createColorStyles;