@lifi/widget 3.19.2 → 3.20.0-beta.0

package/src/themes/createTheme.ts

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

package/src/themes/jumper.ts

@@ -1,37 +1,77 @@
 import type { WidgetTheme } from '../types/widget.js'
 
 export const jumperTheme: WidgetTheme = {
-  palette: {},
-  // shape: {
-  //   borderRadius: 0,
-  //   borderRadiusSecondary: 0,
-  //   borderRadiusTertiary: 0,
-  // },
-  container: {},
-  playground: {},
-  components: {
-    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',
-        //   },
-        // }),
+  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',
+        },
+      },
+    },
+  },
+  components: {
+    MuiCard: {
+      defaultProps: { variant: 'elevation' },
+    },
   },
 }

package/src/themes/types.ts

@@ -2,7 +2,9 @@ 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'
 
@@ -49,6 +51,13 @@ 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,26 +1,33 @@
 import type { WidgetTheme } from '../types/widget.js'
 
 export const watermelonLightTheme: WidgetTheme = {
-  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',
+  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',
+        },
+      },
     },
   },
   shape: {
@@ -35,9 +42,6 @@ export const watermelonLightTheme: WidgetTheme = {
     boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.12)',
     borderRadius: '16px',
   },
-  playground: {
-    background: '#f7557c',
-  },
   components: {
     MuiCard: {
       defaultProps: { variant: 'elevation' },
@@ -47,7 +51,7 @@ export const watermelonLightTheme: WidgetTheme = {
     //     root: ({ theme }) => ({
     //       backgroundColor: alpha(theme.palette.common.white, 0.04),
     //       color: 'inherit',
-    //       borderRadius: theme.shape.borderRadiusSecondary,
+    //       borderRadius: theme.vars.shape.borderRadiusSecondary,
     //       '&:hover': {
     //         backgroundColor: alpha(
     //           theme.palette.mode === 'light'

package/src/themes/windows95.ts

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