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