import { createMuiTheme, Theme } from '@material-ui/core/styles' import { orange } from '@material-ui/core/colors' // Overwriting default components styles const componentsOverrides = (theme: Theme) => ({ MuiButton: { root: { borderRadius: 0, }, textSizeLarge: { padding: theme.spacing(2), }, containedSizeLarge: { padding: theme.spacing(2), }, contained: { backgroundColor: 'white', boxShadow: 'none', '& svg': { stroke: theme.palette.primary.main, transition: '0.1s', }, '&:hover': { backgroundColor: theme.palette.primary.main, color: 'white', boxShadow: 'none', // https://github.com/mui-org/material-ui/issues/22543 '@media (hover: none)': { backgroundColor: theme.palette.primary.main, color: 'white', boxShadow: 'none', }, '& svg': { stroke: '#fff', transition: '0.1s', }, }, '&:active': { backgroundColor: theme.palette.primary.main, color: 'white', boxShadow: 'none', '& svg': { stroke: '#fff', transition: '0.1s', }, }, '&:focus': { backgroundColor: 'white', color: theme.palette.text.primary, boxShadow: 'none', '& svg': { stroke: theme.palette.primary.main, transition: '0.1s', }, }, }, }, MuiIconButton: { root: { backgroundColor: 'white', boxShadow: 'none', '&:hover': { backgroundColor: theme.palette.primary.main, color: 'white', boxShadow: 'none', // https://github.com/mui-org/material-ui/issues/22543 '@media (hover: none)': { backgroundColor: theme.palette.primary.main, color: 'white', boxShadow: 'none', }, }, '&:focus': { backgroundColor: theme.palette.primary.main, color: 'white', boxShadow: 'none', }, '&:active': { backgroundColor: theme.palette.primary.main, color: 'white', boxShadow: 'none', }, }, }, MuiTab: { root: { backgroundColor: 'white', borderLeft: `4px solid ${theme.palette.background.default}`, borderRight: `4px solid ${theme.palette.background.default}`, opacity: 1, color: `${theme.palette.text.primary} !important`, '&:hover': {}, '&$selected': { fontWeight: theme.typography.fontWeightMedium, }, '&:focus': { color: theme.palette.secondary, }, }, }, MuiTabs: { root: { backgroundColor: 'white', borderBottom: 'none', }, indicator: { backgroundColor: theme.palette.primary.main, paddingLeft: 4, paddingRight: 4, }, }, MuiTooltip: { tooltip: { backgroundColor: '#242424', padding: theme.spacing(2), fontSize: theme.typography.body2.fontSize, fontStyle: 'italic', maxWidth: '100%', }, arrow: { color: '#242424', }, }, MuiInputBase: { root: { padding: theme.spacing(2), margin: 0, '&:hover': { backgroundColor: theme.palette.primary.main, fontStyle: 'white' }, }, multiline: { padding: theme.spacing(2), margin: 0, '&:hover': { color: 'white', backgroundColor: `${theme.palette.primary.main} !important`, fontStyle: 'white' }, }, focused: { color: 'white', backgroundColor: `${theme.palette.primary.main} !important`, }, }, }) const propsOverrides = { MuiButtonBase: { disableRipple: true, }, } export const theme = createMuiTheme({ palette: { type: 'light', background: { default: '#efefef', }, primary: { light: orange.A200, main: '#dd7200', dark: orange[800], }, secondary: { main: '#242424', }, text: { primary: '#242424', secondary: '#999999', }, }, typography: { button: { fontFamily: '"IBM Plex Mono", monospace', fontWeight: 500, fontStretch: 'normal', fontStyle: 'normal', color: '#242424', }, caption: { fontFamily: '"IBM Plex Mono", monospace', fontWeight: 500, fontSize: '1rem', fontStretch: 'normal', fontStyle: 'normal', }, body1: { color: '#242424', }, body2: { color: '#999999', fontWeight: 400, }, subtitle1: { color: '#242424', }, subtitle2: { color: '#999999', fontWeight: 400, }, fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','), }, }) theme.overrides = componentsOverrides(theme) theme.props = propsOverrides