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);