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

  return {
    style: {
      display: "flex",
      flexWrap: "wrap",
      paddingLeft: "0",
      marginBottom: "0",
      listStyle: "none",
      borderBottom: `1px solid ${Color(colors.gray_900)
        .alpha(0.2)
        .string()}`
    },
    label: { fontSize: `${fonts.size.normal}rem` },
    indicator: {
      backgroundColor: colors.primary,
      height: tab.indicatorHeight
    },
    tabRoot: {
      textTransform: "initial",
      minWidth: 72,
      fontFamily: fonts.family,
      fontWeight: fonts.weight.bold,
      borderBottomWidth: `${tab.indicatorHeight}px`,
      borderBottomStyle: "solid",
      borderBottomColor: "transparent",
      "&:hover": {
        borderColor: Color(colors.gray_900)
          .alpha(0.2)
          .string()
      },
      "&:focus": {
        outline: "none"
      }
    }
  };
}