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