@lifi/widget 3.19.0-beta.3 → 3.19.0

package/src/themes/createTheme.ts

@@ -1,4 +1,9 @@
-import type { CSSObject, Shape, SimplePaletteColorOptions } from '@mui/material'
+import type {
+  CSSObject,
+  PaletteMode,
+  Shape,
+  SimplePaletteColorOptions,
+} from '@mui/material'
 import {
   alpha,
   buttonClasses,
@@ -6,6 +11,7 @@ import {
   css,
   darken,
   dialogActionsClasses,
+  getContrastRatio,
   keyframes,
   lighten,
   tabsClasses,
@@ -33,86 +39,30 @@ const enterKeyframe = keyframes`
   }
 `
 
-export const createTheme = (widgetTheme: WidgetTheme = {}) => {
-  const configuredPaletteLight =
-    widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette
-  const configuredPaletteDark =
-    widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette
-
-  const primaryMainColorLight =
-    (configuredPaletteLight?.primary as SimplePaletteColorOptions)?.main ??
-    palette.primary.main
-  const primaryMainColorDark =
-    (configuredPaletteDark?.primary as SimplePaletteColorOptions)?.main ??
+export const createTheme = (
+  mode: PaletteMode,
+  widgetTheme: WidgetTheme = {}
+) => {
+  const primaryMainColor =
+    (widgetTheme.palette?.primary as SimplePaletteColorOptions)?.main ??
     palette.primary.main
-
-  const primaryLightenColorLight = lighten(primaryMainColorLight, 0.84)
-  const primaryDarkenColorLight = darken(primaryMainColorLight, 0.2)
-  const primaryLightenColorDark =
-    primaryMainColorLight === primaryMainColorDark
-      ? primaryLightenColorLight
-      : lighten(primaryMainColorDark, 0.84)
-  const primaryDarkenColorDark =
-    primaryMainColorLight === primaryMainColorDark
-      ? primaryDarkenColorLight
-      : darken(primaryMainColorDark, 0.2)
-
-  const secondaryMainColorLight =
-    (configuredPaletteLight?.secondary as SimplePaletteColorOptions)?.main ??
+  const primaryLightColor = lighten(primaryMainColor, 0.84)
+  const primaryDarkColor = darken(primaryMainColor, 0.2)
+  const secondaryMainColor =
+    (widgetTheme.palette?.secondary as SimplePaletteColorOptions)?.main ??
     palette.secondary.main
-  const secondaryMainColorDark =
-    (configuredPaletteDark?.secondary as SimplePaletteColorOptions)?.main ??
-    palette.secondary.main
-
-  const secondaryLightenColorLight = lighten(secondaryMainColorLight, 0.84)
-  const secondaryDarkenColorLight = darken(secondaryMainColorLight, 0.2)
-  const secondaryLightenColorDark =
-    secondaryMainColorLight === secondaryMainColorDark
-      ? secondaryLightenColorLight
-      : lighten(secondaryMainColorDark, 0.84)
-  const secondaryDarkenColorDark =
-    secondaryMainColorLight === secondaryMainColorDark
-      ? secondaryDarkenColorLight
-      : darken(secondaryMainColorDark, 0.2)
+  const contrastButtonColor =
+    getContrastRatio(palette.common.white, primaryMainColor) >= 3
+      ? palette.common.white
+      : palette.common.black
+  const contrastTextButtonColor =
+    getContrastRatio(palette.common.white, alpha(primaryMainColor, 0.08)) >= 3
+      ? palette.common.white
+      : palette.common.black
+  const borderRadiusSecondary =
+    widgetTheme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary
 
   const theme = createMuiTheme({
-    cssVariables: { cssVarPrefix: 'lifi', colorSchemeSelector: 'class' },
-    colorSchemes: {
-      light: {
-        palette: {
-          ...palette,
-          ...paletteLight,
-          ...(widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette),
-          primary: {
-            main: primaryMainColorLight,
-            light: primaryLightenColorLight,
-            dark: primaryDarkenColorLight,
-          },
-          secondary: {
-            main: secondaryMainColorLight,
-            light: secondaryLightenColorLight,
-            dark: secondaryDarkenColorLight,
-          },
-        },
-      },
-      dark: {
-        palette: {
-          ...palette,
-          ...paletteDark,
-          ...(widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette),
-          primary: {
-            main: primaryMainColorDark,
-            light: primaryLightenColorDark,
-            dark: primaryDarkenColorDark,
-          },
-          secondary: {
-            main: secondaryMainColorDark,
-            light: secondaryLightenColorDark,
-            dark: secondaryDarkenColorDark,
-          },
-        },
-      },
-    },
     container: widgetTheme.container,
     header: widgetTheme.header,
     navigation: {
@@ -123,6 +73,22 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
       fontFamily: 'Inter var, Inter, sans-serif',
       ...widgetTheme.typography,
     },
+    palette: {
+      mode,
+      ...palette,
+      ...(mode === 'light' ? paletteLight : paletteDark),
+      ...widgetTheme.palette,
+      primary: {
+        main: primaryMainColor,
+        light: primaryLightColor,
+        dark: primaryDarkColor,
+      },
+      secondary: {
+        main: secondaryMainColor,
+        light: lighten(secondaryMainColor, 0.84),
+        dark: darken(secondaryMainColor, 0.2),
+      },
+    },
     shape: {
       ...shape,
       ...widgetTheme.shape,
@@ -169,9 +135,8 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
               ?.root as CSSObject
             const rootHover = root?.['&:hover']
             return {
-              backgroundColor: theme.vars.palette.background.paper,
-              backgroundImage: 'none',
-              borderRadius: theme.vars.shape.borderRadius,
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: theme.shape.borderRadius,
               overflow: 'hidden',
               position: 'relative',
               boxSizing: 'border-box',
@@ -192,20 +157,17 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
                   ownerState.variant === 'filled') && {
                   '&:hover': {
                     cursor: 'pointer',
-                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
-                    ...theme.applyStyles('dark', {
-                      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,
-                    }),
+                    backgroundColor:
+                      theme.palette.mode === 'light'
+                        ? darken(theme.palette.background.paper, 0.02)
+                        : lighten(theme.palette.background.paper, 0.02),
                   },
                 }),
               ...(!!ownerState.onClick &&
                 ownerState.variant === 'elevation' && {
                   '&:hover': {
                     cursor: 'pointer',
-                    filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
-                    ...theme.applyStyles('dark', {
-                      filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.08))`,
-                    }),
+                    filter: `drop-shadow(0 1px 4px ${alpha(theme.palette.common.black, 0.08)})`,
                   },
                 }),
               ...(typeof root === 'object' && root),
@@ -213,9 +175,6 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
                 !!rootHover && {
                   '&:hover': {
                     ...rootHover,
-                    ...theme.applyStyles('dark', {
-                      ...rootHover,
-                    }),
                   },
                 }),
               ...(!ownerState.onClick && {
@@ -230,10 +189,10 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
             style: ({ theme }) => ({
               borderWidth: 1,
               borderStyle: 'solid',
-              borderColor: theme.vars.palette.grey[300],
-              ...theme.applyStyles('dark', {
-                borderColor: theme.vars.palette.grey[800],
-              }),
+              borderColor:
+                theme.palette.mode === 'light'
+                  ? theme.palette.grey[300]
+                  : theme.palette.grey[800],
             }),
           },
           {
@@ -241,10 +200,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
             style: ({ theme }) => ({
               border: 'none',
               boxShadow: 'none',
-              filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04))`,
-              ...theme.applyStyles('dark', {
-                filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04))`,
-              }),
+              filter: `drop-shadow(0 1px 4px ${alpha(theme.palette.common.black, 0.04)})`,
             }),
           },
           {
@@ -277,50 +233,51 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
           ...widgetTheme.components?.MuiButton?.defaultProps,
         },
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            borderRadius: theme.vars.shape.borderRadiusSecondary,
+          root: ({ ownerState }) => ({
+            borderRadius: borderRadiusSecondary,
             textTransform: 'none',
             fontSize: 16,
             fontWeight: 600,
             '&.Mui-disabled, &.Mui-disabled:hover': {
-              color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.56)`,
+              color: alpha(
+                mode === 'light' ? palette.common.black : palette.common.white,
+                0.56
+              ),
               cursor: 'not-allowed',
               pointerEvents: 'auto',
             },
             [`&.${buttonClasses.loading}.Mui-disabled`]: {
-              backgroundColor: theme.vars.palette.primary.main,
-              color: theme.palette.getContrastText(theme.palette.primary.main),
+              backgroundColor: primaryMainColor,
+              color: contrastButtonColor,
               cursor: 'auto',
               pointerEvents: 'auto',
             },
             [`.${buttonClasses.loadingIndicator}`]: {
-              color: theme.palette.getContrastText(theme.palette.primary.main),
+              color: contrastButtonColor,
             },
             [`&.${buttonClasses.root}.${buttonClasses.loading}`]: {
               color: 'transparent',
             },
             ...getStyleOverrides('MuiButton', 'root', widgetTheme, ownerState),
           }),
-          text: ({ theme, ownerState }) => ({
-            backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
-            color: theme.vars.palette.primary.main,
+          text: ({ ownerState }) => ({
+            backgroundColor:
+              mode === 'light'
+                ? alpha(primaryMainColor, 0.08)
+                : alpha(primaryMainColor, 0.42),
             '&:hover': {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.12)`,
+              backgroundColor:
+                mode === 'light'
+                  ? alpha(primaryMainColor, 0.12)
+                  : alpha(primaryMainColor, 0.56),
             },
-            ...theme.applyStyles('dark', {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.42)`,
-              color: theme.palette.getContrastText(
-                alpha(theme.palette.primary.main, 0.08)
-              ),
-              '&:hover': {
-                backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.56)`,
-              },
-            }),
+            color:
+              mode === 'light' ? primaryMainColor : contrastTextButtonColor,
             ...getStyleOverrides('MuiButton', 'text', widgetTheme, ownerState),
           }),
           contained: ({ ownerState }) => ({
             '&:hover': {
-              color: theme.palette.getContrastText(theme.palette.primary.main),
+              color: contrastButtonColor,
             },
             ...getStyleOverrides(
               'MuiButton',
@@ -379,12 +336,12 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
             fontWeight: 600,
             fontSize: '1.125rem',
             lineHeight: '1.2778',
-            color: theme.vars.palette.text.primary,
+            color: theme.palette.text.primary,
           }),
           secondary: ({ theme }) => ({
             fontWeight: 500,
             fontSize: '0.75rem',
-            color: theme.vars.palette.text.secondary,
+            color: theme.palette.text.secondary,
           }),
         },
       },
@@ -410,25 +367,10 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
       MuiMenu: {
         styleOverrides: {
           paper: ({ theme }) => ({
-            backgroundColor: theme.vars.palette.background.paper,
-            backgroundImage: 'none',
+            backgroundColor: theme.palette.background.default,
           }),
         },
       },
-      MuiDrawer: {
-        styleOverrides: {
-          paper: {
-            backgroundImage: 'none',
-          },
-        },
-      },
-      MuiPaper: {
-        styleOverrides: {
-          root: {
-            backgroundImage: 'none',
-          },
-        },
-      },
       MuiTabs: {
         ...widgetTheme.components?.MuiTabs,
         styleOverrides: {
@@ -441,22 +383,22 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
               ownerState
             )
             return {
-              backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-              ...theme.applyStyles('dark', {
-                backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-              }),
-              borderRadius: theme.vars.shape.borderRadius,
+              backgroundColor:
+                theme.palette.mode === 'light'
+                  ? alpha(theme.palette.common.black, 0.04)
+                  : alpha(theme.palette.common.white, 0.08),
+              borderRadius: theme.shape.borderRadius,
               ...rootStyleOverrides,
               [`.${tabsClasses.indicator}`]: {
-                backgroundColor: theme.vars.palette.background.paper,
-                ...theme.applyStyles('dark', {
-                  backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
-                }),
+                backgroundColor:
+                  theme.palette.mode === 'light'
+                    ? theme.palette.background.paper
+                    : alpha(theme.palette.common.black, 0.56),
                 borderRadius:
                   theme.shape.borderRadius > 0
-                    ? `calc(${theme.vars.shape.borderRadius} - 4px)`
-                    : theme.vars.shape.borderRadius,
-                boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+                    ? theme.shape.borderRadius - 4
+                    : theme.shape.borderRadius,
+                boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
                 ...rootStyleOverrides?.[`.${tabsClasses.indicator}`],
               },
             }

package/src/themes/jumper.ts

@@ -1,77 +1,37 @@
 import type { WidgetTheme } from '../types/widget.js'
 
 export const jumperTheme: WidgetTheme = {
-  typography: {},
-  header: {
-    overflow: 'visible',
-  },
-  container: {
-    boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.12)',
-    borderRadius: '24px',
-  },
-  shape: {
-    borderRadius: 12,
-    borderRadiusSecondary: 24,
-  },
-  colorSchemes: {
-    light: {
-      palette: {
-        primary: {
-          main: '#30007A',
-        },
-        secondary: {
-          main: '#8700B8',
-        },
-        background: {
-          default: '#F9F5FF',
-          paper: '#FFFFFF',
-        },
-        text: {
-          primary: '#000000',
-          secondary: '#818084',
-        },
-        grey: {
-          200: '#ECEBF0',
-          300: '#E5E1EB',
-          700: '#70767A',
-          800: '#4B4F52',
-        },
-        playground: {
-          main: '#F3EBFF',
-        },
-      },
-    },
-    dark: {
-      palette: {
-        primary: {
-          main: '#653BA3',
-        },
-        secondary: {
-          main: '#D35CFF',
-        },
-        background: {
-          default: '#24203D',
-          paper: '#302B52',
-        },
-        text: {
-          primary: '#ffffff',
-          secondary: '#9490a5',
-        },
-        grey: {
-          200: '#ECEBF0',
-          300: '#DDDCE0',
-          700: '#70767A',
-          800: '#3c375c',
-        },
-        playground: {
-          main: '#120F29',
-        },
-      },
-    },
-  },
+  palette: {},
+  // shape: {
+  //   borderRadius: 0,
+  //   borderRadiusSecondary: 0,
+  //   borderRadiusTertiary: 0,
+  // },
+  container: {},
+  playground: {},
   components: {
-    MuiCard: {
-      defaultProps: { variant: 'elevation' },
+    MuiIconButton: {
+      styleOverrides: {
+        // root: ({ theme }) => ({
+        //   backgroundColor: alpha(
+        //     theme.palette.mode === 'light'
+        //       ? theme.palette.common.black
+        //       : theme.palette.common.white,
+        //     0.04,
+        //   ),
+        //   color: 'inherit',
+        //   borderRadius: theme.shape.borderRadiusSecondary,
+        //   '&:hover': {
+        //     backgroundColor: alpha(
+        //       theme.palette.mode === 'light'
+        //         ? theme.palette.common.black
+        //         : theme.palette.common.white,
+        //       0.08,
+        //     ),
+        //     color: 'inherit',
+        //   },
+        // }),
+      },
     },
   },
 }

package/src/themes/types.ts

@@ -2,9 +2,7 @@ import type {
   CardProps,
   ComponentsOverrides,
   ComponentsVariants,
-  SimplePaletteColorOptions,
 } from '@mui/material'
-import type {} from '@mui/material/themeCssVarsAugmentation'
 import type { CSSProperties } from 'react'
 import type { NavigationProps } from '../types/widget.js'
 
@@ -51,13 +49,6 @@ declare module '@mui/material/styles' {
       variants?: ComponentsVariants['MuiInputCard']
     }
   }
-  interface Palette {
-    playground: Palette['primary']
-  }
-
-  interface PaletteOptions {
-    playground?: SimplePaletteColorOptions
-  }
 }
 
 declare module '@mui/material/Paper' {

package/src/themes/watermelonLight.ts

@@ -1,33 +1,26 @@
 import type { WidgetTheme } from '../types/widget.js'
 
 export const watermelonLightTheme: WidgetTheme = {
-  colorSchemes: {
-    light: {
-      palette: {
-        primary: {
-          main: '#f7557c',
-        },
-        secondary: {
-          main: '#027944',
-        },
-        background: {
-          default: '#ffeff3',
-          paper: '#ffffff',
-        },
-        text: {
-          primary: '#190006',
-          secondary: '#766066',
-        },
-        grey: {
-          200: '#F0E5E8',
-          300: '#E5D7DA',
-          700: '#7A666B',
-          800: '#58373F',
-        },
-        playground: {
-          main: '#f7557c',
-        },
-      },
+  palette: {
+    primary: {
+      main: '#f7557c',
+    },
+    secondary: {
+      main: '#027944',
+    },
+    background: {
+      default: '#ffeff3',
+      paper: '#ffffff',
+    },
+    text: {
+      primary: '#190006',
+      secondary: '#766066',
+    },
+    grey: {
+      200: '#F0E5E8',
+      300: '#E5D7DA',
+      700: '#7A666B',
+      800: '#58373F',
     },
   },
   shape: {
@@ -42,6 +35,9 @@ export const watermelonLightTheme: WidgetTheme = {
     boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.12)',
     borderRadius: '16px',
   },
+  playground: {
+    background: '#f7557c',
+  },
   components: {
     MuiCard: {
       defaultProps: { variant: 'elevation' },
@@ -51,7 +47,7 @@ export const watermelonLightTheme: WidgetTheme = {
     //     root: ({ theme }) => ({
     //       backgroundColor: alpha(theme.palette.common.white, 0.04),
     //       color: 'inherit',
-    //       borderRadius: theme.vars.shape.borderRadiusSecondary,
+    //       borderRadius: theme.shape.borderRadiusSecondary,
     //       '&:hover': {
     //         backgroundColor: alpha(
     //           theme.palette.mode === 'light'

package/src/themes/windows95.ts

@@ -1,30 +1,23 @@
 import type { WidgetTheme } from '../types/widget.js'
 
 export const windows95Theme: WidgetTheme = {
-  colorSchemes: {
-    light: {
-      palette: {
-        primary: {
-          main: '#0000ff',
-        },
-        secondary: {
-          main: '#f7c303',
-        },
-        text: {
-          primary: '#30313d',
-          secondary: '#6d6e78',
-        },
-        background: {
-          default: '#c0c9d2',
-          paper: '#dfdfdf',
-        },
-        grey: {
-          300: '#bbbbbb',
-        },
-        playground: {
-          main: '#008080',
-        },
-      },
+  palette: {
+    primary: {
+      main: '#0000ff',
+    },
+    secondary: {
+      main: '#f7c303',
+    },
+    text: {
+      primary: '#30313d',
+      secondary: '#6d6e78',
+    },
+    background: {
+      default: '#c0c9d2',
+      paper: '#dfdfdf',
+    },
+    grey: {
+      300: '#bbbbbb',
     },
   },
   shape: {
@@ -38,6 +31,9 @@ export const windows95Theme: WidgetTheme = {
   navigation: {
     edge: false,
   },
+  playground: {
+    background: '#008080',
+  },
   components: {
     MuiButton: {
       styleOverrides: {