Merge branch '19069-workflow-launching' into 19143-project-list-workflows
[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 blue from '@material-ui/core/colors/blue';
8 import grey from '@material-ui/core/colors/grey';
9 import green from '@material-ui/core/colors/green';
10 import yellow from '@material-ui/core/colors/yellow';
11 import red from '@material-ui/core/colors/red';
12 import teal from '@material-ui/core/colors/teal';
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     yellow100: string;
27     yellow700: string;
28     yellow900: string;
29     red100: string;
30     red900: string;
31     blue500: string;
32     grey500: string;
33     purple: string;
34     orange: string;
35 }
36
37 const arvadosPurple = '#361336';
38 const grey500 = grey["500"];
39 const grey600 = grey["600"];
40 const grey700 = grey["700"];
41 const grey900 = grey["900"];
42
43 export const themeOptions: ArvadosThemeOptions = {
44     typography: {
45         useNextVariants: true,
46     },
47     customs: {
48         colors: {
49             green700: green["700"],
50             yellow100: yellow["100"],
51             yellow700: yellow["700"],
52             yellow900: yellow["900"],
53             red100: red["100"],
54             red900: red['900'],
55             blue500: blue['500'],
56             grey500: grey500,
57             purple: arvadosPurple,
58             orange: '#f0ad4e',
59         }
60     },
61     overrides: {
62         MuiTypography: {
63             body1: {
64                 fontSize: '0.8125rem'
65             }
66         },
67         MuiAppBar: {
68             colorPrimary: {
69                 backgroundColor: arvadosPurple
70             }
71         },
72         MuiTabs: {
73             root: {
74                 color: grey600
75             },
76             indicator: {
77                 backgroundColor: arvadosPurple
78             }
79         },
80         MuiTab: {
81             root: {
82                 '&$selected': {
83                     fontWeight: 700,
84                     color: arvadosPurple
85                 }
86             }
87         },
88         MuiList: {
89             root: {
90                 color: grey900
91             }
92         },
93         MuiListItemText: {
94             root: {
95                 padding: 0
96             }
97         },
98         MuiListItemIcon: {
99             root: {
100                 fontSize: '1.25rem'
101             }
102         },
103         MuiCardHeader: {
104             avatar: {
105                 display: 'flex',
106                 alignItems: 'center'
107             },
108             title: {
109                 color: grey700,
110                 fontSize: '1.25rem'
111             }
112         },
113         MuiExpansionPanel: {
114             expanded: {
115                 marginTop: '8px',
116             }
117         },
118         MuiExpansionPanelDetails: {
119             root: {
120                 marginBottom: 0,
121                 paddingBottom: '4px',
122             }
123         },
124         MuiExpansionPanelSummary: {
125             content: {
126                 '&$expanded': {
127                     margin: 0,
128                 },
129                 color: grey700,
130                 fontSize: '1.25rem',
131                 margin: 0,
132             },
133             expanded: {},
134         },
135         MuiMenuItem: {
136             root: {
137                 padding: '8px 16px'
138             }
139         },
140         MuiInput: {
141             root: {
142                 fontSize: '0.875rem'
143             },
144             underline: {
145                 '&:after': {
146                     borderBottomColor: arvadosPurple
147                 },
148                 '&:hover:not($disabled):not($focused):not($error):before': {
149                     borderBottom: '1px solid inherit'
150                 }
151             }
152         },
153         MuiFormLabel: {
154             root: {
155                 fontSize: '0.875rem',
156                 "&$focused": {
157                     "&$focused:not($error)": {
158                         color: arvadosPurple
159                     }
160                 }
161             }
162         },
163         MuiStepIcon: {
164             root: {
165                 '&$active': {
166                     color: arvadosPurple
167                 },
168                 '&$completed': {
169                     color: 'inherited'
170                 },
171             }
172         }
173     },
174     mixins: {
175         toolbar: {
176             minHeight: '48px'
177         }
178     },
179     palette: {
180         primary: {
181             main: teal.A700,
182             dark: teal.A400,
183             contrastText: '#fff'
184         }
185     },
186 };
187
188 export const CustomTheme = createMuiTheme(themeOptions);