@lifi/widget 3.19.0-beta.2 → 3.19.0

package/dist/esm/types/widget.js

@@ -18,6 +18,7 @@ export var HiddenUI;
     HiddenUI["IntegratorStepDetails"] = "integratorStepDetails";
     HiddenUI["ReverseTokensButton"] = "reverseTokensButton";
     HiddenUI["RouteTokenDescription"] = "routeTokenDescription";
+    HiddenUI["ChainSelect"] = "chainSelect";
 })(HiddenUI || (HiddenUI = {}));
 export var RequiredUI;
 (function (RequiredUI) {

package/dist/esm/types/widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../../src/types/widget.ts"],"names":[],"mappings":"AA2FA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,QAYX;AAZD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,mDAAuC,CAAA;IACvC,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,qCAAyB,CAAA;IACzB,2DAA+C,CAAA;IAC/C,uDAA2C,CAAA;IAC3C,2DAA+C,CAAA;AACjD,CAAC,EAZW,QAAQ,KAAR,QAAQ,QAYnB;AAGD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,qCAAuB,CAAA;AACzB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}
+{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../../src/types/widget.ts"],"names":[],"mappings":"AAiFA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,QAaX;AAbD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,mDAAuC,CAAA;IACvC,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,qCAAyB,CAAA;IACzB,2DAA+C,CAAA;IAC/C,uDAA2C,CAAA;IAC3C,2DAA+C,CAAA;IAC/C,uCAA2B,CAAA;AAC7B,CAAC,EAbW,QAAQ,KAAR,QAAQ,QAanB;AAGD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,qCAAuB,CAAA;AACzB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1 @@
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.19.0-beta.2",
+  "version": "3.19.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -34,22 +34,22 @@
     "@bigmi/core": "^0.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.6.8",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/material": "^7.0.2",
-    "@mui/system": "^7.0.2",
+    "@lifi/sdk": "^3.6.9",
+    "@mui/icons-material": "6.0.2",
+    "@mui/material": "^6.4.11",
+    "@mui/system": "^6.4.11",
     "@solana/wallet-adapter-base": "^0.9.24",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.13.6",
-    "i18next": "^25.0.0",
+    "i18next": "^25.0.1",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^15.5.1",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
-    "viem": "^2.27.0",
+    "viem": "^2.28.0",
     "zustand": "^5.0.3",
-    "@lifi/wallet-management": "^3.8.0-beta.1"
+    "@lifi/wallet-management": "^3.7.5"
   },
   "peerDependencies": {
     "@bigmi/react": ">=0.1.0",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.19.0-beta.2",
+  "version": "3.19.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./src/index.ts",
@@ -53,21 +53,21 @@
     "@bigmi/core": "^0.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.6.8",
+    "@lifi/sdk": "^3.6.9",
     "@lifi/wallet-management": "workspace:^",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/material": "^7.0.2",
-    "@mui/system": "^7.0.2",
+    "@mui/icons-material": "6.0.2",
+    "@mui/material": "^6.4.11",
+    "@mui/system": "^6.4.11",
     "@solana/wallet-adapter-base": "^0.9.24",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.13.6",
-    "i18next": "^25.0.0",
+    "i18next": "^25.0.1",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^15.5.1",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
-    "viem": "^2.27.0",
+    "viem": "^2.28.0",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
@@ -76,7 +76,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.2"
   },
   "peerDependencies": {
     "@bigmi/react": ">=0.1.0",

package/src/AppDrawer.tsx

@@ -73,15 +73,6 @@ export const AppDrawer = forwardRef<
         open={drawerOpen}
         onClose={closeDrawer}
         slotProps={{
-          paper: {
-            sx: (theme) => ({
-              width: theme?.container?.width ?? '100%',
-              minWidth:
-                theme?.container?.minWidth ?? theme.breakpoints.values.xs,
-              maxWidth:
-                theme?.container?.maxWidth ?? theme.breakpoints.values.sm,
-            }),
-          },
           backdrop: {
             sx: {
               backgroundColor: 'rgb(0 0 0 / 48%)',
@@ -89,6 +80,13 @@ export const AppDrawer = forwardRef<
             },
           },
         }}
+        PaperProps={{
+          sx: (theme) => ({
+            width: theme?.container?.width ?? '100%',
+            minWidth: theme?.container?.minWidth ?? theme.breakpoints.values.xs,
+            maxWidth: theme?.container?.maxWidth ?? theme.breakpoints.values.sm,
+          }),
+        }}
         keepMounted
       >
         {children}

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -1,6 +1,4 @@
-import ArrowForward from '@mui/icons-material/ArrowForward'
-import ErrorRounded from '@mui/icons-material/ErrorRounded'
-import InfoRounded from '@mui/icons-material/InfoRounded'
+import { ArrowForward, ErrorRounded, InfoRounded } from '@mui/icons-material'
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { useProcessMessage } from '../../hooks/useProcessMessage.js'

package/src/components/ActiveTransactions/ActiveTransactions.style.ts

@@ -5,14 +5,15 @@ import {
   listItemSecondaryActionClasses,
   styled,
 } from '@mui/material'
+import { getContrastAlphaColor } from '../../utils/colors.js'
 
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
   paddingLeft: theme.spacing(1.5),
   paddingRight: theme.spacing(1.5),
   height: 64,
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
 }))
 

