@lifi/widget 3.18.7 → 3.19.0-beta.1

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'

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

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

package/src/components/Messages/GasRefuelMessage.tsx

@@ -1,4 +1,4 @@
-import { EvStation } from '@mui/icons-material'
+import EvStation from '@mui/icons-material/EvStation'
 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'
+import EvStation from '@mui/icons-material/EvStation'
 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'
+import Wallet from '@mui/icons-material/Wallet'
 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'
+import Block from '@mui/icons-material/Block'
 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.palette.primary.main,
+    color: theme.vars.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.palette.grey[800],
-              ...theme.applyStyles('light', {
-                color: theme.palette.grey[300],
+              color: theme.vars.palette.grey[300],
+              ...theme.applyStyles('dark', {
+                color: theme.vars.palette.grey[800],
               }),
             })}
           />
@@ -79,9 +79,9 @@ export const ProgressToNextUpdate: React.FC<
             value={value}
             sx={(theme) => ({
               opacity: value === 100 && !isLoading ? 0.5 : 1,
-              color: theme.palette.primary.light,
-              ...theme.applyStyles('light', {
-                color: theme.palette.primary.main,
+              color: theme.vars.palette.primary.main,
+              ...theme.applyStyles('dark', {
+                color: theme.vars.palette.primary.light,
               }),
             })}
           />

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.shape.borderRadiusTertiary,
+  borderRadius: theme.vars.shape.borderRadiusTertiary,
   zIndex: 1110,
 }))
 

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,4 +1,5 @@
-import { ArrowDownward, ArrowForward } from '@mui/icons-material'
+import ArrowDownward from '@mui/icons-material/ArrowDownward'
+import ArrowForward from '@mui/icons-material/ArrowForward'
 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,6 +1,7 @@
 import type { TokenAmount } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import { ExpandLess, ExpandMore } from '@mui/icons-material'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
 import { Box, Collapse } from '@mui/material'
 import type { MouseEventHandler } from 'react'
 import { useState } from 'react'

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,5 +1,6 @@
 import { isGaslessStep } from '@lifi/sdk'
-import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material'
+import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
+import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
 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'
+import Layers from '@mui/icons-material/Layers'
 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.shape.borderRadius}px`,
+              borderRadius: theme.vars.shape.borderRadius,
             })}
           />
         </Box>

package/src/components/RouteCard/RouteNotFoundCard.tsx

@@ -1,4 +1,4 @@
-import { Route } from '@mui/icons-material'
+import Route from '@mui/icons-material/Route'
 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 appear>
+        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>
           <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.palette.background.default,
+  backgroundColor: theme.vars.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.palette.background.default,
+  backgroundColor: theme.vars.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.palette.background.default,
+  backgroundColor: theme.vars.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'
+import Search from '@mui/icons-material/Search'
 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.palette.text.secondary,
+  color: theme.vars.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'
+import SearchOff from '@mui/icons-material/SearchOff'
 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.palette.background.paper,
+  backgroundColor: theme.vars.palette.common.white,
   [`.${inputBaseClasses.input}`]: {
     padding: theme.spacing(2),
     display: 'flex',
@@ -18,7 +18,7 @@ export const Select = styled(MuiSelect, {
   },
   [`.${selectClasses.icon}`]: {
     right: 10,
-    color: theme.palette.text.primary,
+    color: theme.vars.palette.text.primary,
   },
   [`.${listItemIconClasses.root}`]: {
     minWidth: 38,
@@ -26,8 +26,8 @@ export const Select = styled(MuiSelect, {
   [`.${outlinedInputClasses.notchedOutline}`]: {
     display: 'none',
   },
-  ...theme.applyStyles('light', {
-    backgroundColor: theme.palette.common.white,
+  ...theme.applyStyles('dark', {
+    backgroundColor: theme.vars.palette.background.paper,
   }),
   variants: [
     {

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

@@ -1,8 +1,6 @@
 import {
   CardContent as MuiCardContent,
   cardHeaderClasses,
-  darken,
-  lighten,
   styled,
 } from '@mui/material'
 import type { FormType } from '../../stores/form/types.js'
@@ -16,7 +14,7 @@ export const SelectTokenCardHeader = styled(CardHeader, {
   ({ theme, selected, compact }) => ({
     padding: theme.spacing(2),
     [`.${cardHeaderClasses.title}`]: {
-      color: theme.palette.text.secondary,
+      color: theme.vars.palette.text.secondary,
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
@@ -41,7 +39,7 @@ export const SelectTokenCardHeader = styled(CardHeader, {
         props: ({ selected }) => selected,
         style: {
           [`.${cardHeaderClasses.title}`]: {
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             fontWeight: 600,
           },
         },
@@ -98,16 +96,16 @@ export const CardContent = styled(MuiCardContent, {
       paddingBottom: 0,
     },
     ...(cardVariant !== 'outlined' && {
-      backgroundColor: theme.palette.background.paper,
+      backgroundColor: theme.vars.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:
-          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%, white)`,
+        ...theme.applyStyles('dark', {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
+        }),
       },
     }),
   }

