@lifi/widget 3.19.2 → 3.20.0-beta.1

package/src/components/ButtonTertiary.tsx

@@ -1,18 +1,26 @@
 import { Button, buttonClasses, styled } from '@mui/material'
-import { getContrastAlphaColor } from '../utils/colors.js'
 
 export const ButtonTertiary = styled(Button)(({ theme }) => ({
-  color: theme.palette.text.primary,
+  color: theme.vars.palette.text.primary,
   height: 40,
   fontSize: 14,
-  backgroundColor: getContrastAlphaColor(theme, 0.04),
+  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   '&:hover, &:active': {
-    backgroundColor: getContrastAlphaColor(theme, 0.08),
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
   },
   [`&.${buttonClasses.loading}:disabled`]: {
-    backgroundColor: getContrastAlphaColor(theme, 0.04),
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   },
+  ...theme.applyStyles('dark', {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    '&:hover, &:active': {
+      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    },
+    [`&.${buttonClasses.loading}:disabled`]: {
+      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    },
+  }),
   [`.${buttonClasses.loadingIndicator}`]: {
-    color: theme.palette.text.primary,
+    color: theme.vars.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, alpha, darken, lighten, styled } from '@mui/material'
+import { Card as MuiCard, 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.palette.primary.main,
+          borderColor: theme.vars.palette.primary.main,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
           '&:hover': {
-            backgroundColor: darken(theme.palette.primary.main, 0.6),
-            ...theme.applyStyles('light', {
-              backgroundColor: lighten(theme.palette.primary.main, 0.9),
-            }),
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,
           },
-          ...theme.applyStyles('light', {
-            backgroundColor: lighten(theme.palette.primary.main, 0.95),
+          ...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)`,
+            },
           }),
         },
       },
@@ -47,18 +47,18 @@ export const Card = styled(MuiCard, {
           type: 'selected',
         },
         style: {
-          backgroundColor: darken(theme.palette.secondary.main, 0.76),
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 15%, white)`,
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: alpha(theme.palette.secondary.main, 0.2),
+          borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.2)`,
           '&:hover': {
-            backgroundColor: darken(theme.palette.secondary.main, 0.72),
-            ...theme.applyStyles('light', {
-              backgroundColor: lighten(theme.palette.secondary.main, 0.8),
-            }),
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 20%, white)`,
           },
-          ...theme.applyStyles('light', {
-            backgroundColor: lighten(theme.palette.secondary.main, 0.85),
+          ...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)`,
+            },
           }),
         },
       },
@@ -69,7 +69,7 @@ export const Card = styled(MuiCard, {
         style: {
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: theme.palette.error.main,
+          borderColor: theme.vars.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.shape.borderRadius,
+  borderRadius: theme.vars.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.palette.text.primary,
+    color: theme.vars.palette.text.primary,
     textAlign: 'left',
   },
   [`.${cardHeaderClasses.subheader}`]: {
     fontWeight: 500,
     fontSize: 12,
     lineHeight: 1.3334,
-    color: theme.palette.text.secondary,
+    color: theme.vars.palette.text.secondary,
     textAlign: 'left',
   },
 }))

package/src/components/Card/CardIconButton.tsx

@@ -1,15 +1,14 @@
 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: getContrastAlphaColor(theme, 0.04),
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
     '&:hover': {
-      backgroundColor: getContrastAlphaColor(theme, 0.08),
+      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
     },
     fontSize: '1rem',
   }

package/src/components/Card/CardLabel.tsx

@@ -1,16 +1,9 @@
-import {
-  Box,
-  Typography,
-  getContrastRatio,
-  lighten,
-  styled,
-} from '@mui/material'
-import { blend } from '../../utils/colors.js'
+import { Box, Typography, styled } from '@mui/material'
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: 'secondary' | 'success' }>(({ theme }) => ({
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: theme.vars.shape.borderRadius,
   padding: 0,
   display: 'flex',
   alignItems: 'center',
@@ -19,67 +12,30 @@ export const CardLabel = styled(Box, {
   minWidth: 24,
   userSelect: 'none',
   fontSize: '1rem',
-  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
-    ),
+  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)`,
   }),
   variants: [
     {
       props: { variant: 'secondary' },
       style: {
-        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,
+        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})`,
         }),
       },
     },
     {
       props: { variant: 'success' },
       style: {
-        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),
+        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)`,
         }),
       },
     },

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.palette.text.primary,
+  color: theme.vars.palette.text.primary,
   '&:after': {
     content: 'none',
-    color: theme.palette.error.main,
+    color: theme.vars.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.palette.background.paper,
+  background: theme.vars.palette.background.paper,
   width: 96,
   height: 96,
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: theme.vars.shape.borderRadius,
 }))

package/src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import type { DialogProps, PaperProps, Theme } from '@mui/material'
+import type { DialogProps, Theme } from '@mui/material'
 import { Dialog as MuiDialog } from '@mui/material'
 import type { PropsWithChildren } from 'react'
 import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js'