package/src/components/AmountInput/AmountInputAdornment.style.tsx

@@ -10,5 +10,5 @@ export const MaxButton = styled(MuiButton)(({ theme }) => ({
 export const MaxButtonSkeleton = styled(Skeleton)(({ theme }) => ({
   width: 46,
   height: 24,
-  borderRadius: theme.vars.shape.borderRadiusSecondary,
+  borderRadius: theme.shape.borderRadiusSecondary,
 }))

package/src/components/AppContainer.tsx

@@ -48,7 +48,7 @@ export const RelativeContainer = styled(Box, {
     width: '100%',
     minWidth: theme.breakpoints.values.xs,
     maxWidth: theme.breakpoints.values.sm,
-    background: theme.vars.palette.background.default,
+    background: theme.palette.background.default,
     overflow: 'auto',
     flex: 1,
     zIndex: 0,

package/src/components/Avatar/AccountAvatar.tsx

@@ -1,6 +1,6 @@
 import type { Account } from '@lifi/wallet-management'
 import { getConnectorIcon } from '@lifi/wallet-management'
-import Wallet from '@mui/icons-material/Wallet'
+import { Wallet } from '@mui/icons-material'
 import { Badge } from '@mui/material'
 import { useChain } from '../../hooks/useChain.js'
 import type { ToAddress } from '../../types/widget.js'

package/src/components/Avatar/Avatar.style.tsx

@@ -36,37 +36,37 @@ export const AvatarDefault = styled(Box)(({ theme }) => {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    background: theme.palette.grey[800],
     borderRadius: '50%',
     height: root?.height,
     width: root?.width,
-    color: theme.vars.palette.text.secondary,
+    color: theme.palette.text.secondary,
     mask: avatarMask16,
-    background: theme.vars.palette.grey[300],
-    ...theme.applyStyles('dark', {
-      background: theme.vars.palette.grey[800],
+    ...theme.applyStyles('light', {
+      background: theme.palette.grey[300],
     }),
   }
 })
 
 export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
   return {
+    background: theme.palette.grey[800],
     borderRadius: '50%',
     height: 16,
     width: 16,
-    background: theme.vars.palette.grey[300],
-    ...theme.applyStyles('dark', {
-      background: theme.vars.palette.grey[800],
+    ...theme.applyStyles('light', {
+      background: theme.palette.grey[300],
     }),
   }
 })
 
 export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
+  background: theme.palette.background.paper,
   borderRadius: '50%',
 }))
 
 export const AvatarSkeletonMaskedContainer = styled(Box)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
+  background: theme.palette.background.paper,
   borderRadius: '50%',
   mask: avatarMask16,
 }))

package/src/components/Avatar/SmallAvatar.tsx

@@ -2,7 +2,7 @@ import { Avatar, Skeleton, styled } from '@mui/material'
 import { AvatarSkeletonContainer } from './Avatar.style.js'
 
 export const SmallAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
+  background: theme.palette.background.paper,
   width: 16,
   height: 16,
 }))

package/src/components/BottomSheet/BottomSheet.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'
-import { modalProps, slotProps } from '../Dialog.js'
+import { modalProps, paperProps, slotProps } from '../Dialog.js'
 import type { BottomSheetBase, BottomSheetProps } from './types.js'
 
 export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
@@ -43,6 +43,7 @@ export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
         open={drawerOpen}
         onClose={close}
         ModalProps={modalProps}
+        PaperProps={paperProps}
         slotProps={slotProps}
         disableAutoFocus
       >

package/src/components/ButtonTertiary.tsx

