chore: fix theme config issues

Author: brionmario

packages/javascript/src/index.ts

@@ -41,6 +41,7 @@ export {OIDCEndpoints} from './models/oidc-endpoints';
 export {Store} from './models/store';
 export {User} from './models/user';
 export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
+export {RecursivePartial} from './models/utility-types';
 
 export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
 

packages/javascript/src/models/config.ts

@@ -17,6 +17,7 @@
  */
 
 import {ThemeConfig, ThemeMode} from '../theme/types';
+import { RecursivePartial } from './utility-types';
 
 export interface BaseConfig<T = unknown> {
   /**
@@ -79,7 +80,7 @@ export interface ThemePreferences {
   /**
    * Theme overrides to customize the default theme
    */
-  overrides?: Partial<ThemeConfig>;
+  overrides?: RecursivePartial<ThemeConfig>;
 }
 
 export interface Preferences {

packages/javascript/src/models/utility-types.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export type RecursivePartial<T> = {
+  [P in keyof T]?: RecursivePartial<T[P]>;
+};

packages/javascript/src/theme/createTheme.ts

@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import { RecursivePartial } from '../models/utility-types';
 import {Theme, ThemeConfig} from './types';
 
 const lightTheme: ThemeConfig = {
@@ -24,6 +25,10 @@ const lightTheme: ThemeConfig = {
       main: '#1a73e8',
       contrastText: '#ffffff',
     },
+    secondary: {
+      main: '#424242',
+      contrastText: '#ffffff',
+    },
     background: {
       surface: '#f5f5f5',
       disabled: '#f0f0f0',
@@ -58,6 +63,10 @@ const darkTheme: ThemeConfig = {
       main: '#1a73e8',
       contrastText: '#ffffff',
     },
+    secondary: {
+      main: '#424242',
+      contrastText: '#ffffff',
+    },
     background: {
       surface: '#121212',
       disabled: '#1f1f1f',
@@ -86,12 +95,14 @@ const darkTheme: ThemeConfig = {
   },
 };
 
-const toCssVariables = (theme: ThemeConfig): Record<string, string> => {
+const toCssVariables = (theme: RecursivePartial<ThemeConfig>): Record<string, string> => {
   const cssVars: Record<string, string> = {};
 
   // Colors
   cssVars['--asgardeo-color-primary-main'] = theme.colors.primary.main;
   cssVars['--asgardeo-color-primary-contrastText'] = theme.colors.primary.contrastText;
+  cssVars['--asgardeo-color-secondary-main'] = theme.colors.secondary.main;
+  cssVars['--asgardeo-color-secondary-contrastText'] = theme.colors.secondary.contrastText;
   cssVars['--asgardeo-color-background-surface'] = theme.colors.background.surface;
   cssVars['--asgardeo-color-background-disabled'] = theme.colors.background.disabled;
   cssVars['--asgardeo-color-background-body-main'] = theme.colors.background.body.main;
@@ -113,14 +124,18 @@ const toCssVariables = (theme: ThemeConfig): Record<string, string> => {
   return cssVars;
 };
 
-const createTheme = (config: Partial<ThemeConfig> = {}, isDark = false): Theme => {
+const createTheme = (config: RecursivePartial<ThemeConfig> = {}, isDark = false): Theme => {
   const baseTheme = isDark ? darkTheme : lightTheme;
   const mergedConfig = {
     ...baseTheme,
     ...config,
     colors: {
       ...baseTheme.colors,
       ...config.colors,
+      secondary: {
+        ...baseTheme.colors.secondary,
+        ...(config.colors?.secondary || {}),
+      },
     },
     spacing: {
       ...baseTheme.spacing,
@@ -130,7 +145,7 @@ const createTheme = (config: Partial<ThemeConfig> = {}, isDark = false): Theme =
       ...baseTheme.borderRadius,
       ...config.borderRadius,
     },
-  };
+  } as ThemeConfig;
 
   return {
     ...mergedConfig,

packages/javascript/src/theme/types.ts

@@ -21,6 +21,10 @@ export interface ThemeColors {
     main: string;
     contrastText: string;
   };
+  secondary: {
+    main: string;
+    contrastText: string;
+  };
   background: {
     surface: string;
     disabled: string;

packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx

@@ -67,7 +67,7 @@ export interface BaseUserProfileProps {
   onSubmit?: (data: any) => void;
   saveButtonText?: string;
   cancelButtonText?: string;
-  onUpdate: (payload: any) => Promise<void>;
+  onUpdate?: (payload: any) => Promise<void>;
 }
 
 const BaseUserProfile: FC<BaseUserProfileProps> = ({
@@ -193,7 +193,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   const cancelButtonStyle = useMemo(
     () => ({
       ...buttonStyle,
-      backgroundColor: theme.colors.background.surface,
+      backgroundColor: theme.colors.secondary.main,
       border: `1px solid ${theme.colors.border}`,
     }),
     [theme, buttonStyle],

packages/react/src/theme/ThemeProvider.tsx

@@ -17,11 +17,11 @@
  */
 
 import {FC, PropsWithChildren, ReactElement, useEffect, useMemo, useState} from 'react';
-import {createTheme, Theme, ThemeConfig} from '@asgardeo/browser';
+import {createTheme, Theme, ThemeConfig, RecursivePartial} from '@asgardeo/browser';
 import ThemeContext from './ThemeContext';
 
 export interface ThemeProviderProps {
-  theme?: Partial<ThemeConfig>;
+  theme?: RecursivePartial<ThemeConfig>;
   defaultColorScheme?: 'light' | 'dark';
 }
 

recipes/vite-react-ts/src/main.tsx

@@ -13,6 +13,14 @@ createRoot(document.getElementById('root')!).render(
       preferences={{
         theme: {
           mode: 'dark',
+          overrides: {
+            colors: {
+              primary: {
+                main: '#6200ea',
+                contrastText: '#ffffff',
+              },
+            },
+          },
         },
       }}
     >