package/src/components/SendToWallet/SendToWallet.style.tsx

@@ -6,7 +6,7 @@ export const SendToWalletCardHeader = styled(CardHeader, {
 })<{ selected?: boolean }>(({ theme }) => ({
   width: '100%',
   [`.${cardHeaderClasses.title}`]: {
-    color: theme.palette.text.secondary,
+    color: theme.vars.palette.text.secondary,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -36,7 +36,7 @@ export const SendToWalletCardHeader = styled(CardHeader, {
       props: ({ selected }) => selected,
       style: {
         [`.${cardHeaderClasses.title}`]: {
-          color: theme.palette.text.primary,
+          color: theme.vars.palette.text.primary,
           fontWeight: 600,
           width: 224,
           [theme.breakpoints.down(theme.breakpoints.values.sm)]: {

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -1,5 +1,5 @@
 import { useAccount } from '@lifi/wallet-management'
-import { CloseRounded } from '@mui/icons-material'
+import CloseRounded from '@mui/icons-material/CloseRounded'
 import { Box, Collapse } from '@mui/material'
 import { type MouseEventHandler, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

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

package/src/components/Skeleton/WidgetSkeleton.style.tsx

@@ -6,7 +6,7 @@ export const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
   flexDirection: 'row',
   justifyContent: 'flex-end',
   alignItems: 'center',
-  color: theme.palette?.text.primary,
+  color: theme.vars?.palette?.text.primary,
   paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
 }))
 
@@ -71,7 +71,7 @@ export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.vars.palette.background.default,
     backdropFilter: 'blur(12px)',
     position: 'relative',
     top: 0,

package/src/components/Skeleton/WidgetSkeleton.tsx

@@ -71,19 +71,22 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
   const configTheme = config?.theme
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
   const appearanceMode =
-    !appearance || appearance === 'auto'
+    !appearance || appearance === 'system'
       ? prefersDarkMode
         ? 'dark'
         : 'light'
       : appearance
 
-  const theme = useMemo(
-    () => createTheme(appearanceMode, configTheme),
-    [appearanceMode, configTheme]
-  )
+  const theme = useMemo(() => createTheme(configTheme), [configTheme])
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider
+      theme={theme}
+      defaultMode={appearanceMode}
+      modeStorageKey="li.fi-widget-mode"
+      colorSchemeStorageKey="li.fi-widget-color-scheme"
+      disableTransitionOnChange
+    >
       <AppExpandedContainer>
         <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>
           <SkeletonHeaderContainer>

package/src/components/Step/CircularProgress.style.tsx

@@ -3,7 +3,6 @@ import type { Theme } from '@mui/material'
 import {
   Box,
   CircularProgress as MuiCircularProgress,
-  alpha,
   circularProgressClasses,
   keyframes,
   styled,
@@ -16,16 +15,16 @@ const getStatusColor = (
 ) => {
   switch (status) {
     case 'ACTION_REQUIRED':
-      return alpha(theme.palette.info.main, 0.12)
+      return `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`
     case 'DONE':
       if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
-        return alpha(theme.palette.warning.main, 0.48)
+        return `rgba(${theme.vars.palette.warning.mainChannel} / 0.48)`
       }
-      return alpha(theme.palette.success.main, 0.12)
+      return `rgba(${theme.vars.palette.success.mainChannel} / 0.12)`
     case 'FAILED':
-      return alpha(theme.palette.error.main, 0.12)
+      return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`
     default:
-      return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
+      return theme.vars.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
   }
 }
 
@@ -35,7 +34,7 @@ export const CircularIcon = styled(Box, {
   ({ theme, status, substatus }) => ({
     backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
       ? getStatusColor(theme, status, substatus)
-      : theme.palette.background.paper,
+      : theme.vars.palette.background.paper,
     borderStyle: 'solid',
     borderColor: getStatusColor(theme, status, substatus),
     borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
@@ -68,10 +67,11 @@ const circleAnimation = keyframes`
 // This `styled()` function invokes keyframes. `styled-components` only supports keyframes
 // in string templates. Do not convert these styles in JS object as it will break.
 export const CircularProgressPending = styled(MuiCircularProgress)`
-  color: ${({ theme }) =>
-    theme.palette.mode === 'light'
-      ? theme.palette.primary.main
-      : theme.palette.primary.light};
+  color: ${({ theme }) => theme.vars.palette.primary.main};
+  ${({ theme }) =>
+    theme.applyStyles('dark', {
+      color: theme.vars.palette.primary.light,
+    })}
   animation-duration: 3s;
   position: absolute;
   .${circularProgressClasses.circle} {

package/src/components/Step/CircularProgress.tsx

@@ -1,11 +1,8 @@
 import type { Process } from '@lifi/sdk'
-import {
-  Done,
-  ErrorRounded,
-  InfoRounded,
-  WarningRounded,
-} from '@mui/icons-material'
-import { darken } from '@mui/material'
+import Done from '@mui/icons-material/Done'
+import ErrorRounded from '@mui/icons-material/ErrorRounded'
+import InfoRounded from '@mui/icons-material/InfoRounded'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import {
   CircularIcon,
   CircularProgressPending,
@@ -32,7 +29,7 @@ export function CircularProgress({ process }: { process: Process }) {
           sx={(theme) => ({
             position: 'absolute',
             fontSize: '1.5rem',
-            color: darken(theme.palette.warning.main, 0.32),
+            color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 68%, black)`,
           })}
         />
       ) : process.status === 'DONE' ? (

package/src/components/Step/DestinationWalletAddress.tsx

@@ -1,5 +1,6 @@
 import type { LiFiStepExtended } from '@lifi/sdk'
-import { LinkRounded, Wallet } from '@mui/icons-material'
+import LinkRounded from '@mui/icons-material/LinkRounded'
+import Wallet from '@mui/icons-material/Wallet'
 import { Box, Link, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { CardIconButton } from '../Card/CardIconButton.js'

package/src/components/Step/StepProcess.tsx

@@ -1,5 +1,5 @@
 import type { LiFiStep, Process } from '@lifi/sdk'
-import { OpenInNewRounded } from '@mui/icons-material'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { Box, Link, Typography } from '@mui/material'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useProcessMessage } from '../../hooks/useProcessMessage.js'

package/src/components/StepActions/StepActions.style.tsx

@@ -3,7 +3,6 @@ import {
   StepConnector as MuiStepConnector,
   StepLabel as MuiStepLabel,
   Typography,
-  alpha,
   stepConnectorClasses,
   stepLabelClasses,
   styled,
@@ -18,9 +17,9 @@ export const StepConnector = styled(MuiStepConnector, {
   [`.${stepConnectorClasses.line}`]: {
     minHeight: 8,
     borderLeftWidth: 2,
-    borderColor: alpha(theme.palette.common.white, 0.16),
-    ...theme.applyStyles('light', {
-      borderColor: alpha(theme.palette.common.black, 0.12),
+    borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+    ...theme.applyStyles('dark', {
+      borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
     }),
   },
 }))
@@ -49,16 +48,19 @@ export const StepLabelTypography = styled(Typography)(({ theme }) => ({
   fontSize: 12,
   fontWeight: 500,
   lineHeight: 1.325,
-  color: theme.palette.text.secondary,
+  color: theme.vars.palette.text.secondary,
   padding: theme.spacing(0.5, 0),
 }))
 
 export const StepContent = styled(Box, {
   shouldForwardProp: (prop) => !['last'].includes(prop as string),
 })<{ last: boolean }>(({ theme }) => ({
-  borderLeft: `2px solid ${alpha(theme.palette.common.white, 0.16)}`,
   margin: theme.spacing(0, 0, 0, 2.375),
   paddingLeft: theme.spacing(4.375),
+  borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+  ...theme.applyStyles('dark', {
+    borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+  }),
   variants: [
     {
       props: ({ last }) => last,
@@ -68,12 +70,9 @@ export const StepContent = styled(Box, {
       },
     },
   ],
-  ...theme.applyStyles('light', {
-    borderLeft: `2px solid ${alpha(theme.palette.common.black, 0.12)}`,
-  }),
 }))
 
 export const StepAvatar = styled(AvatarMasked)(({ theme }) => ({
-  color: theme.palette.text.primary,
+  color: theme.vars.palette.text.primary,
   backgroundColor: 'transparent',
 }))

package/src/components/StepActions/StepActions.tsx

@@ -1,6 +1,8 @@
 import type { LiFiStep, StepExtended } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material'
+import ArrowForward from '@mui/icons-material/ArrowForward'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
 import type { StepIconProps } from '@mui/material'
 import {
   Badge,

package/src/components/Switch.tsx

@@ -1,9 +1,4 @@
-import {
-  Switch as MuiSwitch,
-  alpha,
-  styled,
-  switchClasses,
-} from '@mui/material'
+import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'
 
 export const Switch = styled(MuiSwitch)(({ theme }) => ({
   width: 42,
@@ -15,9 +10,9 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
     transitionDuration: theme.transitions.duration.standard,
     [`&.${switchClasses.checked}`]: {
       transform: 'translateX(18px)',
-      color: theme.palette.common.white,
+      color: theme.vars.palette.common.white,
       [`& + .${switchClasses.track}`]: {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.vars.palette.primary.main,
         opacity: 1,
         border: 0,
       },
@@ -26,20 +21,17 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
       },
     },
     [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
-      color: theme.palette.primary.main,
+      color: theme.vars.palette.primary.main,
       border: '6px solid',
-      borderColor: theme.palette.common.white,
+      borderColor: theme.vars.palette.common.white,
     },
     [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
-      color: alpha(theme.palette.common.white, 0.12),
-      ...theme.applyStyles('light', {
-        color: alpha(theme.palette.common.black, 0.12),
-      }),
+      color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
     },
     [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
-      opacity: 0.3,
-      ...theme.applyStyles('light', {
-        opacity: 0.7,
+      opacity: 0.7,
+      ...theme.applyStyles('dark', {
+        opacity: 0.3,
       }),
     },
   },
@@ -50,13 +42,10 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
   },
   [`.${switchClasses.track}`]: {
     borderRadius: 24 / 2,
-    backgroundColor: alpha(theme.palette.common.white, 0.16),
     opacity: 1,
     transition: theme.transitions.create(['background-color'], {
       duration: theme.transitions.duration.standard,
     }),
-    ...theme.applyStyles('light', {
-      backgroundColor: alpha(theme.palette.common.black, 0.16),
-    }),
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
   },
 }))