add tokens

Signed-off-by: aabidsofi19 <mailtoaabid01@gmail.com>

Author: aabidsofi19

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

@@ -272,15 +272,15 @@ export type ThemePalette = PaletteOptions
 
 export const lightModePalette: PaletteOptions = {
 
-  surface: {
-    primary: Colors.charcoal[100],
-    secondary: Colors.charcoal[90],
-    tertiary: Colors.charcoal[80],
-    tint: Colors.charcoal[70],
-    elevated: Colors.WHITE,
-    overlay: alpha(Colors.charcoal[90], 0.8),
-    inverse: Colors.charcoal[10]
-  },
+    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,
@@ -292,8 +292,8 @@ export const lightModePalette: PaletteOptions = {
     },
 
     navigation: {
-        primary: Colors.charcoal[100],
-        secondary: Colors.charcoal[90],
+        primary: "#252e31",
+        secondary: "#294957",
         active: Colors.KEPPEL,
         hover: Colors.keppel[50]
     },
@@ -432,8 +432,8 @@ export const darkModePalette: PaletteOptions = {
         tertiary: Colors.charcoal[30],
         elevated: Colors.charcoal[40],
         overlay: alpha(Colors.charcoal[20], 0.8),
-        tint: Colors.charcoal[50],
-        inverse: Colors.WHITE
+        inverse: Colors.WHITE,
+        tint: `linear-gradient(90deg, ${Colors.charcoal[30]} 0%, ${Colors.accentGrey[30]} 100%)`,
     },
     interactive: {
         primary: Colors.KEPPEL,

src/theme/theme.ts

@@ -1,4 +1,4 @@
-import { Interactiveness, PaletteMode, createTheme, alpha,darken } from '@mui/material';
+import { PaletteMode, createTheme, alpha,darken } from '@mui/material';
 import { components } from './components';
 import { darkModePalette, lightModePalette, ThemePalette } from './palette';
 import { typography } from './typography';
@@ -30,7 +30,7 @@ export type PrimitivePalette = {
      * Should be visually distinct from `background` to ensure 
      * navigation elements stand out. 
      */
-    NavigationBar: string;
+    navigationBar: string;
 
 
     /**
@@ -125,20 +125,15 @@ export type PrimitivePalette = {
      */
     foreground: string;
 
-    // @deprecated same as primary
-    default?: string;
-    // @deprecated same as secondary
-    hover?: string;
-
 };
 
 import * as Colors from './colors';
 
 /**
  * Layer5 ( primitives ) defines the raw, brand-level colors used in the UI.
  */
-export const SistentDefaultPrimitivePalette: PrimitivePalette = {
-    NavigationBar: "#252e31", // used for app navigation bar background
+export const SistentDefaultPrimitivePaletteLight: PrimitivePalette = {
+    navigationBar: "#252e31", // used for app navigation bar background
 
 
     primary: Colors.KEPPEL, // maps to background.brand.default, success.default
@@ -155,39 +150,26 @@ export const SistentDefaultPrimitivePalette: PrimitivePalette = {
 };
 
 
-export const digitalOceanPrimitives: PrimitivePalette = {
-    /** Distinct dark navy so the nav stands out from a white page background. */
-    NavigationBar: "#031B4E",
-
-    /** DigitalOcean "Ocean Blue". */
-    primary: "#0069FF",
-    /** White text/icons on primary. */
-    primaryInverted: "#FFFFFF",
+export  const SistentDefaultPrimitivePaletteDark: PrimitivePalette = {
+    navigationBar: "#252e31", // used for app navigation bar background
 
-    /** Slate/dark blue-gray used for secondary emphasis. */
-    secondary: "#2E384D",
-    /** White text/icons on secondary. */
-    secondaryInverted: "#FFFFFF",
+    primary: Colors.KEPPEL, // maps to background.brand.default, success.default
+    primaryInverted: Colors.charcoal[100], // used for text on KEPL background
 
-    /** Bright cyan accent used for highlights/CTAs. */
-    accent: "#00A8E8",
-    /** White text/icons on accent. */
-    accentInverted: "#FFFFFF",
+    secondary: Colors.DARK_SLATE_GRAY, // used in secondary.main, text.secondary, borders
+    secondaryInverted: Colors.charcoal[100], // for text on secondary-colored backgrounds
 
-    /** Light UI surface (DO uses a clean white background in light mode). */
-    background: "#FFFFFF",
-    /** Default content color (deep navy used across DO’s UI/text). */
-    foreground: "#031B4E",
+    accent: Colors.saffron[40], // from background.cta.default
+    accentInverted: Colors.charcoal[100], // text on accent
 
-    // @deprecated same as primary
-    default: "#0069FF",
-    // @deprecated same as secondary
-    hover: "#2E384D"
+    background: Colors.charcoal[10], // app background, cards, tabs
+    foreground: Colors.charcoal[100] // primary text color on background
 };
 
-export const createCustomTheme = (mode: PaletteMode, primitives: PrimitivePalette = SistentDefaultPrimitivePalette) => {
+export const createCustomTheme = (mode: PaletteMode, primitives?: PrimitivePalette) => {
     const basePalette = mode == 'light' ? lightModePalette : darkModePalette;
-    const p = SistentDefaultPrimitivePalette
+    const defaultPrimitives = mode == 'light' ? SistentDefaultPrimitivePaletteLight : SistentDefaultPrimitivePaletteDark;
+    const p = primitives ? _.merge({},defaultPrimitives , primitives, ) : undefined;
 
     console.log('Creating theme with mode:', mode, 'and brandPalette:', primitives);
 
@@ -199,6 +181,7 @@ export const createCustomTheme = (mode: PaletteMode, primitives: PrimitivePalett
             tertiary: darken(p.background, 0.1),
             elevated: p.background,
             overlay: alpha(p.background, 0.8),
+
             tint: `linear-gradient(90deg, ${alpha(p.secondary,0.8)} 0%, ${p.secondary} 100%)`,
             inverse: p.foreground,
         },
@@ -213,7 +196,7 @@ export const createCustomTheme = (mode: PaletteMode, primitives: PrimitivePalett
         },
 
         navigation: {
-            primary: p.NavigationBar,
+            primary: p.navigationBar,
             secondary: p.secondary,
             active: p.primary,
             hover: alpha(p.primary, 0.85),
@@ -271,7 +254,7 @@ export const createCustomTheme = (mode: PaletteMode, primitives: PrimitivePalett
 
             surfaces: p.background,
 
-            appNavigationBar: p.NavigationBar,
+            appNavigationBar: p.navigationBar,
             secondaryAppNavigationBar: p.secondary,
 
         },