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