[HFRONT-1405]: support for customizing color schema palette

.storybook/preview.tsx

@@ -4,6 +4,7 @@ import type { Parameters } from '@storybook/react';
 import { themes } from '@storybook/theming';
 import React from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
+import { css, Global } from '@emotion/core';
 import { ChakraThemeProvider } from '../src/chakra';
 
 import ThemeProvider from '../src/theme/ThemeProvider';
@@ -30,6 +31,12 @@ export const parameters: Parameters = {
 export const decorators = [
   (Story) => (
     <>
+      <Global
+        styles={css`
+          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');
+          @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&display=swap');
+        `}
+      />
       <ColorModeScript />
       <ChakraThemeProvider>
         <ThemeProvider colorMode={useDarkMode() ? 'dark' : 'light'}>

src/components/header/index.tsx

@@ -13,6 +13,7 @@ export interface HeaderProps extends Omit<BoxProps, 'css'> {
   menuAction: React.ReactNode;
   logoAction?: () => void;
   sx?: SxStyleProp;
+  logo?: React.ReactNode;
 }
 
 const Header = ({
@@ -21,12 +22,13 @@ const Header = ({
   actions,
   menuAction,
   logoAction,
+  logo,
   sx = {},
 }: HeaderProps) => (
   <Box sx={R.mergeDeepRight(styles as object, sx as object)} variant="header">
     {/* Left Section */}
     <Box sx={leftSectionStyles} onClick={logoAction}>
-      <Logo withName={true} height={35} width={160} />
+      {logo ?? <Logo withName={true} height={35} width={160} />}
     </Box>
     <Box
       sx={{

src/theme/ThemeProvider.tsx

@@ -1,20 +1,24 @@
 import { useColorMode } from '@chakra-ui/react';
-import { css, Global } from '@emotion/core';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 import { useEffect } from 'react';
+import * as R from 'ramda';
 
 import defaultTheme, { darkTheme } from './theme';
+import { ITheme } from './types';
+import { DeepPartial } from '../utils/type-utils';
 
 export type ThemeVariant = 'dark' | 'light';
 
 export interface ThemeProviderProps {
   children: React.ReactNode;
   colorMode?: ThemeVariant;
+  theme?: { light: DeepPartial<ITheme>; dark: DeepPartial<ITheme> };
 }
 
 const ThemeProvider = ({
   children,
   colorMode: colorModeFromProps,
+  theme: themeFromProps = { light: defaultTheme, dark: darkTheme },
 }: ThemeProviderProps) => {
   const { colorMode, setColorMode } = useColorMode();
 
@@ -24,20 +28,13 @@ const ThemeProvider = ({
 
   const colorModeToUse = colorModeFromProps ?? colorMode; // the outer one overrides inner state
 
+  const themeToUse = R.mergeDeepLeft(
+    themeFromProps[colorModeToUse],
+    colorModeToUse === 'light' ? defaultTheme : darkTheme,
+  );
+
   return (
-    <>
-      <Global
-        styles={css`
-          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');
-          @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&display=swap');
-        `}
-      />
-      <EmotionThemeProvider
-        theme={colorModeToUse === 'light' ? defaultTheme : darkTheme}
-      >
-        {children}
-      </EmotionThemeProvider>
-    </>
+    <EmotionThemeProvider theme={themeToUse}>{children}</EmotionThemeProvider>
   );
 };
 

src/utils/type-utils.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};