import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme';
-import purple from '@material-ui/core/colors/purple';
import blue from '@material-ui/core/colors/blue';
import grey from '@material-ui/core/colors/grey';
import green from '@material-ui/core/colors/green';
import yellow from '@material-ui/core/colors/yellow';
import red from '@material-ui/core/colors/red';
+import teal from '@material-ui/core/colors/teal';
-interface ArvadosThemeOptions extends ThemeOptions {
+export interface ArvadosThemeOptions extends ThemeOptions {
customs: any;
}
export interface ArvadosTheme extends Theme {
- customs: any;
+ customs: {
+ colors: Colors
+ };
+}
+
+interface Colors {
+ green700: string;
+ yellow700: string;
+ red900: string;
+ blue500: string;
+ purple: string;
}
-// const red =
-const yellow700 = yellow["700"];
-const purple800 = purple["800"];
-const grey200 = grey["200"];
-const grey300 = grey["300"];
-const grey500 = grey["500"];
+const arvadosPurple = '#361336';
const grey600 = grey["600"];
const grey700 = grey["700"];
const grey900 = grey["900"];
-const themeOptions: ArvadosThemeOptions = {
+export const themeOptions: ArvadosThemeOptions = {
+ typography: {
+ useNextVariants: true,
+ },
customs: {
colors: {
- green700: green["700"]
+ green700: green["700"],
+ yellow700: yellow["700"],
+ red900: red['900'],
+ blue500: blue['500'],
+ purple: arvadosPurple
}
},
overrides: {
},
MuiAppBar: {
colorPrimary: {
- backgroundColor: purple800
+ backgroundColor: arvadosPurple
}
},
MuiTabs: {
color: grey600
},
indicator: {
- backgroundColor: purple800
+ backgroundColor: arvadosPurple
}
},
MuiTab: {
- selected: {
- fontWeight: 700,
- color: purple800
+ root: {
+ '&$selected': {
+ fontWeight: 700,
+ color: arvadosPurple
+ }
}
},
MuiList: {
root: {
fontSize: '1.25rem'
}
+ },
+ MuiCardHeader: {
+ avatar: {
+ display: 'flex',
+ alignItems: 'center'
+ },
+ title: {
+ color: grey700,
+ fontSize: '1.25rem'
+ }
+ },
+ MuiExpansionPanel: {
+ expanded: {
+ marginTop: '8px',
+ }
+ },
+ MuiExpansionPanelDetails: {
+ root: {
+ marginBottom: 0,
+ paddingBottom: '4px',
+ }
+ },
+ MuiExpansionPanelSummary: {
+ content: {
+ '&$expanded': {
+ margin: 0,
+ },
+ color: grey700,
+ fontSize: '1.25rem',
+ margin: 0,
+ },
+ expanded: {},
+ },
+ MuiMenuItem: {
+ root: {
+ padding: '8px 16px'
+ }
+ },
+ MuiInput: {
+ root: {
+ fontSize: '0.875rem'
+ },
+ underline: {
+ '&:after': {
+ borderBottomColor: arvadosPurple
+ },
+ '&:hover:not($disabled):not($focused):not($error):before': {
+ borderBottom: '1px solid inherit'
+ }
+ }
+ },
+ MuiFormLabel: {
+ root: {
+ fontSize: '0.875rem',
+ "&$focused": {
+ "&$focused:not($error)": {
+ color: arvadosPurple
+ }
+ }
+ }
+ },
+ MuiStepIcon: {
+ root: {
+ '&$active': {
+ color: arvadosPurple
+ },
+ '&$completed': {
+ color: 'inherited'
+ },
+ }
}
},
mixins: {
},
palette: {
primary: {
- main: '#06C',
- dark: blue.A100
+ main: teal.A700,
+ dark: teal.A400,
+ contrastText: '#fff'
}
- }
+ },
};
export const CustomTheme = createMuiTheme(themeOptions);
\ No newline at end of file