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