Merge branch 'master'
[arvados-workbench2.git] / src / common / custom-theme.ts
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import { createMuiTheme } from '@material-ui/core/styles';
6 import { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme';
7 import purple from '@material-ui/core/colors/purple';
8 import blue from '@material-ui/core/colors/blue';
9 import grey from '@material-ui/core/colors/grey';
10 import green from '@material-ui/core/colors/green';
11 import yellow from '@material-ui/core/colors/yellow';
12 import red from '@material-ui/core/colors/red';
13
14 interface ArvadosThemeOptions extends ThemeOptions {
15     customs: any;
16 }
17
18 export interface ArvadosTheme extends Theme {
19     customs: {
20         colors: Colors
21     };
22 }
23
24 interface Colors {
25     green700: string;
26     yellow700: string;
27 }
28
29 const red900 = red["900"];
30 const purple800 = purple["800"];
31 const grey200 = grey["200"];
32 const grey300 = grey["300"];
33 const grey500 = grey["500"];
34 const grey600 = grey["600"];
35 const grey700 = grey["700"];
36 const grey900 = grey["900"];
37 const rocheBlue = '#06C';
38
39 const themeOptions: ArvadosThemeOptions = {
40     customs: {
41         colors: {
42             green700: green["700"],
43             yellow700: yellow["700"]
44         }
45     },
46     overrides: {
47         MuiTypography: {
48             body1: {
49                 fontSize: '0.8125rem'
50             }
51         },
52         MuiAppBar: {
53             colorPrimary: {
54                 backgroundColor: purple800
55             }
56         },
57         MuiTabs: {
58             root: {
59                 color: grey600
60             },
61             indicator: {
62                 backgroundColor: purple800
63             }
64         },
65         MuiTab: {
66             selected: {
67                 fontWeight: 700,
68                 color: purple800
69             }
70         },
71         MuiList: {
72             root: {
73                 color: grey900
74             }
75         },
76         MuiListItemText: {
77             root: {
78                 padding: 0
79             }
80         },
81         MuiListItemIcon: {
82             root: {
83                 fontSize: '1.25rem'
84             }
85         },
86         MuiCardHeader: {
87             avatar: {
88                 display: 'flex',
89                 alignItems: 'center'
90             },
91             title: {
92                 color: grey700,
93                 fontSize: '1.25rem'
94             }
95         },
96         MuiMenuItem: {
97             root: {
98                 padding: '8px 16px'
99             }
100         },
101         MuiInput: {
102             underline: {
103                 '&:after': {
104                     borderBottomColor: purple800
105                 },
106                 '&:hover:not($disabled):not($focused):not($error):before': {
107                     borderBottom: '1px solid inherit'
108                 }
109             }
110         },
111         MuiFormLabel: {
112             focused: {
113                 "&$focused:not($error)": {
114                     color: purple800
115                 }
116             }
117         }
118     },
119     mixins: {
120         toolbar: {
121             minHeight: '48px'
122         }
123     },
124     palette: {
125         primary: {
126             main: rocheBlue,
127             dark: blue.A100
128         }
129     }
130 };
131
132 export const CustomTheme = createMuiTheme(themeOptions);