@lifi/widget 3.18.7 → 3.19.0-beta.1

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,10 +33,7 @@ const enterKeyframe = keyframes`
   }
 `
 
-export const createTheme = (
-  mode: PaletteMode,
-  widgetTheme: WidgetTheme = {}
-) => {
+export const createTheme = (widgetTheme: WidgetTheme = {}) => {
   const primaryMainColor =
     (widgetTheme.palette?.primary as SimplePaletteColorOptions)?.main ??
     palette.primary.main
@@ -51,18 +42,45 @@ export const createTheme = (
   const secondaryMainColor =
     (widgetTheme.palette?.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 theme = createMuiTheme({
+    cssVariables: { cssVarPrefix: 'lifi', colorSchemeSelector: 'class' },
+    colorSchemes: {
+      light: {
+        palette: {
+          ...palette,
+          ...paletteLight,
+          ...(widgetTheme.colorScheme?.light?.palette ?? widgetTheme.palette),
+          primary: {
+            main: primaryMainColor,
+            light: primaryLightColor,
+            dark: primaryDarkColor,
+          },
+          secondary: {
+            main: secondaryMainColor,
+            light: lighten(secondaryMainColor, 0.84),
+            dark: darken(secondaryMainColor, 0.2),
+          },
+        },
+      },
+      dark: {
+        palette: {
+          ...palette,
+          ...paletteDark,
+          ...(widgetTheme.colorScheme?.dark?.palette ?? widgetTheme.palette),
+          primary: {
+            main: primaryMainColor,
+            light: primaryLightColor,
+            dark: primaryDarkColor,
+          },
+          secondary: {
+            main: secondaryMainColor,
+            light: lighten(secondaryMainColor, 0.84),
+            dark: darken(secondaryMainColor, 0.2),
+          },
+        },
+      },
+    },
     container: widgetTheme.container,
     header: widgetTheme.header,
     navigation: {
@@ -73,22 +91,22 @@ 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),
-      },
-    },
+    // 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 +153,8 @@ 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,
+              borderRadius: theme.vars.shape.borderRadius,
               overflow: 'hidden',
               position: 'relative',
               boxSizing: 'border-box',
@@ -157,17 +175,17 @@ 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))`,
                   },
                 }),
               ...(typeof root === 'object' && root),
@@ -189,10 +207,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 +218,7 @@ 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))`,
             }),
           },
           {
@@ -233,51 +251,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 +353,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,7 +384,7 @@ export const createTheme = (
       MuiMenu: {
         styleOverrides: {
           paper: ({ theme }) => ({
-            backgroundColor: theme.palette.background.default,
+            backgroundColor: theme.vars.palette.background.default,
           }),
         },
       },
@@ -383,22 +400,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

@@ -20,7 +20,7 @@ export const jumperTheme: WidgetTheme = {
         //     0.04,
         //   ),
         //   color: 'inherit',
-        //   borderRadius: theme.shape.borderRadiusSecondary,
+        //   borderRadius: theme.vars.shape.borderRadiusSecondary,
         //   '&:hover': {
         //     backgroundColor: alpha(
         //       theme.palette.mode === 'light'

package/src/themes/types.ts

@@ -3,6 +3,7 @@ import type {
   ComponentsOverrides,
   ComponentsVariants,
 } from '@mui/material'
+import type {} from '@mui/material/themeCssVarsAugmentation'
 import type { CSSProperties } from 'react'
 import type { NavigationProps } from '../types/widget.js'
 

package/src/themes/watermelonLight.ts

@@ -47,7 +47,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/types/widget.ts

@@ -17,14 +17,8 @@ import type {
   SxProps,
   Theme,
 } from '@mui/material'
-import type { TypographyOptions } from '@mui/material/styles/createTypography.js'
-import type {
-  CSSProperties,
-  FC,
-  MutableRefObject,
-  ReactNode,
-  RefObject,
-} from 'react'
+import type { TypographyVariantsOptions } from '@mui/material/styles'
+import type { CSSProperties, FC, ReactNode, RefObject } from 'react'
 import type {
   CoinbaseWalletParameters,
   MetaMaskParameters,
@@ -45,7 +39,7 @@ export interface SubvariantOptions {
   custom?: CustomSubvariant
 }
 
-export type Appearance = PaletteMode | 'auto'
+export type Appearance = PaletteMode | 'system'
 export interface NavigationProps {
   /**
    * If given, uses a negative margin to counteract the padding on sides for navigation elements like icon buttons.
@@ -65,12 +59,29 @@ export type WidgetThemeComponents = Pick<
 >
 
 export type WidgetTheme = {
+  /**
+   * @deprecated Use `colorScheme` instead.
+   */
   palette?: Pick<
     PaletteOptions,
     'background' | 'grey' | 'primary' | 'secondary' | 'text'
   >
+  colorScheme?: {
+    light?: {
+      palette: Pick<
+        PaletteOptions,
+        'background' | 'grey' | 'primary' | 'secondary' | 'text'
+      >
+    }
+    dark?: {
+      palette: Pick<
+        PaletteOptions,
+        'background' | 'grey' | 'primary' | 'secondary' | 'text'
+      >
+    }
+  }
   shape?: Partial<Shape>
-  typography?: TypographyOptions
+  typography?: TypographyVariantsOptions
   components?: WidgetThemeComponents
   container?: CSSProperties
   header?: CSSProperties
@@ -299,7 +310,7 @@ export type FormState = {
   setFieldValue: SetFieldValueFunction
 }
 
-export type FormRef = MutableRefObject<FormState | null>
+export type FormRef = RefObject<FormState | null>
 
 export interface FormRefProps {
   formRef?: FormRef

package/dist/esm/stores/settings/useAppearance.d.ts

@@ -1,2 +0,0 @@
-import type { Appearance } from '../../types/widget.js';
-export declare const useAppearance: () => [Appearance, (appearance: Appearance) => void];

package/dist/esm/stores/settings/useAppearance.js

@@ -1,11 +0,0 @@
-import { useSettingsActions } from '../../stores/settings/useSettingsActions.js';
-import { useSettingsStore } from './useSettingsStore.js';
-export const useAppearance = () => {
-    const { setValue } = useSettingsActions();
-    const appearance = useSettingsStore((state) => state.appearance);
-    const setAppearance = (appearance) => {
-        setValue('appearance', appearance);
-    };
-    return [appearance, setAppearance];
-};
-//# sourceMappingURL=useAppearance.js.map

package/dist/esm/stores/settings/useAppearance.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAppearance.js","sourceRoot":"","sources":["../../../../src/stores/settings/useAppearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAEhF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,MAAM,CAAC,MAAM,aAAa,GAAG,GAG3B,EAAE;IACF,MAAM,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE,CAAA;IACzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;IAChE,MAAM,aAAa,GAAG,CAAC,UAAsB,EAAE,EAAE;QAC/C,QAAQ,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IACpC,CAAC,CAAA;IACD,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,CAAA;AACpC,CAAC,CAAA"}

package/dist/esm/utils/colors.d.ts

@@ -1,15 +0,0 @@
-import type { Theme } from '@mui/material';
-export declare const getContrastAlphaColor: (theme: Theme, value: number) => string;
-export declare const getWarningBackgroundColor: (theme: Theme) => string;
-export declare const getInfoBackgroundColor: (theme: Theme) => string;
-/**
- * https://github.com/mui/material-ui/blob/next/packages/mui-system/src/colorManipulator/colorManipulator.js
- * Blend a transparent overlay color with a background color, resulting in a single
- * RGB color.
- * Remove in favor of MUI one once the next major version is released.
- * @param {string} background - CSS color
- * @param {string} overlay - CSS color
- * @param {number} opacity - Opacity multiplier in the range 0 - 1
- * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
- */
-export declare function blend(background: string, overlay: string, opacity: number, gamma?: number): string;

package/dist/esm/utils/colors.js

@@ -1,35 +0,0 @@
-import { alpha, decomposeColor, recomposeColor } from '@mui/material';
-export const getContrastAlphaColor = (theme, value) => theme.palette.mode === 'light'
-    ? alpha(theme.palette.common.black, value)
-    : alpha(theme.palette.common.white, value);
-export const getWarningBackgroundColor = (theme) => theme.palette.mode === 'light'
-    ? alpha(theme.palette.warning.main, 0.32)
-    : alpha(theme.palette.warning.main, 0.16);
-export const getInfoBackgroundColor = (theme) => theme.palette.mode === 'light'
-    ? alpha(theme.palette.info.main, 0.12)
-    : alpha(theme.palette.info.main, 0.16);
-/**
- * https://github.com/mui/material-ui/blob/next/packages/mui-system/src/colorManipulator/colorManipulator.js
- * Blend a transparent overlay color with a background color, resulting in a single
- * RGB color.
- * Remove in favor of MUI one once the next major version is released.
- * @param {string} background - CSS color
- * @param {string} overlay - CSS color
- * @param {number} opacity - Opacity multiplier in the range 0 - 1
- * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
- */
-export function blend(background, overlay, opacity, gamma = 1.0) {
-    const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
-    const backgroundColor = decomposeColor(background);
-    const overlayColor = decomposeColor(overlay);
-    const rgb = [
-        blendChannel(backgroundColor.values[0], overlayColor.values[0]),
-        blendChannel(backgroundColor.values[1], overlayColor.values[1]),
-        blendChannel(backgroundColor.values[2], overlayColor.values[2]),
-    ];
-    return recomposeColor({
-        type: 'rgb',
-        values: rgb,
-    });
-}
-//# sourceMappingURL=colors.js.map

package/dist/esm/utils/colors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAErE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAE,KAAa,EAAE,EAAE,CACnE,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC;IAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;AAE9C,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAE,EAAE,CACxD,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;IACzC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;AAE7C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAE,EAAE,CACrD,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;IACtC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;AAE1C;;;;;;;;;GASG;AACH,MAAM,UAAU,KAAK,CACnB,UAAkB,EAClB,OAAe,EACf,OAAe,EACf,KAAK,GAAG,GAAG;IAEX,MAAM,YAAY,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAC5C,IAAI,CAAC,KAAK,CACR,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,IAAI,KAAK,CACzE,CAAA;IAEH,MAAM,eAAe,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;IAClD,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAE5C,MAAM,GAAG,GAA6B;QACpC,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC/D,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC/D,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;KAChE,CAAA;IAED,OAAO,cAAc,CAAC;QACpB,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,GAAG;KACZ,CAAC,CAAA;AACJ,CAAC"}

package/src/stores/settings/useAppearance.ts

@@ -1,15 +0,0 @@
-import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
-import type { Appearance } from '../../types/widget.js'
-import { useSettingsStore } from './useSettingsStore.js'
-
-export const useAppearance = (): [
-  Appearance,
-  (appearance: Appearance) => void,
-] => {
-  const { setValue } = useSettingsActions()
-  const appearance = useSettingsStore((state) => state.appearance)
-  const setAppearance = (appearance: Appearance) => {
-    setValue('appearance', appearance)
-  }
-  return [appearance, setAppearance]
-}

package/src/utils/colors.ts

@@ -1,53 +0,0 @@
-import type { Theme } from '@mui/material'
-import { alpha, decomposeColor, recomposeColor } from '@mui/material'
-
-export const getContrastAlphaColor = (theme: Theme, value: number) =>
-  theme.palette.mode === 'light'
-    ? alpha(theme.palette.common.black, value)
-    : alpha(theme.palette.common.white, value)
-
-export const getWarningBackgroundColor = (theme: Theme) =>
-  theme.palette.mode === 'light'
-    ? alpha(theme.palette.warning.main, 0.32)
-    : alpha(theme.palette.warning.main, 0.16)
-
-export const getInfoBackgroundColor = (theme: Theme) =>
-  theme.palette.mode === 'light'
-    ? alpha(theme.palette.info.main, 0.12)
-    : alpha(theme.palette.info.main, 0.16)
-
-/**
- * https://github.com/mui/material-ui/blob/next/packages/mui-system/src/colorManipulator/colorManipulator.js
- * Blend a transparent overlay color with a background color, resulting in a single
- * RGB color.
- * Remove in favor of MUI one once the next major version is released.
- * @param {string} background - CSS color
- * @param {string} overlay - CSS color
- * @param {number} opacity - Opacity multiplier in the range 0 - 1
- * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
- */
-export function blend(
-  background: string,
-  overlay: string,
-  opacity: number,
-  gamma = 1.0
-) {
-  const blendChannel = (b: number, o: number) =>
-    Math.round(
-      (b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma
-    )
-
-  const backgroundColor = decomposeColor(background)
-  const overlayColor = decomposeColor(overlay)
-
-  const rgb: [number, number, number] = [
-    blendChannel(backgroundColor.values[0], overlayColor.values[0]),
-    blendChannel(backgroundColor.values[1], overlayColor.values[1]),
-    blendChannel(backgroundColor.values[2], overlayColor.values[2]),
-  ]
-
-  return recomposeColor({
-    type: 'rgb',
-    values: rgb,
-  })
-}