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 purple from '@material-ui/core/colors/purple';
   8 import blue from '@material-ui/core/colors/blue';
   9 import grey from '@material-ui/core/colors/grey';
  10 import green from '@material-ui/core/colors/green';
  11 import yellow from '@material-ui/core/colors/yellow';
  12 import red from '@material-ui/core/colors/red';
  13
  14 export interface ArvadosThemeOptions extends ThemeOptions {
  15     customs: any;
  16 }
  17
  18 export interface ArvadosTheme extends Theme {
  19     customs: {
  20         colors: Colors
  21     };
  22 }
  23
  24 interface Colors {
  25     green700: string;
  26     yellow700: string;
  27     red900: string;
  28     blue500: string;
  29     grey500: string;
  30     grey700: string;
  31 }
  32
  33 const red900 = red["900"];
  34 const purple800 = purple["800"];
  35 const grey200 = grey["200"];
  36 const grey300 = grey["300"];
  37 const grey500 = grey["500"];
  38 const grey600 = grey["600"];
  39 const grey700 = grey["700"];
  40 const grey900 = grey["900"];
  41 const rocheBlue = '#06C';
  42
  43 export const themeOptions: ArvadosThemeOptions = {
  44     customs: {
  45         colors: {
  46             green700: green["700"],
  47             yellow700: yellow["700"],
  48             red900: red['900'],
  49             blue500: blue['500'],
  50             grey500,
  51             grey700
  52         }
  53     },
  54     overrides: {
  55         MuiTypography: {
  56             body1: {
  57                 fontSize: '0.8125rem'
  58             }
  59         },
  60         MuiAppBar: {
  61             colorPrimary: {
  62                 backgroundColor: purple800
  63             }
  64         },
  65         MuiTabs: {
  66             root: {
  67                 color: grey600
  68             },
  69             indicator: {
  70                 backgroundColor: purple800
  71             }
  72         },
  73         MuiTab: {
  74             selected: {
  75                 fontWeight: 700,
  76                 color: purple800
  77             }
  78         },
  79         MuiList: {
  80             root: {
  81                 color: grey900
  82             }
  83         },
  84         MuiListItemText: {
  85             root: {
  86                 padding: 0
  87             }
  88         },
  89         MuiListItemIcon: {
  90             root: {
  91                 fontSize: '1.25rem'
  92             }
  93         },
  94         MuiCardHeader: {
  95             avatar: {
  96                 display: 'flex',
  97                 alignItems: 'center'
  98             },
  99             title: {
 100                 color: grey700,
 101                 fontSize: '1.25rem'
 102             }
 103         },
 104         MuiMenuItem: {
 105             root: {
 106                 padding: '8px 16px'
 107             }
 108         },
 109         MuiInput: {
 110             root: {
 111                 fontSize: '0.875rem'
 112             },
 113             underline: {
 114                 '&:after': {
 115                     borderBottomColor: purple800
 116                 },
 117                 '&:hover:not($disabled):not($focused):not($error):before': {
 118                     borderBottom: '1px solid inherit'
 119                 }
 120             }
 121         },
 122         MuiFormLabel: {
 123             root: {
 124                 fontSize: '0.875rem'
 125             },
 126             focused: {
 127                 "&$focused:not($error)": {
 128                     color: purple800
 129                 }
 130             }
 131         }
 132     },
 133     mixins: {
 134         toolbar: {
 135             minHeight: '48px'
 136         }
 137     },
 138     palette: {
 139         primary: {
 140             main: rocheBlue,
 141             dark: blue.A100
 142         }
 143     }
 144 };
 145
 146 export const CustomTheme = createMuiTheme(themeOptions);