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

  return {
    style: {
      marginBottom: 0,
      fontSize: `${fonts.size.normal}rem`,
      borderBottom: `1px solid ${colors.gray_200}`,
      borderRadius: 5,
      maxWidth: popover.maxWidth
    },
    title: {
      padding: `${common.spacing * 0.5}rem ${common.spacing * 0.75}rem`,
      backgroundColor: Color(colors.light)
        .darken(0.05)
        .string(),
      color: colors.dark,
      fontWeight: fonts.weight.bold,
      lineHeight: `${fonts.size.normal * 1.2}rem`
    },
    body: {
      padding: `${common.spacing * 0.5}rem ${common.spacing * 0.75}rem`,
      backgroundColor: colors.light
    }
  };
}