@@ -10,17 +10,16 @@ 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',
@@ -42,7 +41,6 @@ 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'
+import ArrowBack from '@mui/icons-material/ArrowBack'
 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'
+import CloseRounded from '@mui/icons-material/CloseRounded'
 import { IconButton, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useDrawer } from '../../AppDrawerContext.js'

package/src/components/Header/DisconnectIconButton.tsx

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

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

@@ -7,12 +7,14 @@ 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',
-  color: theme.palette.text.primary,
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'transparent',
+  }),
+  color: theme.vars.palette.text.primary,
   flexDirection: 'row',
   alignItems: 'center',
   position: 'relative',
@@ -24,7 +26,7 @@ export const Container = styled(Box, {
   return {
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.vars.palette.background.default,
     backdropFilter: 'blur(12px)',
     position: sticky ? 'sticky' : 'relative',
     top: 0,
@@ -46,16 +48,22 @@ export const Container = styled(Box, {
 export const WalletButton = styled(Button, {
   shouldForwardProp: (prop) => prop !== 'subvariant',
 })<{ subvariant?: WidgetSubvariant }>(({ subvariant, theme }) => ({
-  color: theme.palette.text.primary,
-  backgroundColor: 'transparent',
+  color: theme.vars.palette.text.primary,
   padding: theme.spacing(1, 1.5),
   maxHeight: 40,
   fontSize: '0.875rem',
   fontWeight: 600,
-  borderRadius: theme.shape.borderRadius * 2,
+  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+  backgroundColor: 'transparent',
   '&:hover': {
-    backgroundColor: getContrastAlphaColor(theme, 0.04),
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 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,13 +2,8 @@ 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',
@@ -32,19 +27,31 @@ export const SettingsIconButton = styled(IconButton, {
   switch (variant) {
     case 'info':
       return {
-        backgroundColor: getInfoBackgroundColor(theme),
+        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
         '&:hover': {
-          backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
+          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.info.mainChannel} / 0.12) 80%, black)`,
         },
+        ...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: getWarningBackgroundColor(theme),
+        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
         '&:hover': {
-          backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
+          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)`,
         },
+        ...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:
-      break
+      return {}
   }
 })

package/src/components/Header/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Settings } from '@mui/icons-material'
+import Settings from '@mui/icons-material/Settings'
 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'
+import ReceiptLong from '@mui/icons-material/ReceiptLong'
 import { IconButton, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'

package/src/components/Header/WalletHeader.tsx

@@ -4,7 +4,8 @@ import {
   useAccount,
   useWalletMenu,
 } from '@lifi/wallet-management'
-import { ExpandMore, Wallet } from '@mui/icons-material'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import Wallet from '@mui/icons-material/Wallet'
 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.shape.borderRadius,
-    color: theme.palette.text.primary,
+    borderRadius: theme.vars.shape.borderRadius,
+    color: theme.vars.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.shape.borderRadiusSecondary,
+      borderRadius: theme.vars.shape.borderRadiusSecondary,
       padding: theme.spacing(1, 0, 1, 1),
       [`& .${svgIconClasses.root}`]: {
         fontSize: 20,
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
       },
       ':hover': {
         background: 'none',

package/src/components/Header/WalletMenu.tsx

@@ -3,11 +3,9 @@ import {
   useAccount,
   useWalletMenu,
 } from '@lifi/wallet-management'
-import {
-  ContentCopyRounded,
-  OpenInNewRounded,
-  PowerSettingsNewRounded,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
 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, alpha, styled } from '@mui/material'
+import { Box, styled } from '@mui/material'
 
 export const IconTypography = styled(Box)(({ theme }) => ({
-  color: alpha(theme.palette.common.white, 0.4),
+  color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
   lineHeight: 0,
-  ...theme.applyStyles('light', {
-    color: alpha(theme.palette.common.black, 0.32),
+  ...theme.applyStyles('dark', {
+    color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.32)`,
   }),
 }))

package/src/components/ListItemButton.tsx

@@ -1,14 +1,12 @@
 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.shape.borderRadius,
+    borderRadius: theme.vars.shape.borderRadius,
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {
-      backgroundColor: backgroundHoverColor,
+      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
     },
     variants: [
       {

package/src/components/Menu.tsx

@@ -8,18 +8,18 @@ import {
 
 export const Menu = styled(MuiMenu)(({ theme }) => ({
   [`& .${menuClasses.paper}`]: {
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: theme.vars.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.shape.borderRadiusSecondary,
+      borderRadius: theme.vars.shape.borderRadiusSecondary,
       padding: theme.spacing(1, 2, 1, 1),
       [`& .${svgIconClasses.root}`]: {
         fontSize: 20,
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         marginRight: theme.spacing(1.5),
       },
     },

package/src/components/Messages/AccountNotDeployedMessage.tsx

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

package/src/components/Messages/FundsSufficiencyMessage.tsx

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