customisation design for navbar (#2873)

Co-authored-by: nicholas.chew <nicholas.chew@grabtaxi.com>

packages/core/src/layout/Sidebar/Items.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => {
 
   return {
     root: {
-      color: '#b5b5b5',
+      color: theme.palette.navigation.color,
       display: 'flex',
       flexFlow: 'row nowrap',
       alignItems: 'center',
@@ -96,7 +96,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => {
     selected: {
       '&$root': {
         borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
-        color: '#ffffff',
+        color: theme.palette.navigation.selectedColor,
       },
       '&$closed': {
         width: drawerWidthClosed - selectedIndicatorWidth,

packages/theme/src/themes.ts

@@ -64,6 +64,8 @@ export const lightTheme = createTheme({
     navigation: {
       background: '#171717',
       indicator: '#9BF0E1',
+      color: '#b5b5b5',
+      selectedColor: '#FFF',
     },
     pinSidebarButton: {
       icon: '#181818',
@@ -122,6 +124,8 @@ export const darkTheme = createTheme({
     navigation: {
       background: '#424242',
       indicator: '#9BF0E1',
+      color: '#b5b5b5',
+      selectedColor: '#FFF',
     },
     pinSidebarButton: {
       icon: '#404040',

packages/theme/src/types.ts

@@ -46,6 +46,8 @@ type PaletteAdditions = {
   navigation: {
     background: string;
     indicator: string;
+    color: string;
+    selectedColor: string;
   };
   tabbar: {
     indicator: string;