@ddsys/material/src/styles/alert.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, alert } = variables;

  return [
    { 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] = {
      display: "flex",
      border: "none",
      alignItems: "center",
      position: "relative",
      transition: "opacity 0.15s linear",
      padding: `${common.spacing * 0.75}rem ${common.spacing * 1.25}rem`,
      color: colors.gray_900,
      marginBottom: `${common.spacing}rem`,
      borderRadius: `${common.spacing * 0.25}rem`,
      borderLeft: `${alert.leftBorderWidth}px solid ${style.color}`,
      backgroundColor: Color(style.color)
        .alpha(0.35)
        .string(),
      "&:not($.show)": {
        opacity: 0
      }
    };
    return result;
  }, {});
}