@@ -1,17 +1,18 @@
 import { Button, buttonClasses, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../utils/colors.js'
 
 export const ButtonTertiary = styled(Button)(({ theme }) => ({
-  color: theme.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   height: 40,
   fontSize: 14,
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  backgroundColor: getContrastAlphaColor(theme, 0.04),
   '&:hover, &:active': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.08),
   },
   [`&.${buttonClasses.loading}:disabled`]: {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
   [`.${buttonClasses.loadingIndicator}`]: {
-    color: theme.vars.palette.text.primary,
+    color: theme.palette.text.primary,
   },
 }))

package/src/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import type { CardProps as MuiCardProps } from '@mui/material'
-import { Card as MuiCard, styled } from '@mui/material'
+import { Card as MuiCard, alpha, darken, lighten, styled } from '@mui/material'
 
 export interface CardProps extends MuiCardProps {
   type?: 'default' | 'selected' | 'error'
@@ -26,18 +26,18 @@ export const Card = styled(MuiCard, {
           type: 'selected',
         },
         style: {
+          backgroundColor: darken(theme.palette.primary.main, 0.65),
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: theme.vars.palette.primary.main,
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
+          borderColor: theme.palette.primary.main,
           '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,
+            backgroundColor: darken(theme.palette.primary.main, 0.6),
+            ...theme.applyStyles('light', {
+              backgroundColor: lighten(theme.palette.primary.main, 0.9),
+            }),
           },
-          ...theme.applyStyles('dark', {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,
-            '&:hover': {
-              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,
-            },
+          ...theme.applyStyles('light', {
+            backgroundColor: lighten(theme.palette.primary.main, 0.95),
           }),
         },
       },
@@ -47,18 +47,18 @@ export const Card = styled(MuiCard, {
           type: 'selected',
         },
         style: {
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 15%, white)`,
+          backgroundColor: darken(theme.palette.secondary.main, 0.76),
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.2)`,
+          borderColor: alpha(theme.palette.secondary.main, 0.2),
           '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 20%, white)`,
+            backgroundColor: darken(theme.palette.secondary.main, 0.72),
+            ...theme.applyStyles('light', {
+              backgroundColor: lighten(theme.palette.secondary.main, 0.8),
+            }),
           },
-          ...theme.applyStyles('dark', {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
-            '&:hover': {
-              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,
-            },
+          ...theme.applyStyles('light', {
+            backgroundColor: lighten(theme.palette.secondary.main, 0.85),
           }),
         },
       },
@@ -69,7 +69,7 @@ export const Card = styled(MuiCard, {
         style: {
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: theme.vars.palette.error.main,
+          borderColor: theme.palette.error.main,
         },
       },
     ],

package/src/components/Card/CardButton.style.tsx

@@ -12,7 +12,7 @@ export const CardRowButton = styled(ButtonBase)(({ theme }) => ({
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: theme.spacing(2),
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
 }))
 
 export const CardRowContainer = styled(Box)(({ theme }) => ({

package/src/components/Card/CardHeader.tsx

@@ -13,14 +13,14 @@ export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
     fontWeight: 600,
     fontSize: 18,
     lineHeight: 1.3334,
-    color: theme.vars.palette.text.primary,
+    color: theme.palette.text.primary,
     textAlign: 'left',
   },
   [`.${cardHeaderClasses.subheader}`]: {
     fontWeight: 500,
     fontSize: 12,
     lineHeight: 1.3334,
-    color: theme.vars.palette.text.secondary,
+    color: theme.palette.text.secondary,
     textAlign: 'left',
   },
 }))

package/src/components/Card/CardIconButton.tsx

@@ -1,14 +1,15 @@
 import type { IconButtonProps, LinkProps } from '@mui/material'
 import { IconButton as MuiIconButton, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../../utils/colors.js'
 
 export const CardIconButton = styled(MuiIconButton)<
   IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>
 >(({ theme }) => {
   return {
     padding: theme.spacing(0.5),
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+      backgroundColor: getContrastAlphaColor(theme, 0.08),
     },
     fontSize: '1rem',
   }

package/src/components/Card/CardLabel.tsx

@@ -1,9 +1,16 @@
-import { Box, Typography, styled } from '@mui/material'
+import {
+  Box,
+  Typography,
+  getContrastRatio,
+  lighten,
+  styled,
+} from '@mui/material'
+import { blend } from '../../utils/colors.js'
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: 'secondary' | 'success' }>(({ theme }) => ({
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
   padding: 0,
   display: 'flex',
   alignItems: 'center',
@@ -12,30 +19,67 @@ export const CardLabel = styled(Box, {
   minWidth: 24,
   userSelect: 'none',
   fontSize: '1rem',
-  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,
-  color: theme.vars.palette.text.primary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,
+  backgroundColor: blend(
+    theme.palette.background.paper,
+    theme.palette.common.white,
+    0.16
+  ),
+  color: theme.palette.text.primary,
+  ...theme.applyStyles('light', {
+    backgroundColor: blend(
+      theme.palette.background.paper,
+      theme.palette.common.black,
+      0.12
+    ),
   }),
   variants: [
     {
       props: { variant: 'secondary' },
       style: {
-        color: theme.palette.getContrastText(theme.palette.secondary.main),
-        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
-        ...theme.applyStyles('dark', {
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
+        backgroundColor: blend(
+          theme.palette.background.paper,
+          theme.palette.secondary.main,
+          0.8
+        ),
+        color:
+          getContrastRatio(
+            theme.palette.common.white,
+            blend(
+              theme.palette.background.paper,
+              theme.palette.secondary.main,
+              0.8
+            )
+          ) >= 3
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+        ...theme.applyStyles('light', {
+          backgroundColor: theme.palette.secondary.main,
+          color:
+            getContrastRatio(
+              theme.palette.common.white,
+              theme.palette.secondary.main
+            ) >= 3
+              ? theme.palette.common.white
+              : theme.palette.common.black,
         }),
       },
     },
     {
       props: { variant: 'success' },
       style: {
-        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,
-        color: theme.vars.palette.success.main,
-        ...theme.applyStyles('dark', {
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,
-          color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,
+        backgroundColor: blend(
+          theme.palette.background.paper,
+          theme.palette.success.main,
+          0.24
+        ),
+        color: lighten(theme.palette.success.main, 0.24),
+        ...theme.applyStyles('light', {
+          backgroundColor: blend(
+            theme.palette.background.paper,
+            theme.palette.success.main,
+            0.16
+          ),
+          color: lighten(theme.palette.success.main, 0),
         }),
       },
     },

package/src/components/Card/CardTitle.tsx

@@ -8,10 +8,10 @@ export const CardTitle = styled(Typography, {
   fontWeight: 700,
   padding: theme.spacing(2, 2, 0, 2),
   textAlign: 'left',
-  color: theme.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   '&:after': {
     content: 'none',
-    color: theme.vars.palette.error.main,
+    color: theme.palette.error.main,
   },
   variants: [
     {

package/src/components/ContractComponent/NFT/NFT.style.ts

@@ -1,8 +1,8 @@
 import { Avatar, styled } from '@mui/material'
 
 export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
+  background: theme.palette.background.paper,
   width: 96,
   height: 96,
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
 }))

package/src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import type { DialogProps, Theme } from '@mui/material'
+import type { DialogProps, PaperProps, Theme } from '@mui/material'
 import { Dialog as MuiDialog } from '@mui/material'
 import type { PropsWithChildren } from 'react'
 import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js'
@@ -10,16 +10,17 @@ export const modalProps = {
   },
 }
 
+export const paperProps: Partial<PaperProps> = {
+  sx: (theme: Theme) => ({
+    position: 'absolute',
+    backgroundImage: 'none',
+    backgroundColor: theme.palette.background.default,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius,
+  }),
+}
+
 export const slotProps = {
-  paper: {
-    sx: (theme: Theme) => ({
-      position: 'absolute',
-      backgroundImage: 'none',
-      backgroundColor: theme.vars.palette.background.default,
-      borderTopLeftRadius: theme.vars.shape.borderRadius,
-      borderTopRightRadius: theme.vars.shape.borderRadius,
-    }),
-  },
   backdrop: {
     sx: {
       position: 'absolute',
@@ -41,6 +42,7 @@ export const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({
       open={open}
       onClose={onClose}
       sx={modalProps.sx}
+      PaperProps={paperProps}
       slotProps={slotProps}
     >
       {children}

package/src/components/Header/BackButton.tsx

@@ -1,4 +1,4 @@
-import ArrowBack from '@mui/icons-material/ArrowBack'
+import { ArrowBack } from '@mui/icons-material'
 import type { IconButtonProps } from '@mui/material'
 import { IconButton, useTheme } from '@mui/material'
 

package/src/components/Header/CloseDrawerButton.tsx

@@ -1,4 +1,4 @@
-import CloseRounded from '@mui/icons-material/CloseRounded'
+import { CloseRounded } from '@mui/icons-material'
 import { IconButton, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useDrawer } from '../../AppDrawerContext.js'