Onepixel theme

theme.js

import { deepmerge } from '@material-ui/utils'
import { createMuiTheme } from '@material-ui/core/styles'
import grey from '@material-ui/core/colors/grey'

const basicBlue = '#0052cc' // Nathan's blue #0b24fb

const rawTheme = createMuiTheme({
  palette: {
    primary: {
      main: basicBlue,
      dark: '#002b9a',
    },
    secondary: {
      main: '#edf2ff',
      dark: '#dee7fd',
      contrastText: basicBlue,
    },
    error: {
      main: '#ff001f',
    },
    text: {
      primary: '#262626',
      secondary: grey[600],
      disabled: grey[500],
    },
    action: {
      active: grey[600],
      disabledBackground: 'rgba(0, 0, 0, 0.06)',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica Neue", "Arial", sans-serif',
    fontSize: 14,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    fontWeightBold: 700,
    useNextVariants: true,
  },
  shape: {
    borderRadius: 2,
  },
})

export const theme = deepmerge(rawTheme, {
  breakpoints: {
    values: {
      sm: 750,
      md: 950,
      lg: 1250,
    },
  },
  palette: {
    background: {
      default: rawTheme.palette.common.white,
      placeholder: grey[100],
    },
    success: {
      background: '#d6ffd3',
      text: '#389543',
    },
    warning: {
      background: '#fff2df',
      text: '#ca7700',
    },
    info: {
      background: rawTheme.palette.secondary.main,
      text: rawTheme.palette.primary.main,
    },
    error: {
      background: '#ffe7e7',
      text: rawTheme.palette.error.main,
    },
  },
  typography: {
    h1: {
      fontWeight: rawTheme.typography.fontWeightBold,
      fontSize: 42,
      lineHeight: 1.1,
      color: '#000',
      [rawTheme.breakpoints.down('xs')]: {
        fontSize: 26,
      },
    },
    h2: {
      fontWeight: rawTheme.typography.fontWeightMedium,
      fontSize: 28,
      color: '#000',
      [rawTheme.breakpoints.down('xs')]: {
        fontSize: 22,
      },
    },
    h3: {
      fontWeight: rawTheme.typography.fontWeightBold,
      fontSize: 22,
      [rawTheme.breakpoints.down('xs')]: {
        fontSize: 18,
      },
    },
    subtitle1: {
      fontWeight: rawTheme.typography.fontWeightMedium,
      fontSize: 15,
    },
    button: {
      fontSize: 16,
      lineHeight: 1.2,
    },
    caption: {
      fontSize: 11,
      color: rawTheme.palette.text.secondary,
    },
  },
  nprogress: {
    color: rawTheme.palette.primary.light,
  },
  props: {
    MuiTypography: {
      headlineMapping: {
        h1: 'h1',
        h2: 'h1',
        h3: 'h1',
        body1: 'p',
      },
    },
  },
})