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 { createTheme, adaptV4Theme } from '@mui/material/styles';
   6 import { StyleRulesCallback } from '@mui/styles';
   7 import { DeprecatedThemeOptions, Theme } from '@mui/material/styles';
   8 import { blue, grey, green, yellow, red } from '@mui/material/colors';
   9
  10 export interface ArvadosThemeOptions extends DeprecatedThemeOptions {
  11     customs: any;
  12 }
  13
  14 export interface ArvadosTheme extends Theme {
  15     customs: {
  16         colors: Colors
  17     };
  18 }
  19
  20 export type CustomStyleRulesCallback<ClassKey extends string = string> =
  21     StyleRulesCallback<Theme, {}, ClassKey>
  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.875rem'
  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         MuiAccordion: {
 132             root: {
 133                 "&$expanded": {
 134                   "marginTop": "8px"
 135                 },
 136               },
 137         },
 138         MuiAccordionDetails: {
 139             root: {
 140                 marginBottom: 0,
 141                 paddingBottom: '4px',
 142             }
 143         },
 144         MuiAccordionSummary: {
 145             content: {
 146                 '&$expanded': {
 147                     margin: 0,
 148                 },
 149                 color: grey700,
 150                 fontSize: '1.25rem',
 151                 margin: 0,
 152             },
 153             expanded: {},
 154         },
 155         MuiMenuItem: {
 156             root: {
 157                 padding: '8px 16px'
 158             }
 159         },
 160         MuiInput: {
 161             root: {
 162                 fontSize: '0.875rem'
 163             },
 164             underline: {
 165                 '&:after': {
 166                     borderBottomColor: arvadosDarkBlue
 167                 },
 168                 '&:hover:not($disabled):not($focused):not($error):before': {
 169                     borderBottom: '1px solid inherit'
 170                 }
 171             }
 172         },
 173         MuiFormLabel: {
 174             root: {
 175                 fontSize: '0.875rem',
 176                 "&$focused": {
 177                     "&$focused:not($error)": {
 178                         color: arvadosDarkBlue
 179                     }
 180                 }
 181             }
 182         },
 183         MuiStepIcon: {
 184             root: {
 185                 '&$active': {
 186                     color: arvadosDarkBlue
 187                 },
 188                 '&$completed': {
 189                     color: 'inherited'
 190                 },
 191             }
 192         },
 193         MuiLinearProgress: {
 194             barColorSecondary: {
 195                 backgroundColor: red['700']
 196             }
 197         },
 198     },
 199     mixins: {
 200         toolbar: {
 201             minHeight: '48px'
 202         }
 203     },
 204     palette: {
 205         primary: {
 206             main: '#017ead',
 207             dark: '#015272',
 208             light: '#82cffd',
 209             contrastText: '#fff'
 210         }
 211     },
 212 };
 213
 214 export const CustomTheme = createTheme(adaptV4Theme(themeOptions));