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