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