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