feat: add more palette customization options

lifinance · Dec 13, 2022 · 2794190 · 2794190
1 parent 7267013
commit 2794190
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/packages/widget-embedded/src/App.tsx b/packages/widget-embedded/src/App.tsx
@@ -94,6 +94,7 @@ export const App = () => {
           secondary: {
             main: secondary,
           },
+          ...widgetConfig.theme?.palette,
         },
         shape: {
           borderRadius,

diff --git a/packages/widget-embedded/src/config.ts b/packages/widget-embedded/src/config.ts
@@ -37,6 +37,13 @@ export const widgetBaseConfig: WidgetConfig = {
       // fee: 0.05
     },
   },
+  // theme: {
+  //   palette: {
+  //     background: {
+  //       paper: '#121212',
+  //     },
+  //   },
+  // },
   tokens: {
     featured: [
       // {

diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -115,6 +115,8 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
     palette: {
       mode,
       ...palette,
+      ...(mode === 'light' ? paletteLight : paletteDark),
+      ...theme.palette,
       primary: {
         main: primaryMainColor,
         light: primaryLightColor,
@@ -135,7 +137,6 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
           0.2,
         ),
       },
-      ...(mode === 'light' ? paletteLight : paletteDark),
     },
     shape: {
       ...shape,

diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts
@@ -31,7 +31,10 @@ export type HiddenUIType = `${HiddenUI}`;
 
 export type Appearance = PaletteMode | 'auto';
 export type ThemeConfig = {
-  palette?: Pick<PaletteOptions, 'primary' | 'secondary'>;
+  palette?: Pick<
+    PaletteOptions,
+    'grey' | 'background' | 'text' | 'secondary' | 'primary'
+  >;
   shape?: Shape;
   typography?: TypographyOptions;
 };