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     purple: string;
  31 }
  32
  33 const arvadosPurple = '#361336';
  34 const purple800 = purple["800"];
  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     typography: {
  43         useNextVariants: true,
  44     },
  45     customs: {
  46         colors: {
  47             green700: green["700"],
  48             yellow700: yellow["700"],
  49             red900: red['900'],
  50             blue500: blue['500'],
  51             purple: arvadosPurple
  52         }
  53     },
  54     overrides: {
  55         MuiTypography: {
  56             body1: {
  57                 fontSize: '0.8125rem'
  58             }
  59         },
  60         MuiAppBar: {
  61             colorPrimary: {
  62                 backgroundColor: arvadosPurple
  63             }
  64         },
  65         MuiTabs: {
  66             root: {
  67                 color: grey600
  68             },
  69             indicator: {
  70                 backgroundColor: arvadosPurple
  71             }
  72         },
  73         MuiTab: {
  74             root: {
  75                 '&$selected': {
  76                     fontWeight: 700,
  77                     color: arvadosPurple
  78                 }
  79             }
  80         },
  81         MuiList: {
  82             root: {
  83                 color: grey900
  84             }
  85         },
  86         MuiListItemText: {
  87             root: {
  88                 padding: 0
  89             }
  90         },
  91         MuiListItemIcon: {
  92             root: {
  93                 fontSize: '1.25rem'
  94             }
  95         },
  96         MuiCardHeader: {
  97             avatar: {
  98                 display: 'flex',
  99                 alignItems: 'center'
 100             },
 101             title: {
 102                 color: grey700,
 103                 fontSize: '1.25rem'
 104             }
 105         },
 106         MuiExpansionPanel: {
 107             expanded: {
 108                 marginTop: '8px',
 109             }
 110         },
 111         MuiExpansionPanelDetails: {
 112             root: {
 113                 marginBottom: 0,
 114                 paddingBottom: '4px',
 115             }
 116         },
 117         MuiExpansionPanelSummary: {
 118             content: {
 119                 '&$expanded': {
 120                     margin: 0,
 121                 },
 122                 color: grey700,
 123                 fontSize: '1.25rem',
 124                 margin: 0,
 125             },
 126             expanded: {},
 127         },
 128         MuiMenuItem: {
 129             root: {
 130                 padding: '8px 16px'
 131             }
 132         },
 133         MuiInput: {
 134             root: {
 135                 fontSize: '0.875rem'
 136             },
 137             underline: {
 138                 '&:after': {
 139                     borderBottomColor: arvadosPurple
 140                 },
 141                 '&:hover:not($disabled):not($focused):not($error):before': {
 142                     borderBottom: '1px solid inherit'
 143                 }
 144             }
 145         },
 146         MuiFormLabel: {
 147             root: {
 148                 fontSize: '0.875rem',
 149                 "&$focused": {
 150                     "&$focused:not($error)": {
 151                         color: arvadosPurple
 152                     }
 153                 }
 154             }
 155         },
 156         MuiStepIcon: {
 157             root: {
 158                 '&$active': {
 159                     color: arvadosPurple
 160                 },
 161                 '&$completed': {
 162                     color: 'inherited'
 163                 },
 164             }
 165         }
 166     },
 167     mixins: {
 168         toolbar: {
 169             minHeight: '48px'
 170         }
 171     },
 172     palette: {
 173         primary: {
 174             main: teal.A700,
 175             dark: teal.A400,
 176             contrastText: '#fff'
 177         }
 178     },
 179 };
 180
 181 export const CustomTheme = createMuiTheme(themeOptions);