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