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