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