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