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