refactoring project-panel
[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 interface ArvadosThemeOptions extends ThemeOptions {
15     customs: any;
16 }
17
18 export interface ArvadosTheme extends Theme {
19     customs: any;
20 }
21
22 // const red = 
23 const yellow700 = yellow["700"];
24 const purple800 = purple["800"];
25 const grey200 = grey["200"];
26 const grey300 = grey["300"];
27 const grey500 = grey["500"];
28 const grey600 = grey["600"];
29 const grey700 = grey["700"];
30 const grey900 = grey["900"];
31
32 const themeOptions: ArvadosThemeOptions = {
33     customs: {
34         colors: {
35             green700: green["700"]
36         }
37     },
38     overrides: {
39         MuiTypography: {
40             body1: {
41                 fontSize: '0.8125rem'
42             }
43         },
44         MuiAppBar: {
45             colorPrimary: {
46                 backgroundColor: purple800
47             }
48         },
49         MuiTabs: {
50             root: {
51                 color: grey600
52             },
53             indicator: {
54                 backgroundColor: purple800
55             }
56         },
57         MuiTab: {
58             selected: {
59                 fontWeight: 700,
60                 color: purple800
61             }
62         },
63         MuiList: {
64             root: {
65                 color: grey900
66             }
67         },
68         MuiListItemText: {
69             root: {
70                 padding: 0
71             }
72         },
73         MuiListItemIcon: {
74             root: {
75                 fontSize: '1.25rem'
76             }
77         }
78     },
79     mixins: {
80         toolbar: {
81             minHeight: '48px'
82         }
83     },
84     palette: {
85         primary: {
86             main: '#06C',
87             dark: blue.A100
88         }
89     }
90 };
91
92 export const CustomTheme = createMuiTheme(themeOptions);