@ddsys/material/src/index.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";
import LightTheme from "./themes/light";
import DarkTheme from "./themes/dark";
import WarmTheme from "./themes/warm";

import generateStyles from "./base/styles";

const Themes = [LightTheme, DarkTheme, WarmTheme].map(theme => {
  const { colors } = theme;
  const styles = generateStyles(theme);
  return {
    themeName: theme.name,
    palette: {
      primary: { main: colors.primary },
      secondary: { main: colors.secondary }
    },
    typography: {
      title: { color: colors.dark },
      body1: { color: colors.dark },
      subheading: { color: colors.dark },
      caption: { color: colors.dark }
    },
    overrides: {
      MuiPaper: {
        root: {
          backgroundColor: colors.light
        }
      },
      MuiDialogContentText: {
        root: { color: colors.dark }
      },
      MuiDivider: {
        root: {
          backgroundColor: Color(colors.dark)
            .alpha(0.2)
            .string()
        }
      },
      MuiCheckbox: {
        checked: {
          color: `${colors.dark} !important`
        },
        root: {
          color: colors.dark
        }
      },
      MuiListItem: {
        button: {
          backgroundColor: colors.light,
          "&:hover": {
            backgroundColor: colors.selected_item_hover
          }
        }
      },
      MuiInput: {
        input: {
          backgroundColor: colors.light,
          color: colors.dark,
          border: `1px solid ${Color(colors.dark)
            .alpha(0.2)
            .string()}`,
          "&:focus": {
            color: colors.black
          }
        }
      },
      MuiSelect: {
        icon: { color: colors.dark }
      },
      MuiButton: {
        root: {
          color: Color(colors.dark)
            .alpha(0.87)
            .string()
        }
      },
      MuiCard: {
        root: {
          backgroundColor: colors.gray_100
        }
      }
    },
    styles: {
      ...styles
    },
    colors: {
      ...colors
    }
  };
});

export default Themes;