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