@eureca/eureca-ui/src/theme/mui.js

UI component library of Eureca's user and admin apps

import { createMuiTheme } from '@material-ui/core/styles';

import { colors } from './colors';

const breakpoints = {
  values: {
    xs: 0,
    sm: 768,
    md: 960,
    lg: 1280,
    xl: 1920,
  },
};

const palette = {
  error: {
    main: colors.error1,
    contrastText: colors.white,
  },
  primary: {
    light: colors.green3,
    main: colors.green1,
    dark: colors.green2,
    contrastText: colors.white,
  },
  text: {
    primary: colors.gray2,
  },
};

const typography = {
  htmlFontSize: 16,
  fontSize: 14,
  h1: { fontSize: '1.875rem', lineHeight: 3, fontWeight: 500 },
  h2: { fontSize: '1.75rem', lineHeight: 38 / 28, fontWeight: 300 },
  h3: { fontSize: '1.375rem', lineHeight: 28 / 22 },
  h4: { fontSize: '1.125rem', lineHeight: 1.5, fontWeight: 500 },
  h5: { fontSize: '.875rem', lineHeight: 18 / 14, fontWeight: 700 },
  h6: { fontSize: '1rem', lineHeight: 1, fontWeight: 300 },
  body1: { fontSize: '.875rem' },
  body2: { fontSize: '.75rem', lineHeight: 18 / 16, fontWeight: 300 },
  subtitle1: { fontSize: '1.125rem', lineHeight: 1, fontWeight: 500 },
  subtitle2: { fontSize: '.875rem', lineHeight: 20 / 16, fontWeight: 300 },
};

const overrides = {
  MuiLink: {
    root: {
      cursor: 'pointer',
    },
  },
};

const MuiTheme = createMuiTheme({
  breakpoints,
  palette,
  typography,
  overrides,
});

export default MuiTheme;