-const purple800 = purple["800"];
-const grey600 = grey["600"];
-const themeOptions: ArvadosThemeOptions = {
- customs: {
- colors: {
- green700: green["700"]
- }
- },
- overrides: {
- MuiAppBar: {
- colorPrimary: {
- backgroundColor: purple800
- }
+interface Colors {
+ green700: string;
+ yellow100: string;
+ yellow700: string;
+ yellow900: string;
+ red100: string;
+ red900: string;
+ blue500: string;
+ grey500: string;
+ purple: string;
+ orange: string;
+}
+
+const arvadosPurple = '#361336';
+const grey500 = grey['500'];
+const grey600 = grey['600'];
+const grey700 = grey['700'];
+const grey900 = grey['900'];
+
+export const themeOptions: ArvadosThemeOptions = {
+ typography: {
+ useNextVariants: true,
+ },
+ customs: {
+ colors: {
+ green700: green['700'],
+ yellow100: yellow['100'],
+ yellow700: yellow['700'],
+ yellow900: yellow['900'],
+ red100: red['100'],
+ red900: red['900'],
+ blue500: blue['500'],
+ grey500: grey500,
+ purple: arvadosPurple,
+ orange: '#f0ad4e',
+ },
+ },
+ overrides: {
+ MuiTypography: {
+ body1: {
+ fontSize: '0.8125rem',
+ },
+ },
+ MuiAppBar: {
+ colorPrimary: {
+ backgroundColor: arvadosPurple,
+ },
+ },
+ MuiTabs: {
+ root: {
+ color: grey600,
+ },
+ indicator: {
+ backgroundColor: arvadosPurple,
+ },
+ },
+ MuiTab: {
+ root: {
+ '&$selected': {
+ fontWeight: 700,
+ color: arvadosPurple,
+ },
+ },
+ },
+ MuiList: {
+ root: {
+ color: grey900,
+ },
+ },
+ MuiListItemText: {
+ root: {
+ padding: 0,
+ },
+ },
+ MuiListItemIcon: {
+ 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,