src/theme-mui.js
File `theme-mui.js` has 419 lines of code (exceeds 250 allowed). Consider refactoring./* eslint-disable sort-keys */import createBreakpoints from '@material-ui/core/styles/createBreakpoints';import deepmerge from '@material-ui/utils/deepmerge';import spectrum from './theme-spectrum'; // Colors - Primaryconst DARK_BLUE = '#0F1D2F';const TEAL = '#004364';const LIGHT_BLUE = '#0D99C6';const LIGHT_BLUE_2 = '#5FCAF9';const MEDIUM_BLUE = '#0A75AD';const YELLOW = '#FFE06D';const WHITE = '#FEFEFE'; // Colors - Secondaryconst DARK_GRAY = '#6D6E74';const NEW_GRAY = '#F5F5F5';const RED = '#D20E0E'; // Colors - Greyconst GREY100 = '#F4F4F4'; // default = #f5f5f5const GREY200 = '#E9E9E9'; // default = #eeeeeeconst GREY300 = '#D8D8D8'; // default = #e0e0e0const GREY900 = '#242424'; // default = #212121 /* * Colors - Unused in theme for now * const LIGHT_GRAY = '#F2F2F2'; * const PURPLE = '#551A8B'; */ const breakpoints = createBreakpoints({}); const defaultButtonSettings = { backgroundColor: MEDIUM_BLUE, color: WHITE, '&$disabled': { backgroundColor: MEDIUM_BLUE, color: WHITE, opacity: '0.50', }, '&:hover': { backgroundColor: MEDIUM_BLUE, opacity: '0.92', }, '&:focus': { backgroundColor: MEDIUM_BLUE, opacity: '0.76', }, '&:active': { backgroundColor: MEDIUM_BLUE, opacity: '0.68', },}; // themeSettings - modify Material-UI baseline themeconst themeSettings = { overrides: { MuiAccordion: { root: { padding: 0, }, }, MuiAccordionSummary: { root: { minHeight: 32, padding: 0, }, }, MuiButton: { root: { borderRadius: 24, height: 48, [breakpoints.down('sm')]: { height: 42, }, ...defaultButtonSettings, }, label: { fontWeight: 700, marginLeft: 12, marginRight: 12, minWidth: 128, paddingLeft: 12, paddingRight: 12, textTransform: 'none', whiteSpace: 'nowrap', }, outlined: { backgroundColor: 'transparent', borderColor: WHITE, color: WHITE, '&$disabled': { backgroundColor: 'transparent', borderColor: WHITE, color: WHITE, opacity: '0.50', }, '&:hover': { backgroundColor: 'transparent', color: WHITE, opacity: '0.92', }, '&:focus': { backgroundColor: 'transparent', color: WHITE, opacity: '0.76', }, '&:active': { backgroundColor: 'transparent', color: WHITE, opacity: '0.68', }, }, textPrimary: { ...defaultButtonSettings, }, textSecondary: { backgroundColor: WHITE, color: DARK_BLUE, '&$disabled': { backgroundColor: WHITE, color: DARK_BLUE, opacity: '0.50', }, '&:hover': { backgroundColor: WHITE, color: DARK_BLUE, opacity: '0.92', }, '&:focus': { backgroundColor: WHITE, color: DARK_BLUE, opacity: '0.76', }, '&:active': { backgroundColor: WHITE, color: DARK_BLUE, opacity: '0.68', }, }, }, MuiCardActionArea: { root: { display: 'flex', width: 'auto', }, }, MuiCardContent: { root: { padding: 0, '&:last-child': { paddingBottom: 0, }, }, }, MuiChip: { root: { borderRadius: 24, cursor: 'pointer', height: 48, [breakpoints.down('sm')]: { height: 42, }, margin: '0 8px 8px 0', }, }, MuiCheckbox: { root: { color: DARK_GRAY, '&:hover': { backgroundColor: 'transparent !important', }, }, }, MuiCssBaseline: { '@global': { body: { fontStyle: 'normal', fontWeight: 400, margin: 0, }, }, }, MuiDialogActions: { root: { display: 'flex', justifyContent: 'center', }, }, MuiInputLabel: { root: { color: DARK_GRAY, }, formControl: { color: DARK_GRAY, }, }, MuiListItem: { root: { padding: 0, }, }, MuiPaper: { root: { padding: 16, }, }, MuiRadio: { root: { color: DARK_BLUE, }, colorSecondary: { '&$checked': { color: DARK_BLUE, }, }, }, MuiOutlinedInput: { root: { backgroundColor: WHITE, }, }, MuiTextField: { root: { width: '100%', }, }, MuiTooltip: { tooltip: { backgroundColor: DARK_BLUE, color: WHITE, fontSize: '1rem', fontStyle: 'italic', }, }, MuiTypography: { root: { '& a': { color: `${MEDIUM_BLUE} !important`, cursor: 'pointer', fontWeight: 700, textDecoration: 'underline', }, '& a:link': { color: `${MEDIUM_BLUE} !important`, }, '& a:visited': { color: `${MEDIUM_BLUE} !important`, }, '& a:active': { color: `${LIGHT_BLUE_2} !important`, }, '& a:hover': { color: `${LIGHT_BLUE_2} !important`, }, }, colorPrimary: { color: DARK_BLUE, }, colorSecondary: { color: LIGHT_BLUE, }, colorTextPrimary: { color: YELLOW, }, colorTextSecondary: { color: WHITE, }, }, }, props: { MuiButtonBase: { disableRipple: true, }, MuiCard: { elevation: 0, }, MuiContainer: { maxWidth: 'lg', }, MuiInputAdornment: { disableTypography: true, // this changes startAdornment text color to primary }, MuiPaper: { elevation: 0, }, MuiTextField: { variant: 'outlined', }, }, palette: { primary: { main: DARK_BLUE, }, secondary: { light: LIGHT_BLUE_2, main: LIGHT_BLUE, dark: TEAL, }, error: { main: RED, }, warning: { main: YELLOW, }, info: { main: LIGHT_BLUE, }, grey: { 100: GREY100, 200: GREY200, 300: GREY300, 900: GREY900, }, text: { primary: DARK_BLUE, secondary: WHITE, disabled: DARK_GRAY, }, background: { default: WHITE, }, spectrum: { ...spectrum }, }, typography: { fontFamily: 'Work Sans, sans-serif', fontSize: 16, h1: { color: DARK_BLUE, fontSize: '3rem', fontWeight: 700, lineHeight: 1.25, }, h2: { color: DARK_BLUE, fontSize: '2.5rem', fontWeight: 700, lineHeight: 1.25, }, h3: { color: DARK_BLUE, fontSize: '2rem', fontWeight: 700, lineHeight: 1.25, }, h4: { color: DARK_BLUE, fontSize: '1.75rem', fontWeight: 700, lineHeight: 1.25, }, h5: { color: DARK_BLUE, fontSize: '1.5rem', fontWeight: 700, lineHeight: 1.25, }, h6: { color: DARK_BLUE, fontSize: '1.25rem', fontWeight: 700, lineHeight: 1.25, }, body1: { // paragraph color: DARK_BLUE, fontSize: '1rem', fontWeight: 400, lineHeight: 1.35, }, body2: { color: DARK_GRAY, fontSize: '1rem', fontWeight: 700, lineHeight: 1.35, }, button: { // unused color: DARK_BLUE, fontWeight: 400, }, caption: { color: DARK_BLUE, fontSize: '0.875rem', fontWeight: 400, lineHeight: 1.35, }, overline: { // unused color: DARK_BLUE, fontWeight: 400, }, subtitle1: { // unused color: DARK_BLUE, fontWeight: 400, }, subtitle2: { // unused color: DARK_BLUE, fontWeight: 400, }, },}; // customThemeSettings - extend Material-UI themingconst customThemeSettings = { button: { blue: LIGHT_BLUE_2, borderRadius: 24, }, font: { paragraph: { fontSize: '1rem', }, small: { fontSize: 'clamp(14px, 0.875rem, 0.875rem)', }, }, palette: { background: { primary: TEAL, secondary: NEW_GRAY, dark: DARK_BLUE, }, outline: { gray: DARK_GRAY, }, text: { bright: YELLOW, dark: DARK_BLUE, light: LIGHT_BLUE_2, }, }, typography: { secondFontFamily: { fontFamily: 'Source Code Pro, monospace', }, },}; const theme = deepmerge(themeSettings, customThemeSettings); export default theme;