}
export interface ArvadosTheme extends Theme {
- customs: any;
+ customs: {
+ colors: Colors
+ };
}
-// const red =
-const yellow700 = yellow["700"];
+interface Colors {
+ green700: string;
+ yellow700: string;
+}
+
+const red900 = red["900"];
const purple800 = purple["800"];
const grey200 = grey["200"];
const grey300 = grey["300"];
const grey600 = grey["600"];
const grey700 = grey["700"];
const grey900 = grey["900"];
+const rocheBlue = '#06C';
const themeOptions: ArvadosThemeOptions = {
customs: {
colors: {
- green700: green["700"]
+ green700: green["700"],
+ yellow700: yellow["700"]
}
},
overrides: {
root: {
fontSize: '1.25rem'
}
+ },
+ MuiCardHeader: {
+ avatar: {
+ display: 'flex',
+ alignItems: 'center'
+ },
+ title: {
+ color: grey700,
+ fontSize: '1.25rem'
+ }
+ },
+ MuiMenuItem: {
+ root: {
+ padding: '8px 16px'
+ }
+ },
+ MuiInput: {
+ root: {
+ fontSize: '0.875rem'
+ },
+ underline: {
+ '&:after': {
+ borderBottomColor: purple800
+ },
+ '&:hover:not($disabled):not($focused):not($error):before': {
+ borderBottom: '1px solid inherit'
+ }
+ }
+ },
+ MuiFormLabel: {
+ root: {
+ fontSize: '0.875rem'
+ },
+ focused: {
+ "&$focused:not($error)": {
+ color: purple800
+ }
+ }
}
},
mixins: {
},
palette: {
primary: {
- main: '#06C',
+ main: rocheBlue,
dark: blue.A100
}
}