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 { StyleRulesCallback, createTheme } from '@material-ui/core/styles';
   6 import { ThemeOptions, Theme } from '@material-ui/core/styles';
   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 export type CustomStyleRulesCallback<ClassKey extends string = string> =
  24     StyleRulesCallback<Theme, {}, ClassKey>
  25
  26 interface Colors {
  27     green700: string;
  28     green800: string;
  29     yellow100: string;
  30     yellow700: string;
  31     yellow900: string;
  32     red100: string;
  33     red900: string;
  34     blue500: string;
  35     blue700: string;
  36     grey500: string;
  37     grey600: string;
  38     grey700: string;
  39     grey900: string;
  40     purple: string;
  41     orange: string;
  42     greyL: string;
  43     greyD: string;
  44     darkblue: string;
  45 }
  46
  47 /**
  48 * 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
  49 */
  50
  51 const arvadosDarkBlue = '#052a3c';
  52 const arvadosGreyLight = '#737373';
  53 const arvadosGreyDark = '#212121';
  54 const grey500 = grey["500"];
  55 const grey600 = grey["600"];
  56 const grey700 = grey["700"];
  57 const grey800 = grey["800"];
  58 const grey900 = grey["900"];
  59
  60 export const themeOptions: ArvadosThemeOptions = {
  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 = createTheme(themeOptions);