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