refactor(theme): parameterise colors to theme, add edu variant

opengovsg · Apr 1, 2021 · 00c8d00 · 00c8d00
1 parent c922623
commit 00c8d00
Show file tree

Hide file tree

Showing 32 changed files with 224 additions and 122 deletions.
diff --git a/public/assets/edu/styles/colours.css b/public/assets/edu/styles/colours.css
@@ -1,17 +1,17 @@
 :root {
-    --notfound-text-color: #384a51;
-    --notfound-text-emphasize-color: #456682;
+    --notfound-text-color: #2b2e4a;
+    --notfound-text-emphasize-color: #48426d;
     --notfound-banner-color: #f9f9f9;
     --notfound-button-text-color: #ffffff;
-    --notfound-button-pine-color: #456682;
-    --notfound-button-seaweed-color: #384a51;
+    --notfound-button-pine-color: #48426d;
+    --notfound-button-seaweed-color: #2b2e4a;
     --notfound-divider-grey-color: #e8e8e8;
 
     --transition-body-color: #f9f9f9;
-    --transition-top-half-color: #384a51;
+    --transition-top-half-color: #2b2e4a;
     --transition-top-half-content-color: #ffffff;
     --transition-top-half-content-link-color: white;
     --transition-links-color: #000000;
-    --transition-skip-span-color: #456682;
+    --transition-skip-span-color: #48426d;
     --transition-footer-p-color: #bbbbbb;
   }
diff --git a/src/client/app/components/BaseLayout/BaseLayoutHeader.tsx b/src/client/app/components/BaseLayout/BaseLayoutHeader.tsx
@@ -62,14 +62,16 @@ const useStyles = makeStyles((theme) =>
     },
     appBarSignOutBtn: {
       // fill: theme.palette.primary.main,
-      color: (props: StyleProps) => (props.isLightItems ? 'white' : '#384A51'),
+      color: (props: StyleProps) =>
+        props.isLightItems ? 'white' : theme.palette.text.primary,
       order: 10,
     },
     appBarSignInBtn: {
       width: '140px',
       minWidth: '90px',
       order: 10,
-      color: (props: StyleProps) => (props.isLightItems ? '#384A51' : 'white'),
+      color: (props: StyleProps) =>
+        props.isLightItems ? theme.palette.text.primary : 'white',
       background: (props: StyleProps) =>
         props.isLightItems ? 'white' : theme.palette.primary.main,
     },

diff --git a/src/client/app/components/BaseLayout/widgets/Banner.tsx b/src/client/app/components/BaseLayout/widgets/Banner.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles<Theme, BannerForProps>((theme) =>
       width: '100%',
       minHeight: 50,
       backgroundColor: theme.palette.primary.main,
-      color: '#F9F9F9',
+      color: theme.palette.background.default,
       paddingTop: 15,
       paddingBottom: 15,
     },

