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 purple from '@material-ui/core/colors/purple';
   8 import blue from '@material-ui/core/colors/blue';
   9 import grey from '@material-ui/core/colors/grey';
  10 import green from '@material-ui/core/colors/green';
  11 import yellow from '@material-ui/core/colors/yellow';
  12 import red from '@material-ui/core/colors/red';
  13 import teal from '@material-ui/core/colors/teal';
  14
  15 export interface ArvadosThemeOptions extends ThemeOptions {
  16     customs: any;
  17 }
  18
  19 export interface ArvadosTheme extends Theme {
  20     customs: {
  21         colors: Colors
  22     };
  23 }
  24
  25 interface Colors {
  26     green700: string;
  27     yellow700: string;
  28     red900: string;
  29     blue500: string;
  30     purple: string;
  31 }
  32
  33 const arvadosPurple = '#361336';
  34 const purple800 = purple["800"];
  35 const grey500 = grey["500"];
  36 const grey600 = grey["600"];
  37 const grey700 = grey["700"];
  38 const grey900 = grey["900"];
  39 const rocheBlue = '#06C';
  40
  41 export const themeOptions: ArvadosThemeOptions = {
  42     customs: {
  43         colors: {
  44             green700: green["700"],
  45             yellow700: yellow["700"],
  46             red900: red['900'],
  47             blue500: blue['500'],
  48             purple: arvadosPurple
  49         }
  50     },
  51     overrides: {
  52         MuiTypography: {
  53             body1: {
  54                 fontSize: '0.8125rem'
  55             }
  56         },
  57         MuiAppBar: {
  58             colorPrimary: {
  59                 backgroundColor: arvadosPurple
  60             }
  61         },
  62         MuiTabs: {
  63             root: {
  64                 color: grey600
  65             },
  66             indicator: {
  67                 backgroundColor: arvadosPurple
  68             }
  69         },
  70         MuiTab: {
  71             selected: {
  72                 fontWeight: 700,
  73                 color: arvadosPurple
  74             }
  75         },
  76         MuiList: {
  77             root: {
  78                 color: grey900
  79             }
  80         },
  81         MuiListItemText: {
  82             root: {
  83                 padding: 0
  84             }
  85         },
  86         MuiListItemIcon: {
  87             root: {
  88                 fontSize: '1.25rem'
  89             }
  90         },
  91         MuiCardHeader: {
  92             avatar: {
  93                 display: 'flex',
  94                 alignItems: 'center'
  95             },
  96             title: {
  97                 color: grey700,
  98                 fontSize: '1.25rem'
  99             }
 100         },
 101         MuiMenuItem: {
 102             root: {
 103                 padding: '8px 16px'
 104             }
 105         },
 106         MuiInput: {
 107             root: {
 108                 fontSize: '0.875rem'
 109             },
 110             underline: {
 111                 '&:after': {
 112                     borderBottomColor: arvadosPurple
 113                 },
 114                 '&:hover:not($disabled):not($focused):not($error):before': {
 115                     borderBottom: '1px solid inherit'
 116                 }
 117             }
 118         },
 119         MuiFormLabel: {
 120             root: {
 121                 fontSize: '0.875rem'
 122             },
 123             focused: {
 124                 "&$focused:not($error)": {
 125                     color: arvadosPurple
 126                 }
 127             }
 128         },
 129         MuiStepIcon: {
 130             root: {
 131                 '&$active': {
 132                     color: arvadosPurple
 133                 },
 134                 '&$completed': {
 135                     color: 'inherited'
 136                 },
 137             }
 138         }
 139     },
 140     mixins: {
 141         toolbar: {
 142             minHeight: '48px'
 143         }
 144     },
 145     palette: {
 146         primary: {
 147             main: teal.A700,
 148             dark: teal.A400,
 149             contrastText: '#fff'
 150         }
 151     }
 152 };
 153
 154 export const CustomTheme = createMuiTheme(themeOptions);