Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / src / common / custom-theme.ts

diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index e819ab3ac999bd10cc068d1ad51af21bb0079aa0..135204a066da6ba0734139061bc0378fdbc94e4e 100644 (file)
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -9,7 +9,6 @@ import grey from '@material-ui/core/colors/grey';
 import green from '@material-ui/core/colors/green';
 import yellow from '@material-ui/core/colors/yellow';
 import red from '@material-ui/core/colors/red';
-import teal from '@material-ui/core/colors/teal';
 
 export interface ArvadosThemeOptions extends ThemeOptions {
     customs: any;
@@ -17,29 +16,43 @@ export interface ArvadosThemeOptions extends ThemeOptions {
 
 export interface ArvadosTheme extends Theme {
     customs: {
-        colors: Colors;
+        colors: Colors
     };
 }
 
 interface Colors {
     green700: string;
+    green800: string;
     yellow100: string;
     yellow700: string;
     yellow900: string;
     red100: string;
     red900: string;
     blue500: string;
+    blue700: string;
     grey500: string;
+    grey600: string;
     grey700: string;
+    grey900: string;
     purple: string;
-    orange: string;
+    orange: string; 
+    greyL: string;
+    greyD: string;
+    darkblue: string;
 }
 
-const arvadosPurple = '#361336';
-const grey500 = grey['500'];
-const grey600 = grey['600'];
-const grey700 = grey['700'];
-const grey900 = grey['900'];
+/**
+* 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  
+*/
+
+const arvadosDarkBlue = '#052a3c';
+const arvadosGreyLight = '#737373'; 
+const arvadosGreyDark = '#212121'; 
+const grey500 = grey["500"];
+const grey600 = grey["600"];
+const grey700 = grey["700"];
+const grey800 = grey["800"];
+const grey900 = grey["900"];
 
 export const themeOptions: ArvadosThemeOptions = {
     typography: {
@@ -47,80 +60,87 @@ export const themeOptions: ArvadosThemeOptions = {
     },
     customs: {
         colors: {
-            green700: green['700'],
-            yellow100: yellow['100'],
-            yellow700: yellow['700'],
-            yellow900: yellow['900'],
-            red100: red['100'],
+            green700: green["700"],
+            green800: green["800"],
+            yellow100: yellow["100"],
+            yellow700: yellow["700"],
+            yellow900: yellow["900"],
+            red100: red["100"],
             red900: red['900'],
             blue500: blue['500'],
+            blue700: blue['700'],
             grey500: grey500,
-            purple: arvadosPurple,
+            grey600: grey600,
+            grey700: grey700,
+            grey800: grey800,
+            grey900: grey900,
+            darkblue: arvadosDarkBlue,
             orange: '#f0ad4e',
-        },
+            greyL: arvadosGreyLight,
+            greyD: arvadosGreyDark,
+        }
     },
     overrides: {
         MuiTypography: {
             body1: {
-                fontSize: '0.8125rem',
-            },
+                fontSize: '0.8125rem'
+            }
         },
         MuiAppBar: {
             colorPrimary: {
-                backgroundColor: arvadosPurple,
-            },
+                backgroundColor: arvadosDarkBlue
+            }
         },
         MuiTabs: {
             root: {
-                color: grey600,
+                color: grey600
             },
             indicator: {
-                backgroundColor: arvadosPurple,
-            },
+                backgroundColor: arvadosDarkBlue
+            }
         },
         MuiTab: {
             root: {
                 '&$selected': {
                     fontWeight: 700,
-                    color: arvadosPurple,
-                },
-            },
+                }
+            }
         },
         MuiList: {
             root: {
-                color: grey900,
-            },
+                color: grey900
+            }
         },
         MuiListItemText: {
             root: {
-                padding: 0,
-            },
+                padding: 0
+            }
         },
         MuiListItemIcon: {
             root: {
                 fontSize: '1.25rem',
-            },
+            }
         },
         MuiCardHeader: {
             avatar: {
                 display: 'flex',
-                alignItems: 'center',
+                alignItems: 'center'
             },
             title: {
-                color: grey700,
-                fontSize: '1.25rem',
-            },
+                color: arvadosGreyDark, 
+                fontSize: '1.25rem'
+            }
         },
         MuiExpansionPanel: {
             expanded: {
                 marginTop: '8px',
-            },
+            }
         },
         MuiExpansionPanelDetails: {
             root: {
                 marginBottom: 0,
                 paddingBottom: '4px',
-            },
+            }
         },
         MuiExpansionPanelSummary: {
             content: {
@@ -135,54 +155,55 @@ export const themeOptions: ArvadosThemeOptions = {
         },
         MuiMenuItem: {
             root: {
-                padding: '8px 16px',
-            },
+                padding: '8px 16px'
+            }
         },
         MuiInput: {
             root: {
-                fontSize: '0.875rem',
+                fontSize: '0.875rem'
             },
             underline: {
                 '&:after': {
-                    borderBottomColor: arvadosPurple,
+                    borderBottomColor: arvadosDarkBlue
                 },
                 '&:hover:not($disabled):not($focused):not($error):before': {
-                    borderBottom: '1px solid inherit',
-                },
-            },
+                    borderBottom: '1px solid inherit'
+                }
+            }
         },
         MuiFormLabel: {
             root: {
                 fontSize: '0.875rem',
-                '&$focused': {
-                    '&$focused:not($error)': {
-                        color: arvadosPurple,
-                    },
-                },
-            },
+                "&$focused": {
+                    "&$focused:not($error)": {
+                        color: arvadosDarkBlue
+                    }
+                }
+            }
         },
         MuiStepIcon: {
             root: {
                 '&$active': {
-                    color: arvadosPurple,
+                    color: arvadosDarkBlue
                 },
                 '&$completed': {
-                    color: 'inherited',
+                    color: 'inherited'
                 },
-            },
-        },
+            }
+        }
     },
     mixins: {
         toolbar: {
-            minHeight: '48px',
-        },
+            minHeight: '48px'
+        }
     },
     palette: {
         primary: {
-            main: teal.A700,
-            dark: teal.A400,
-            contrastText: '#fff',
-        },
+            main: '#017ead',
+            dark: '#015272',
+            light: '#82cffd',
+            contrastText: '#fff'
+        }
     },
 };