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