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