@ddsys/material/src/styles/button.js

<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>

import Color from "color";

export default function(theme) {
  const { colors, variables } = theme;
  const { common, fonts } = variables;

  return [
    { name: "primary", color: colors.primary },
    { name: "secondary", color: colors.secondary },
    { name: "success", color: colors.success },
    { name: "info", color: colors.info },
    { name: "warning", color: colors.warning },
    { name: "danger", color: colors.danger }
  ].reduce(
    (result, style) => {
      result[style.name] = {
        backgroundColor: style.color,
        color: colors.white,
        "&:hover": {
          background: Color(style.color)
            .darken(common.darken)
            .hex()
        }
      };

      result[`${style.name}Outlined`] = {
        color: style.color,
        borderColor: style.color,
        backgroundColor: "transparent",
        backgroundImage: "none",
        border: `1px solid ${style.color}`,
        "&:hover": {
          backgroundColor: Color(style.color)
            .alpha(0.2)
            .string()
        },
        "&:focus": {
          boxShadow: `0 0 0 0.2rem  ${Color(style.color)
            .alpha(0.5)
            .string()}`,
          outline: "transparent"
        }
      };

      return result;
    },
    {
      style: {
        fontFamily: fonts.family,
        fontSize: `${fonts.h6}rem`,
        fontWeight: fonts.weight.bold,
        textTransform: "none",
        minHeight: "auto",
        "&[disabled]": {
          color: colors.gray_900,
          backgroundColor: Color(colors.gray_900)
            .alpha(0.3)
            .string(),
          borderColor: Color(colors.gray_900)
            .alpha(0.2)
            .string(),
          cursor: "not-allowed",
          opacity: ".3"
        }
      },
      groupedContainer: {
        position: "relative",
        display: "inline-flex",
        verticalAlign: "middle"
      },
      groupedButton: {
        "&:not(:last-child)": {
          borderTopRightRadius: 0,
          borderBottomRightRadius: 0
        },
        "&:not(:first-child)": {
          borderTopLeftRadius: 0,
          borderBottomLeftRadius: 0
        },
        "&:focus": {
          backgroundColor: Color(colors.gray_700)
            .alpha(0.4)
            .string(),
          boxShadow: "none !important",
          outline: "transparent"
        }
      },
      active: {
        backgroundColor: Color(colors.gray_700)
          .alpha(0.4)
          .string(),
        boxShadow: "none !important",
        outline: "transparent"
      },
      large: {
        fontSize: `${fonts.size.large}rem`,
        padding: `${common.spacing / 2}rem ${common.spacing}rem`
      },
      small: {
        fontSize: `${fonts.size.small}rem`,
        padding: `${common.spacing / 4}rem ${common.spacing / 2}rem`
      }
    }
  );
}