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     yellow700: string;
  27     red900: string;
  28     blue500: string;
  29     purple: string;
  30 }
  31
  32 const arvadosPurple = '#361336';
  33 const grey600 = grey["600"];
  34 const grey700 = grey["700"];
  35 const grey900 = grey["900"];
  36
  37 export const themeOptions: ArvadosThemeOptions = {
  38     typography: {
  39         useNextVariants: true,
  40     },
  41     customs: {
  42         colors: {
  43             green700: green["700"],
  44             yellow700: yellow["700"],
  45             red900: red['900'],
  46             blue500: blue['500'],
  47             purple: arvadosPurple
  48         }
  49     },
  50     overrides: {
  51         MuiTypography: {
  52             body1: {
  53                 fontSize: '0.8125rem'
  54             }
  55         },
  56         MuiAppBar: {
  57             colorPrimary: {
  58                 backgroundColor: arvadosPurple
  59             }
  60         },
  61         MuiTabs: {
  62             root: {
  63                 color: grey600
  64             },
  65             indicator: {
  66                 backgroundColor: arvadosPurple
  67             }
  68         },
  69         MuiTab: {
  70             root: {
  71                 '&$selected': {
  72                     fontWeight: 700,
  73                     color: arvadosPurple
  74                 }
  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         MuiExpansionPanel: {
 103             expanded: {
 104                 marginTop: '8px',
 105             }
 106         },
 107         MuiExpansionPanelDetails: {
 108             root: {
 109                 marginBottom: 0,
 110                 paddingBottom: '4px',
 111             }
 112         },
 113         MuiExpansionPanelSummary: {
 114             content: {
 115                 '&$expanded': {
 116                     margin: 0,
 117                 },
 118                 color: grey700,
 119                 fontSize: '1.25rem',
 120                 margin: 0,
 121             },
 122             expanded: {},
 123         },
 124         MuiMenuItem: {
 125             root: {
 126                 padding: '8px 16px'
 127             }
 128         },
 129         MuiInput: {
 130             root: {
 131                 fontSize: '0.875rem'
 132             },
 133             underline: {
 134                 '&:after': {
 135                     borderBottomColor: arvadosPurple
 136                 },
 137                 '&:hover:not($disabled):not($focused):not($error):before': {
 138                     borderBottom: '1px solid inherit'
 139                 }
 140             }
 141         },
 142         MuiFormLabel: {
 143             root: {
 144                 fontSize: '0.875rem',
 145                 "&$focused": {
 146                     "&$focused:not($error)": {
 147                         color: arvadosPurple
 148                     }
 149                 }
 150             }
 151         },
 152         MuiStepIcon: {
 153             root: {
 154                 '&$active': {
 155                     color: arvadosPurple
 156                 },
 157                 '&$completed': {
 158                     color: 'inherited'
 159                 },
 160             }
 161         }
 162     },
 163     mixins: {
 164         toolbar: {
 165             minHeight: '48px'
 166         }
 167     },
 168     palette: {
 169         primary: {
 170             main: teal.A700,
 171             dark: teal.A400,
 172             contrastText: '#fff'
 173         }
 174     },
 175 };
 176
 177 export const CustomTheme = createMuiTheme(themeOptions);