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