@lifi/widget 3.19.0-beta.2 → 3.19.0

package/src/components/Header/DisconnectIconButton.tsx

@@ -1,5 +1,5 @@
 import { type Account, useAccountDisconnect } from '@lifi/wallet-management'
-import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
+import { PowerSettingsNewRounded } from '@mui/icons-material'
 import { IconButton } from '@mui/material'
 
 export const DisconnectIconButton = ({ account }: { account: Account }) => {

package/src/components/Header/Header.style.ts

@@ -7,14 +7,12 @@ import {
   styled,
 } from '@mui/material'
 import type { WidgetSubvariant } from '../../types/widget.js'
+import { getContrastAlphaColor } from '../../utils/colors.js'
 import { avatarMask12 } from '../Avatar/utils.js'
 
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: 'transparent',
-  ...theme.applyStyles('dark', {
-    backgroundColor: 'transparent',
-  }),
-  color: theme.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   flexDirection: 'row',
   alignItems: 'center',
   position: 'relative',
@@ -26,7 +24,7 @@ export const Container = styled(Box, {
   return {
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: theme.vars.palette.background.default,
+    backgroundColor: theme.palette.background.default,
     backdropFilter: 'blur(12px)',
     position: sticky ? 'sticky' : 'relative',
     top: 0,
@@ -48,22 +46,16 @@ export const Container = styled(Box, {
 export const WalletButton = styled(Button, {
   shouldForwardProp: (prop) => prop !== 'subvariant',
 })<{ subvariant?: WidgetSubvariant }>(({ subvariant, theme }) => ({
-  color: theme.vars.palette.text.primary,
+  color: theme.palette.text.primary,
+  backgroundColor: 'transparent',
   padding: theme.spacing(1, 1.5),
   maxHeight: 40,
   fontSize: '0.875rem',
   fontWeight: 600,
-  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
-  backgroundColor: 'transparent',
+  borderRadius: theme.shape.borderRadius * 2,
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
-  ...theme.applyStyles('dark', {
-    backgroundColor: 'transparent',
-    '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    },
-  }),
   [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
     fontSize: '24px',
   },

package/src/components/Header/SettingsButton.style.tsx

@@ -2,8 +2,13 @@ import {
   IconButton,
   Badge as MuiBadge,
   badgeClasses,
+  darken,
   styled,
 } from '@mui/material'
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js'
 
 export const SettingsIconBadge = styled(MuiBadge)(({ theme }) => ({
   display: 'flex',
@@ -27,31 +32,19 @@ export const SettingsIconButton = styled(IconButton, {
   switch (variant) {
     case 'info':
       return {
-        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+        backgroundColor: getInfoBackgroundColor(theme),
         '&:hover': {
-          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.info.mainChannel} / 0.12) 80%, black)`,
+          backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
         },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
-          '&:hover': {
-            backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.info.mainChannel} / 0.16) 80%, black)`,
-          },
-        }),
       }
     case 'warning':
       return {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        backgroundColor: getWarningBackgroundColor(theme),
         '&:hover': {
-          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)`,
+          backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
         },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
-          '&:hover': {
-            backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.16) 80%, black)`,
-          },
-        }),
       }
     default:
-      return {}
+      break
   }
 })

package/src/components/Header/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import Settings from '@mui/icons-material/Settings'
+import { Settings } from '@mui/icons-material'
 import { Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'

package/src/components/Header/TransactionHistoryButton.tsx

@@ -1,4 +1,4 @@
-import ReceiptLong from '@mui/icons-material/ReceiptLong'
+import { ReceiptLong } from '@mui/icons-material'
 import { IconButton, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'

package/src/components/Header/WalletHeader.tsx

@@ -4,8 +4,7 @@ import {
   useAccount,
   useWalletMenu,
 } from '@lifi/wallet-management'
-import ExpandMore from '@mui/icons-material/ExpandMore'
-import Wallet from '@mui/icons-material/Wallet'
+import { ExpandMore, Wallet } from '@mui/icons-material'
 import { Avatar, Badge } from '@mui/material'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/components/Header/WalletMenu.style.tsx

@@ -8,19 +8,19 @@ import {
 
 export const WalletMenuContainer = styled(MuiMenu)(({ theme }) => ({
   [`& .${menuClasses.paper}`]: {
-    borderRadius: theme.vars.shape.borderRadius,
-    color: theme.vars.palette.text.primary,
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.text.primary,
     boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
     padding: theme.spacing(2),
     [`& .${menuClasses.list}`]: {
       padding: 0,
     },
     [`& .${menuItemClasses.root}`]: {
-      borderRadius: theme.vars.shape.borderRadiusSecondary,
+      borderRadius: theme.shape.borderRadiusSecondary,
       padding: theme.spacing(1, 0, 1, 1),
       [`& .${svgIconClasses.root}`]: {
         fontSize: 20,
-        color: theme.vars.palette.text.primary,
+        color: theme.palette.text.primary,
       },
       ':hover': {
         background: 'none',

package/src/components/Header/WalletMenu.tsx

@@ -3,9 +3,11 @@ import {
   useAccount,
   useWalletMenu,
 } from '@lifi/wallet-management'
-import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
-import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
+import {
+  ContentCopyRounded,
+  OpenInNewRounded,
+  PowerSettingsNewRounded,
+} from '@mui/icons-material'
 import { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'

package/src/components/IconTypography.ts

@@ -1,9 +1,9 @@
-import { Box, styled } from '@mui/material'
+import { Box, alpha, styled } from '@mui/material'
 
 export const IconTypography = styled(Box)(({ theme }) => ({
-  color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
+  color: alpha(theme.palette.common.white, 0.4),
   lineHeight: 0,
-  ...theme.applyStyles('dark', {
-    color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.32)`,
+  ...theme.applyStyles('light', {
+    color: alpha(theme.palette.common.black, 0.32),
   }),
 }))

package/src/components/ListItemButton.tsx

@@ -1,12 +1,14 @@
 import { ListItemButton as MuiListItemButton, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../utils/colors.js'
 
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => {
+  const backgroundHoverColor = getContrastAlphaColor(theme, 0.04)
   return {
-    borderRadius: theme.vars.shape.borderRadius,
+    borderRadius: theme.shape.borderRadius,
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: backgroundHoverColor,
     },
     variants: [
       {

package/src/components/Menu.tsx

@@ -8,18 +8,18 @@ import {
 
 export const Menu = styled(MuiMenu)(({ theme }) => ({
   [`& .${menuClasses.paper}`]: {
-    borderRadius: theme.vars.shape.borderRadius,
+    borderRadius: theme.shape.borderRadius,
     boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
     padding: theme.spacing(2),
     [`& .${menuClasses.list}`]: {
       padding: 0,
     },
     [`& .${menuItemClasses.root}`]: {
-      borderRadius: theme.vars.shape.borderRadiusSecondary,
+      borderRadius: theme.shape.borderRadiusSecondary,
       padding: theme.spacing(1, 2, 1, 1),
       [`& .${svgIconClasses.root}`]: {
         fontSize: 20,
-        color: theme.vars.palette.text.primary,
+        color: theme.palette.text.primary,
         marginRight: theme.spacing(1.5),
       },
     },

package/src/components/Messages/AccountNotDeployedMessage.tsx

@@ -1,4 +1,4 @@
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import { WarningRounded } from '@mui/icons-material'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { AlertMessage } from './AlertMessage.js'

package/src/components/Messages/AlertMessage.style.tsx

@@ -1,4 +1,8 @@
-import { Box, styled } from '@mui/material'
+import { Box, alpha, darken, lighten, styled } from '@mui/material'
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js'
 import type { Severity } from './types.js'
 
 interface AlertSeverityProps {
@@ -8,25 +12,19 @@ interface AlertSeverityProps {
 export const AlertMessageCard = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'severity',
 })<AlertSeverityProps>(({ theme }) => ({
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
   position: 'relative',
   whiteSpace: 'pre-line',
   width: '100%',
   paddingBottom: theme.spacing(2),
-  backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
-  ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
-  }),
+  backgroundColor: getInfoBackgroundColor(theme),
   variants: [
     {
       props: {
         severity: 'warning',
       },
       style: {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
-        ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
-        }),
+        backgroundColor: getWarningBackgroundColor(theme),
       },
     },
   ],
@@ -40,21 +38,21 @@ export const AlertMessageCardTitle = styled(Box, {
   paddingRight: theme.spacing(2),
   paddingTop: theme.spacing(2),
   gap: theme.spacing(1),
-  color: theme.vars.palette.info.main,
-  ...theme.applyStyles('dark', {
-    color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)`,
-  }),
+  color: lighten(theme.palette.info.main, 0.24),
   variants: [
     {
       props: {
         severity: 'warning',
       },
       style: {
-        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
-        ...theme.applyStyles('dark', {
-          color: theme.vars.palette.warning.main,
-        }),
+        color:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.warning.main, 0.36)
+            : alpha(theme.palette.warning.main, 1),
       },
     },
   ],
+  ...theme.applyStyles('light', {
+    color: theme.palette.info.main,
+  }),
 }))

package/src/components/Messages/FundsSufficiencyMessage.tsx

@@ -1,4 +1,4 @@
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import { WarningRounded } from '@mui/icons-material'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { AlertMessage } from './AlertMessage.js'

package/src/components/Messages/GasRefuelMessage.style.ts

@@ -1,20 +1,20 @@
-import { styled, switchClasses } from '@mui/material'
+import { alpha, styled, switchClasses } from '@mui/material'
 import { Switch } from '../Switch.js'
 
 export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({
   [`.${switchClasses.switchBase}`]: {
     [`&.${switchClasses.checked}`]: {
       [`& + .${switchClasses.track}`]: {
-        backgroundColor: theme.vars.palette.info.main,
-        ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
+        backgroundColor: alpha(theme.palette.info.main, 0.84),
+        ...theme.applyStyles('light', {
+          backgroundColor: theme.palette.info.main,
         }),
       },
     },
     [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
-      color: theme.vars.palette.info.main,
-      ...theme.applyStyles('dark', {
-        color: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
+      color: alpha(theme.palette.info.main, 0.84),
+      ...theme.applyStyles('light', {
+        color: theme.palette.info.main,
       }),
     },
   },

package/src/components/Messages/GasRefuelMessage.tsx

@@ -1,4 +1,4 @@
-import EvStation from '@mui/icons-material/EvStation'
+import { EvStation } from '@mui/icons-material'
 import type { BoxProps } from '@mui/material'
 import { Box, Collapse, Typography } from '@mui/material'
 import type { ChangeEvent } from 'react'

package/src/components/Messages/GasSufficiencyMessage.tsx

@@ -1,4 +1,4 @@
-import EvStation from '@mui/icons-material/EvStation'
+import { EvStation } from '@mui/icons-material'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { formatUnits } from 'viem'

package/src/components/Messages/ToAddressRequiredMessage.tsx

@@ -1,4 +1,4 @@
-import Wallet from '@mui/icons-material/Wallet'
+import { Wallet } from '@mui/icons-material'
 import type { BoxProps } from '@mui/material'
 import { Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'

package/src/components/NotFound.tsx

@@ -1,4 +1,4 @@
-import Block from '@mui/icons-material/Block'
+import { Block } from '@mui/icons-material'
 import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 

package/src/components/PoweredBy/PoweredBy.style.ts

@@ -5,6 +5,6 @@ export const Link = styled(MuiLink)(({ theme }) => ({
   alignItems: 'center',
   border: 'none',
   ':hover': {
-    color: theme.vars.palette.primary.main,
+    color: theme.palette.primary.main,
   },
 }))

package/src/components/ProgressToNextUpdate.tsx

@@ -67,9 +67,9 @@ export const ProgressToNextUpdate: React.FC<
             value={100}
             sx={(theme) => ({
               position: 'absolute',
-              color: theme.vars.palette.grey[300],
-              ...theme.applyStyles('dark', {
-                color: theme.vars.palette.grey[800],
+              color: theme.palette.grey[800],
+              ...theme.applyStyles('light', {
+                color: theme.palette.grey[300],
               }),
             })}
           />
@@ -79,9 +79,9 @@ export const ProgressToNextUpdate: React.FC<
             value={value}
             sx={(theme) => ({
               opacity: value === 100 && !isLoading ? 0.5 : 1,
-              color: theme.vars.palette.primary.main,
-              ...theme.applyStyles('dark', {
-                color: theme.vars.palette.primary.light,
+              color: theme.palette.primary.light,
+              ...theme.applyStyles('light', {
+                color: theme.palette.primary.main,
               }),
             })}
           />

package/src/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -8,7 +8,7 @@ export const IconCard = styled(Card)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  borderRadius: theme.vars.shape.borderRadiusTertiary,
+  borderRadius: theme.shape.borderRadiusTertiary,
   zIndex: 1110,
 }))
 

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,5 +1,4 @@
-import ArrowDownward from '@mui/icons-material/ArrowDownward'
-import ArrowForward from '@mui/icons-material/ArrowForward'
+import { ArrowDownward, ArrowForward } from '@mui/icons-material'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
 import { useToAddressReset } from '../../hooks/useToAddressReset.js'

package/src/components/RouteCard/RouteCard.tsx

@@ -1,7 +1,6 @@
 import type { TokenAmount } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import ExpandLess from '@mui/icons-material/ExpandLess'
-import ExpandMore from '@mui/icons-material/ExpandMore'
+import { ExpandLess, ExpandMore } from '@mui/icons-material'
 import { Box, Collapse } from '@mui/material'
 import type { MouseEventHandler } from 'react'
 import { useState } from 'react'

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,6 +1,5 @@
 import { isGaslessStep } from '@lifi/sdk'
-import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
-import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
+import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material'
 import { Box, Tooltip, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'

package/src/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -1,4 +1,4 @@
-import Layers from '@mui/icons-material/Layers'
+import { Layers } from '@mui/icons-material'
 import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { IconTypography } from '../IconTypography.js'

package/src/components/RouteCard/RouteCardSkeleton.tsx

@@ -29,7 +29,7 @@ export const RouteCardSkeleton: React.FC<
             width={112}
             height={24}
             sx={(theme) => ({
-              borderRadius: theme.vars.shape.borderRadius,
+              borderRadius: `${theme.shape.borderRadius}px`,
             })}
           />
         </Box>

package/src/components/RouteCard/RouteNotFoundCard.tsx

@@ -1,4 +1,4 @@
-import Route from '@mui/icons-material/Route'
+import { Route } from '@mui/icons-material'
 import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 

package/src/components/Routes/Routes.tsx

@@ -77,7 +77,7 @@ export const Routes: React.FC<CardProps> = (props) => {
           <RouteCard route={currentRoute} variant="cardless" active />
         )}
 
-        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>
+        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter appear>
           <Box
             sx={{
               mt: 2,

package/src/components/Routes/RoutesExpanded.style.ts

@@ -33,7 +33,7 @@ interface ContainerProps extends ScopedCssBaselineProps {
 export const Container = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
 })<ContainerProps>(({ theme, minimumHeight }) => ({
-  backgroundColor: theme.vars.palette.background.default,
+  backgroundColor: theme.palette.background.default,
   overflow: 'auto',
   width: 436,
   marginLeft: theme.spacing(3),
@@ -52,7 +52,7 @@ export const Container = styled(ScopedCssBaseline, {
 }))
 
 export const Header = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.vars.palette.background.default,
+  backgroundColor: theme.palette.background.default,
   backdropFilter: 'blur(12px)',
   display: 'flex',
   justifyContent: 'space-between',

package/src/components/Search/SearchInput.style.tsx

@@ -24,7 +24,7 @@ export const StickySearchInputContainer = styled(Box, {
   paddingBottom: theme.spacing(2),
   paddingLeft: theme.spacing(3),
   paddingRight: theme.spacing(3),
-  backgroundColor: theme.vars.palette.background.default,
+  backgroundColor: theme.palette.background.default,
   ...(theme.header?.position === 'fixed'
     ? {
         position: 'fixed',

package/src/components/Search/SearchInput.tsx

@@ -1,4 +1,4 @@
-import Search from '@mui/icons-material/Search'
+import { Search } from '@mui/icons-material'
 import { FormControl, InputAdornment } from '@mui/material'
 import type { FocusEventHandler, FormEventHandler } from 'react'
 import { InputCard } from '../../components/Card/InputCard.js'

package/src/components/Search/SearchNotFound.style.tsx

@@ -22,7 +22,7 @@ export const NotFoundContainer = styled(Box, {
 
 export const NotFoundMessage = styled(Typography)(({ theme }) => ({
   fontSize: 14,
-  color: theme.vars.palette.text.secondary,
+  color: theme.palette.text.secondary,
   textAlign: 'center',
   flex: 1,
   marginTop: theme.spacing(2),

package/src/components/Search/SearchNotFound.tsx

@@ -1,4 +1,4 @@
-import SearchOff from '@mui/icons-material/SearchOff'
+import { SearchOff } from '@mui/icons-material'
 import {
   NotFoundContainer,
   NotFoundIconContainer,

package/src/components/Select.tsx

@@ -10,7 +10,7 @@ import {
 export const Select = styled(MuiSelect, {
   shouldForwardProp: (prop) => prop !== 'dense',
 })<{ dense?: boolean }>(({ theme }) => ({
-  backgroundColor: theme.vars.palette.common.white,
+  backgroundColor: theme.palette.background.paper,
   [`.${inputBaseClasses.input}`]: {
     padding: theme.spacing(2),
     display: 'flex',
@@ -18,7 +18,7 @@ export const Select = styled(MuiSelect, {
   },
   [`.${selectClasses.icon}`]: {
     right: 10,
-    color: theme.vars.palette.text.primary,
+    color: theme.palette.text.primary,
   },
   [`.${listItemIconClasses.root}`]: {
     minWidth: 38,
@@ -26,8 +26,8 @@ export const Select = styled(MuiSelect, {
   [`.${outlinedInputClasses.notchedOutline}`]: {
     display: 'none',
   },
-  ...theme.applyStyles('dark', {
-    backgroundColor: theme.vars.palette.background.paper,
+  ...theme.applyStyles('light', {
+    backgroundColor: theme.palette.common.white,
   }),
   variants: [
     {

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -1,6 +1,8 @@
 import {
   CardContent as MuiCardContent,
   cardHeaderClasses,
+  darken,
+  lighten,
   styled,
 } from '@mui/material'
 import type { FormType } from '../../stores/form/types.js'
@@ -14,7 +16,7 @@ export const SelectTokenCardHeader = styled(CardHeader, {
   ({ theme, selected, compact }) => ({
     padding: theme.spacing(2),
     [`.${cardHeaderClasses.title}`]: {
-      color: theme.vars.palette.text.secondary,
+      color: theme.palette.text.secondary,
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
@@ -39,7 +41,7 @@ export const SelectTokenCardHeader = styled(CardHeader, {
         props: ({ selected }) => selected,
         style: {
           [`.${cardHeaderClasses.title}`]: {
-            color: theme.vars.palette.text.primary,
+            color: theme.palette.text.primary,
             fontWeight: 600,
           },
         },
@@ -96,16 +98,16 @@ export const CardContent = styled(MuiCardContent, {
       paddingBottom: 0,
     },
     ...(cardVariant !== 'outlined' && {
-      backgroundColor: theme.vars.palette.background.paper,
+      backgroundColor: theme.palette.background.paper,
       mask: `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`,
     }),
     ...(cardVariant === 'filled' && {
       '&:hover': {
         cursor: 'pointer',
-        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,
-        ...theme.applyStyles('dark', {
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
-        }),
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.background.paper, 0.02)
+            : lighten(theme.palette.background.paper, 0.02),
       },
     }),
   }