1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
13 export interface ArvadosThemeOptions extends ThemeOptions {
17 export interface ArvadosTheme extends Theme {
46 * 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
49 const arvadosDarkBlue = '#052a3c';
50 const arvadosGreyLight = '#737373';
51 const arvadosGreyDark = '#212121';
52 const grey500 = grey["500"];
53 const grey600 = grey["600"];
54 const grey700 = grey["700"];
55 const grey800 = grey["800"];
56 const grey900 = grey["900"];
58 export const themeOptions: ArvadosThemeOptions = {
60 useNextVariants: true,
64 green700: green["700"],
65 green800: green["800"],
66 yellow100: yellow["100"],
67 yellow700: yellow["700"],
68 yellow900: yellow["900"],
78 darkblue: arvadosDarkBlue,
80 darkOrange: '#9A6E31',
81 greyL: arvadosGreyLight,
82 greyD: arvadosGreyDark,
93 backgroundColor: arvadosDarkBlue
101 backgroundColor: arvadosDarkBlue
132 color: arvadosGreyDark,
141 MuiExpansionPanelDetails: {
144 paddingBottom: '4px',
147 MuiExpansionPanelSummary: {
169 borderBottomColor: arvadosDarkBlue
171 '&:hover:not($disabled):not($focused):not($error):before': {
172 borderBottom: '1px solid inherit'
178 fontSize: '0.875rem',
180 "&$focused:not($error)": {
181 color: arvadosDarkBlue
189 color: arvadosDarkBlue
212 export const CustomTheme = createMuiTheme(themeOptions);