diff --git a/src/client/app/components/MessageSnackbar.tsx b/src/client/app/components/MessageSnackbar.tsx
@@ -22,18 +22,18 @@ const useStyles = makeStyles((theme) =>
     },
     error: {
       backgroundColor: '#FFEDED',
-      color: '#384A51',
+      color: theme.palette.text.primary,
     },
     info: {
       backgroundColor: theme.palette.primary.dark,
     },
     success: {
       backgroundColor: '#EAF9E7',
-      color: '#384A51',
+      color: theme.palette.text.primary,
     },
     before: {
       '&::before': {
-        backgroundColor: '#384A51',
+        backgroundColor: theme.palette.primary.dark,
         width: '4px',
         content: '""',
         marginRight: theme.spacing(2.25),
@@ -136,7 +136,11 @@ const MessageSnackbar = () => {
           >
             <div className={classes.iconWrapper}>
               <CloseIcon
-                color={variant === snackbarVariants.INFO ? '#fff' : '#384A51'}
+                color={
+                  variant === snackbarVariants.INFO
+                    ? '#fff'
+                    : theme.palette.text.primary
+                }
                 size={16}
               />
             </div>

diff --git a/src/client/app/components/Section.tsx b/src/client/app/components/Section.tsx
@@ -17,11 +17,11 @@ const useStyles = makeStyles((theme) =>
       backgroundColor: (props: styleProps) => {
         switch (props.backgroundType) {
           case 'light':
-            return theme.palette.secondary.light
+            return theme.palette.background.paper
           case 'dark':
-            return theme.palette.secondary.dark
+            return theme.palette.background.default
           case 'darkest':
-            return '#384A51'
+            return theme.palette.primary.dark
           case 'black':
             return '#000000'
           default:

diff --git a/src/client/app/components/widgets/BetaTag/index.tsx b/src/client/app/components/widgets/BetaTag/index.tsx
@@ -5,7 +5,7 @@ const useStyles = makeStyles((theme) =>
   createStyles({
     root: {
       fontWeight: 400,
-      background: '#8CA6AD',
+      background: theme.palette.secondary.main,
       borderRadius: '5px',
       color: 'white',
       paddingTop: theme.spacing(0.5),

diff --git a/src/client/app/theme/index.ts b/src/client/app/theme/index.ts
@@ -1,3 +1,4 @@
+import { PaletteType } from '@material-ui/core'
 import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'
 
 // Provides theme spacing, breakpoint values for the main theme to consume.
@@ -13,27 +14,61 @@ const basicTheme = createMuiTheme({
   },
 })
 
+const paletteVariants = {
+  gov: {
+    type: 'light' as PaletteType,
+    divider: '#d8d8d8',
+    primary: {
+      main: '#456682',
+      dark: '#384A51',
+      contrastText: '#fff',
+    },
+    secondary: {
+      light: '#CDDCE0',
+      main: '#8CA6AD',
+      dark: '#2F4B62',
+      contrastText: '#000',
+    },
+    text: {
+      primary: '#384A51',
+      secondary: '#767676',
+    },
+    background: {
+      default: '#f9f9f9',
+      paper: '#ffffff',
+    },
+  },
+  edu: {
+    type: 'light' as PaletteType,
+    divider: '#d8d8d8',
+    primary: {
+      main: '#48426D',
+      dark: '#2B2E4A',
+      contrastText: '#fff',
+    },
+    secondary: {
+      light: '#D5CDE0',
+      main: '#8F8AB0',
+      dark: '#2B2E4A',
+      contrastText: '#000',
+    },
+    text: {
+      primary: '#48426D',
+      secondary: '#767676',
+    },
+    background: {
+      default: '#f9f9f9',
+      paper: '#ffffff',
+    },
+  },
+}
+
+const palette = paletteVariants[process.env.ASSET_VARIANT as 'gov' | 'edu']
+
 export default responsiveFontSizes(
   createMuiTheme({
     breakpoints: basicTheme.breakpoints,
-    palette: {
-      type: 'light',
-      divider: '#d8d8d8',
-      primary: {
-        main: '#456682',
-        dark: '#384A51',
-        contrastText: '#fff',
-      },
-      secondary: {
-        main: '#fff',
-        dark: '#f9f9f9',
-        contrastText: '#000',
-      },
-      text: {
-        primary: '#384a51',
-        secondary: '#767676',
-      },
-    },
+    palette,
     typography: {
       fontFamily: "'IBM Plex Sans', sans-serif",
       h1: {
@@ -82,7 +117,7 @@ export default responsiveFontSizes(
       caption: {
         fontSize: '0.8125rem',
         lineHeight: 1.308,
-        color: '#808080',
+        color: palette.text.secondary,
       },
       button: {
         textTransform: 'none',
@@ -103,12 +138,12 @@ export default responsiveFontSizes(
           },
         },
         outlinedPrimary: {
-          border: `1px solid #456682`,
+          border: `1px solid ${palette.primary.main}`,
         },
       },
       MuiAppBar: {
         colorPrimary: {
-          backgroundColor: '#f9f9f9',
+          backgroundColor: palette.background.default,
         },
       },
       MuiInputBase: {
@@ -140,11 +175,11 @@ export default responsiveFontSizes(
       },
       MuiTooltip: {
         tooltip: {
-          backgroundColor: '#384A51',
+          backgroundColor: palette.text.primary,
           fontSize: '0.8125rem',
         },
         arrow: {
-          color: '#384A51',
+          color: palette.text.primary,
         },
       },
       MuiTable: {
@@ -164,7 +199,7 @@ export default responsiveFontSizes(
           paddingBottom: basicTheme.spacing(2),
           paddingLeft: 0,
           paddingRight: basicTheme.spacing(4),
-          borderBottom: '1px solid #d8d8d860',
+          borderBottom: `1px solid ${palette.divider}60`,
         },
         body: {
           wordBreak: 'break-all',

diff --git a/...components/DirectoryHeader/DirectoryInput/SortDrawer/FilterPanel/FilterCheckbox/index.tsx b/...components/DirectoryHeader/DirectoryInput/SortDrawer/FilterPanel/FilterCheckbox/index.tsx
@@ -2,16 +2,16 @@ import React from 'react'
 import { IconButton, createStyles, makeStyles } from '@material-ui/core'
 import CheckIcon from '../../widgets/CheckIcon'
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme) =>
   createStyles({
     uncheckedIcon: {
       width: '20px',
       height: '20px',
       borderRadius: '2px',
-      border: 'solid 1px #384a51',
+      border: `solid 1px ${theme.palette.primary.dark}`,
     },
     filled: {
-      backgroundColor: '#384a51',
+      backgroundColor: theme.palette.primary.dark,
       display: 'flex',
       alignItems: 'center',
       justifyContents: 'center',

diff --git a/...omponents/DirectoryHeader/DirectoryInput/SortDrawer/FilterPanel/FilterCheckbox/styles.tsx b/...omponents/DirectoryHeader/DirectoryInput/SortDrawer/FilterPanel/FilterCheckbox/styles.tsx
@@ -1,15 +1,15 @@
 import { createStyles, makeStyles } from '@material-ui/core'
 
-export default makeStyles(() =>
+export default makeStyles((theme) =>
   createStyles({
     uncheckedIcon: {
       width: '20px',
       height: '20px',
       borderRadius: '2px',
-      border: 'solid 1px #384a51',
+      border: `solid 1px ${theme.palette.primary.dark}`,
     },
     filled: {
-      backgroundColor: '#384a51',
+      backgroundColor: theme.palette.primary.dark,
       display: 'flex',
       alignItems: 'center',
       justifyContents: 'center',

diff --git a/src/client/directory/components/DirectoryHeader/DirectoryInput/styles.tsx b/src/client/directory/components/DirectoryHeader/DirectoryInput/styles.tsx
@@ -93,7 +93,7 @@ export default makeStyles((theme) =>
     sortButtonSelected: {
       height: '100%',
       justifyContent: 'start',
-      background: '#f9f9f9',
+      background: theme.palette.background.default,
     },
     columnLabel: {
       paddingLeft: theme.spacing(3),

diff --git a/src/client/directory/components/DirectoryHeader/index.tsx b/src/client/directory/components/DirectoryHeader/index.tsx
@@ -35,12 +35,12 @@ type DirectoryHeaderStyleProps = {
 const useStyles = makeStyles((theme) =>
   createStyles({
     headerWrapper: {
-      backgroundColor: '#384a51',
+      backgroundColor: theme.palette.primary.dark,
       position: 'sticky',
       top: 0,
     },
     headerWrapperShort: {
-      backgroundColor: '#384a51',
+      backgroundColor: theme.palette.primary.dark,
       top: 0,
     },
     headerContent: {
@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) =>
       },
     },
     headerTextWrapper: {
-      color: '#f9f9f9',
+      color: theme.palette.background.default,
       marginBottom: theme.spacing(3),
       display: 'flex',
       alignItems: 'center',

diff --git a/src/client/directory/components/DirectoryResults/DirectoryTable/DirectoryTableRow/index.tsx b/src/client/directory/components/DirectoryResults/DirectoryTable/DirectoryTableRow/index.tsx
@@ -60,7 +60,7 @@ const useStyles = makeStyles((theme) =>
       borderBottom: '1px solid #d8d8d860',
       height: 'fit-content',
       '&:hover': {
-        backgroundColor: '#f9f9f9',
+        backgroundColor: theme.palette.background.default,
         cursor: 'pointer',
       },
     },
@@ -230,11 +230,19 @@ const DirectoryTableRow: FunctionComponent<DirectoryTableRowProps> = ({
           <div className={classes.IconCell}>
             {url?.isFile ? (
               <DirectoryFileIcon
-                color={url?.state === 'ACTIVE' ? '#384A51' : '#BBBBBB'}
+                color={
+                  url?.state === 'ACTIVE'
+                    ? theme.palette.primary.dark
+                    : '#BBBBBB'
+                }
               />
             ) : (
               <DirectoryUrlIcon
-                color={url?.state === 'ACTIVE' ? '#384A51' : '#BBBBBB'}
+                color={
+                  url?.state === 'ACTIVE'
+                    ? theme.palette.primary.dark
+                    : '#BBBBBB'
+                }
               />
             )}
           </div>

diff --git a/src/client/home/components/LandingGraphicSilver.tsx b/src/client/home/components/LandingGraphicSilver.tsx
@@ -78,9 +78,9 @@ const useStyles = makeStyles((theme) =>
       width: '150px',
       // Creates the half in colour-fill, half outside it effect.
       marginTop: 'calc(-44px / 2)',
-      backgroundColor: theme.palette.secondary.main,
+      backgroundColor: theme.palette.common.white,
       '&:hover': {
-        backgroundColor: theme.palette.secondary.main,
+        backgroundColor: theme.palette.common.white,
       },
     },
     signInTextContainer: {

diff --git a/src/client/home/index.tsx b/src/client/home/index.tsx
@@ -45,7 +45,11 @@ const HomePage: FunctionComponent = () => {
   }
 
   return (
-    <BaseLayout headerBackgroundType={isMobileView ? '#f9f9f9' : 'light'}>
+    <BaseLayout
+      headerBackgroundType={
+        isMobileView ? theme.palette.background.default : 'light'
+      }
+    >
       <LandingGraphicSilver />
       <div id="landing-bottom">
         <Section backgroundType="light">

diff --git a/src/client/user/components/AnnouncementModal/index.tsx b/src/client/user/components/AnnouncementModal/index.tsx
@@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) =>
         props.isFullScreenDialog ? 0 : theme.spacing(2),
     },
     headerWrapper: {
-      background: '#f9f9f9',
+      background: theme.palette.background.default,
       boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0.1)',
       [theme.breakpoints.up('sm')]: {
         background: 'unset',
@@ -103,7 +103,7 @@ const useStyles = makeStyles((theme) =>
       width: theme.spacing(16),
       marginTop: theme.spacing(3),
       backgroundColor: theme.palette.primary.dark,
-      color: theme.palette.secondary.dark,
+      color: theme.palette.background.default,
       '&:hover': {
         backgroundColor: theme.palette.primary.main,
       },