import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme';
import blue from '@material-ui/core/colors/blue';
-import cyan from '@material-ui/core/colors/cyan';
import grey from '@material-ui/core/colors/grey';
import green from '@material-ui/core/colors/green';
-import lightGreen from '@material-ui/core/colors/lightGreen';
import yellow from '@material-ui/core/colors/yellow';
import red from '@material-ui/core/colors/red';
-import teal from '@material-ui/core/colors/teal';
export interface ArvadosThemeOptions extends ThemeOptions {
customs: any;
}
interface Colors {
- cyan100: string;
- cyan200: string;
- lightGreen300: string;
- lightGreen400: string;
green700: string;
+ green800: string;
yellow100: string;
yellow700: string;
yellow900: string;
red100: string;
red900: string;
blue500: string;
- grey300: string;
- grey400: string;
+ blue700: string;
grey500: string;
+ grey600: string;
+ grey700: string;
+ grey900: string;
purple: string;
- orange: string;
+ orange: string;
+ greyL: string;
+ greyD: string;
+ darkblue: string;
}
-const arvadosPurple = '#361336';
+/**
+* arvadosGreyLight is the hex equivalent of rgba(0,0,0,0.87) on #fafafa background and arvadosGreyDark is the hex equivalent of rgab(0,0,0,0.54) on #fafafa background
+*/
+
+const arvadosDarkBlue = '#052a3c';
+const arvadosGreyLight = '#737373';
+const arvadosGreyDark = '#212121';
const grey500 = grey["500"];
const grey600 = grey["600"];
const grey700 = grey["700"];
+const grey800 = grey["800"];
const grey900 = grey["900"];
export const themeOptions: ArvadosThemeOptions = {
},
customs: {
colors: {
- lightGreen300: lightGreen["300"],
- lightGreen400: lightGreen["400"],
- cyan100: cyan["100"],
- cyan200: cyan["200"],
green700: green["700"],
+ green800: green["800"],
yellow100: yellow["100"],
yellow700: yellow["700"],
yellow900: yellow["900"],
red100: red["100"],
red900: red['900'],
blue500: blue['500'],
- grey300: grey["300"],
- grey400: grey["400"],
+ blue700: blue['700'],
grey500: grey500,
- purple: arvadosPurple,
+ grey600: grey600,
+ grey700: grey700,
+ grey800: grey800,
+ grey900: grey900,
+ darkblue: arvadosDarkBlue,
orange: '#f0ad4e',
+ greyL: arvadosGreyLight,
+ greyD: arvadosGreyDark,
}
},
overrides: {
},
MuiAppBar: {
colorPrimary: {
- backgroundColor: arvadosPurple
+ backgroundColor: arvadosDarkBlue
}
},
MuiTabs: {
color: grey600
},
indicator: {
- backgroundColor: arvadosPurple
+ backgroundColor: arvadosDarkBlue
}
},
MuiTab: {
root: {
'&$selected': {
fontWeight: 700,
- color: arvadosPurple
}
}
},
},
MuiListItemIcon: {
root: {
- fontSize: '1.25rem'
+ fontSize: '1.25rem',
}
},
MuiCardHeader: {
alignItems: 'center'
},
title: {
- color: grey700,
+ color: arvadosGreyDark,
fontSize: '1.25rem'
}
},
},
underline: {
'&:after': {
- borderBottomColor: arvadosPurple
+ borderBottomColor: arvadosDarkBlue
},
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: '1px solid inherit'
fontSize: '0.875rem',
"&$focused": {
"&$focused:not($error)": {
- color: arvadosPurple
+ color: arvadosDarkBlue
}
}
}
MuiStepIcon: {
root: {
'&$active': {
- color: arvadosPurple
+ color: arvadosDarkBlue
},
'&$completed': {
color: 'inherited'
},
palette: {
primary: {
- main: teal.A700,
- dark: teal.A400,
+ main: '#017ead',
+ dark: '#015272',
+ light: '#82cffd',
contrastText: '#fff'
}
},