Merge pull request #1138 from layer5io/branded-theme

Make theme Brandable and customizable

Author: leecalcote

src/custom/Modal/index.tsx

@@ -74,7 +74,7 @@ const FullscreenExitButton = styled(FullScreenExitIcon)(({ theme }) => ({
 }));
 
 export const ModalStyledHeader = styled('div')(({ theme }) => ({
-  background: theme.palette.mode === 'light' ? lightModalGradient.header : darkModalGradient.header,
+  background: theme.palette.surface.tint,
   color: '#eee',
   display: 'flex',
   justifyContent: 'space-between',
@@ -119,7 +119,7 @@ export const useModal = ({ headerIcon }: { headerIcon: React.ReactNode }): UseMo
 
 export const ModalBody = styled(Paper)(({ theme }) => ({
   padding: '1rem',
-  backgroundColor: theme.palette.background.surfaces,
+  backgroundColor: theme.palette.surface.primary,
   overflowY: 'auto',
   height: '100%',
   scrollbarWidth: 'none',
@@ -134,9 +134,7 @@ const StyledFooter = styled('div', {
 })<ModalFooterProps>(({ theme, variant, hasHelpText }) => ({
   background:
     variant === 'filled'
-      ? theme.palette.mode === 'light'
-        ? lightModalGradient.fotter
-        : darkModalGradient.fotter
+      ? (theme.palette.surface.tint)
       : 'transparent',
   display: 'flex',
   alignItems: 'center',

src/theme/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import { EmotionCache } from '@emotion/react';
-import { CssBaseline, Interactiveness, PaletteMode, Theme, ThemeProvider } from '@mui/material';
+import { CssBaseline,  PaletteMode, Theme, ThemeProvider } from '@mui/material';
 import React from 'react';
-import { createCustomTheme } from './theme';
+import { createCustomTheme,PrimitivePalette } from './theme';
 
 interface SistentProviderContextType {
   emotionCache?: EmotionCache;
@@ -13,7 +13,7 @@ export interface SistentThemeProviderProps {
   children: React.ReactNode;
   emotionCache?: EmotionCache;
   initialMode?: PaletteMode;
-  customTheme?: Interactiveness;
+  customTheme?: PrimitivePalette;
 }
 
 function SistentThemeProvider({
@@ -23,7 +23,7 @@ function SistentThemeProvider({
   customTheme
 }: SistentThemeProviderProps): JSX.Element {
   const theme = React.useMemo<Theme>(
-    () => createCustomTheme(initialMode, customTheme),
+    () => createCustomTheme(initialMode, customTheme ),
     [initialMode, customTheme]
   );
   return (

src/theme/index.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 export { darkModePalette, lightModePalette } from './palette';
 export { typography } from './typography';
-
+export {type PrimitivePalette} from "./theme";
 export * from './colors';
 export {
   default as SistentThemeProvider,

src/theme/palette.ts

@@ -47,6 +47,9 @@ declare module '@mui/material/styles' {
     error?: Interactiveness;
     code?: string;
     surfaces?: string;
+
+    appNavigationBar?: string;
+    secondaryAppNavigationBar?: string;
   }
 
   // Defines the extended text color options used in the palette.
@@ -141,6 +144,9 @@ declare module '@mui/material/styles' {
     To define any additional custom color options, you can extend the interface here.
   */
   interface Palette {
+    surface: SurfaceTokens;
+    interactive: InteractiveTokens;
+    navigation: NavigationTokens;
     border: {
       default: string;
       strong: string;
@@ -164,9 +170,74 @@ declare module '@mui/material/styles' {
       };
     };
   }
+     
+     // surface tokens need to have enough contrast 
+    // with text and interactive elements
+ type    SurfaceTokens = {
+
+       /** main page background, content containers (pure bg color) */
+      primary: string;
+      
+      /** secondary surfaces (slightly darker bg) */
+      secondary: string;
+      
+      /** tertiary surfaces (even darker bg) */
+      tertiary: string;
+      
+      /** floating elements with depth (bg + shadow) */
+      elevated: string;
+      
+      /** modal backdrops (semi-transparent bg) */
+      overlay: string;
+
+      /** highlight surfaces (eg. modal headers , tabs, ) */
+      tint: string;
+      
+      /** high contrast alternative (fg as bg) */
+      inverse: string;
+    }
+
+ type InteractiveTokens  =  {
+        /** default interactive elements (primary color) */
+        primary: string;
+    
+        /** hover state for interactive elements (primary hover tint) */
+        hover: string;
+    
+        /** disabled state for interactive elements (primary disabled tint) */
+        disabled?: string;
+    
+        /** pressed state for interactive elements (primary pressed tint) */
+        pressed: string;
+    
+        /** secondary interactive elements (secondary color) */
+        secondary: string;
+    
+        /** tertiary interactive elements (tertiary color) */
+        tertiary: string;
+    };
+
+type  NavigationTokens =  {
+        /** main navigation bar background */
+        primary: string;
+    
+        /** secondary navigation bar background */
+        secondary: string;
+
+        /** active navigation item background */
+        active: string;
+
+        /** hover state for navigation items */ 
+        hover: string;
+    };
 
   // Defines the options available for the palette.
   interface PaletteOptions {
+
+    surface: SurfaceTokens;
+    interactive: InteractiveTokens;
+    navigation: NavigationTokens;
+
     border: {
       default: string;
       strong: string;
@@ -177,8 +248,11 @@ declare module '@mui/material/styles' {
         alt: string;
       };
     };
+
     icon: {
       default: string;
+      dualTone?: string; // For icons with two colors
+      dualToneInverse?: string; // For icons with two colors in inverse mode (eg on primary colored bg)
       secondary: string;
       brand: string;
       inverse: string;
@@ -192,7 +266,38 @@ declare module '@mui/material/styles' {
   }
 }
 
+export type ThemePalette = PaletteOptions 
+
+
+
 export const lightModePalette: PaletteOptions = {
+
+    surface: {
+        primary: Colors.charcoal[100],
+        secondary: Colors.charcoal[90],
+        tertiary: Colors.charcoal[80],
+        elevated: Colors.WHITE,
+        overlay: alpha(Colors.charcoal[90], 0.8),
+        inverse: Colors.charcoal[10],
+        tint: `linear-gradient(90deg, ${Colors.TEAL_BLUE} 0%, ${Colors.DARK_TEAL} 100%)`
+    } ,
+
+    interactive: {
+        primary: Colors.KEPPEL,
+        hover: Colors.keppel[50],
+        disabled: Colors.charcoal[90],
+        pressed: Colors.keppel[60],
+        secondary: Colors.keppel[40],
+        tertiary: Colors.keppel[70]
+    },
+
+    navigation: {
+        primary: "#252e31",
+        secondary: "#294957",
+        active: Colors.KEPPEL,
+        hover: Colors.keppel[50]
+    },
+
   primary: {
     main: Colors.KEPPEL
   },
@@ -305,6 +410,8 @@ export const lightModePalette: PaletteOptions = {
   },
   icon: {
     default: Colors.accentGrey[10],
+    dualTone: Colors.KEPPEL,
+    dualToneInverse: Colors.charcoal[10],
     secondary: Colors.charcoal[40],
     brand: Colors.keppel[40],
     inverse: Colors.charcoal[100],
@@ -318,6 +425,32 @@ export const lightModePalette: PaletteOptions = {
 };
 
 export const darkModePalette: PaletteOptions = {
+
+    surface: {
+        primary: Colors.charcoal[10],
+        secondary: Colors.charcoal[20],
+        tertiary: Colors.charcoal[30],
+        elevated: Colors.charcoal[40],
+        overlay: alpha(Colors.charcoal[20], 0.8),
+        inverse: Colors.WHITE,
+        tint: `linear-gradient(90deg, ${Colors.charcoal[30]} 0%, ${Colors.accentGrey[30]} 100%)`,
+    },
+    interactive: {
+        primary: Colors.KEPPEL,
+        hover: Colors.keppel[50],
+        disabled: Colors.charcoal[30],
+        pressed: Colors.keppel[60],
+        secondary: Colors.keppel[20],
+        tertiary: Colors.keppel[10]
+    },
+
+    navigation: {
+        primary: Colors.charcoal[10],
+        secondary: Colors.charcoal[20],
+        active: Colors.KEPPEL,
+        hover: Colors.keppel[50]
+    },
+
   primary: {
     main: Colors.KEPPEL
   },
@@ -430,6 +563,8 @@ export const darkModePalette: PaletteOptions = {
   icon: {
     default: Colors.charcoal[80],
     secondary: Colors.charcoal[70],
+    dualTone: Colors.KEPPEL,
+    dualToneInverse: Colors.charcoal[100],
     brand: Colors.keppel[40],
     inverse: Colors.charcoal[10],
     weather: Colors.saffron[40],