NEON Portal Material UI Theme

Theme.js

import 'typeface-source-sans-pro';

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

// Values defined here are based on the NEON Style Guide.
// See all customizable Material UI theme keys here:
// https://material-ui.com/customization/default-theme/#explore

const PALETTES = {
  PRIMARY: {
    light: '#4554a7',
    main: '#002c77',
    dark: '#00034a',
    contrastText: '#fff',
  },
  SECONDARY: {
    light: '#5da1ff',
    main: '#0073cf',
    dark: '#00489d',
    contrastText: '#fff',
  },
  ERROR: {
    light: '#ffa03e',
    main: '#e17000',
    dark: '#a84200',
    contrastText: '#000',
  },
  GREY: {
    50: '#f3f5f5',
    100: '#cccece',
    200: '#abadae',
    300: '#898c8d',
    400: '#6f7374',
    500: '#565a5c',
    600: '#4f5254',
    700: '#45484a',
    800: '#3c3f41',
    900: '#2b2e30',
    A100: '#bcbebe',
    A200: '#636768',
    A400: '#45484a',
    A700: '#343739',
  },
};

const baseTheme = createMuiTheme({
  palette: {
    background: {
      default: PALETTES.GREY[50],
    },
    primary: PALETTES.PRIMARY,
    secondary: PALETTES.SECONDARY,
    error: PALETTES.ERROR,
    grey: PALETTES.GREY,
  },
  typography: {
    fontFamily: '"Source Sans Pro",Helvetica,Arial,sans-serif',
    fontWeightLight: 200,
    fontWeightRegular: 400,
    fontWeightMedium: 600,
    fontWeightBold: 700,
    h1: {
      fontWeight: 200,
      fontSize: '4.125rem',
    },
    h2: {
      fontWeight: 200,
      fontSize: '3.5rem',
    },
    h3: {
      fontWeight: 400,
      fontSize: '2.75rem',
    },
    h4: {
      fontWeight: 400,
      fontSize: '2.125rem',
    },
    h5: {
      fontWeight: 600,
      fontSize: '1.5rem',
    },
    h6: {
      fontWeight: 700,
      fontSize: '1.15rem',
    },
  },
});

const theme = responsiveFontSizes(baseTheme);

export default theme;