Merge branch 'master'
[arvados.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 export 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     red900: string;
28     blue500: string;
29     grey500: string;
30 }
31
32 const red900 = red["900"];
33 const purple800 = purple["800"];
34 const grey200 = grey["200"];
35 const grey300 = grey["300"];
36 const grey500 = grey["500"];
37 const grey600 = grey["600"];
38 const grey700 = grey["700"];
39 const grey900 = grey["900"];
40 const rocheBlue = '#06C';
41
42 export const themeOptions: ArvadosThemeOptions = {
43     customs: {
44         colors: {
45             green700: green["700"],
46             yellow700: yellow["700"],
47             red900: red['900'],
48             blue500: blue['500'],
49             grey500,
50         }
51     },
52     overrides: {
53         MuiTypography: {
54             body1: {
55                 fontSize: '0.8125rem'
56             }
57         },
58         MuiAppBar: {
59             colorPrimary: {
60                 backgroundColor: purple800
61             }
62         },
63         MuiTabs: {
64             root: {
65                 color: grey600
66             },
67             indicator: {
68                 backgroundColor: purple800
69             }
70         },
71         MuiTab: {
72             selected: {
73                 fontWeight: 700,
74                 color: purple800
75             }
76         },
77         MuiList: {
78             root: {
79                 color: grey900
80             }
81         },
82         MuiListItemText: {
83             root: {
84                 padding: 0
85             }
86         },
87         MuiListItemIcon: {
88             root: {
89                 fontSize: '1.25rem'
90             }
91         },
92         MuiCardHeader: {
93             avatar: {
94                 display: 'flex',
95                 alignItems: 'center'
96             },
97             title: {
98                 color: grey700,
99                 fontSize: '1.25rem'
100             }
101         },
102         MuiMenuItem: {
103             root: {
104                 padding: '8px 16px'
105             }
106         },
107         MuiInput: {
108             root: {
109                 fontSize: '0.875rem'
110             },
111             underline: {
112                 '&:after': {
113                     borderBottomColor: purple800
114                 },
115                 '&:hover:not($disabled):not($focused):not($error):before': {
116                     borderBottom: '1px solid inherit'
117                 }
118             }
119         },
120         MuiFormLabel: {
121             root: {
122                 fontSize: '0.875rem'
123             },
124             focused: {
125                 "&$focused:not($error)": {
126                     color: purple800
127                 }
128             }
129         }
130     },
131     mixins: {
132         toolbar: {
133             minHeight: '48px'
134         }
135     },
136     palette: {
137         primary: {
138             main: rocheBlue,
139             dark: blue.A100
140         }
141     }
142 };
143
144 export const CustomTheme = createMuiTheme(themeOptions);