@lifi/widget 3.19.0-beta.3 → 3.19.0

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/SelectChainAndToken.tsx

@@ -43,11 +43,7 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
       sx={{ display: 'flex', flexDirection: isCompact ? 'row' : 'column' }}
       {...props}
     >
-      <SelectTokenButton
-        formType="from"
-        compact={isCompact}
-        hiddenReverse={hiddenReverse}
-      />
+      <SelectTokenButton formType="from" compact={isCompact} />
       {!hiddenToToken ? (
         !hiddenReverse ? (
           <ReverseTokensButton vertical={!isCompact} />
@@ -56,11 +52,7 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
         )
       ) : null}
       {!hiddenToToken ? (
-        <SelectTokenButton
-          formType="to"
-          compact={isCompact}
-          hiddenReverse={hiddenReverse}
-        />
+        <SelectTokenButton formType="to" compact={isCompact} />
       ) : null}
     </Box>
   )

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,
           },
         },
@@ -81,36 +83,32 @@ export const SelectTokenCard = styled(Card)(({ theme }) => {
 
 export const CardContent = styled(MuiCardContent, {
   shouldForwardProp: (prop) => prop !== 'formType' && prop !== 'compact',
-})<{ formType: FormType; compact: boolean; mask?: boolean }>(
-  ({ theme, formType, compact, mask = true }) => {
-    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
-    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
-    const horizontal = compact ? direction : '50%'
-    const vertical = compact ? '50%' : direction
-    return {
-      padding: 0,
-      transition: theme.transitions.create(['background-color'], {
-        duration: theme.transitions.duration.enteringScreen,
-        easing: theme.transitions.easing.easeOut,
-      }),
-      '&:last-child': {
-        paddingBottom: 0,
+})<{ formType: FormType; compact: boolean }>(({ theme, formType, compact }) => {
+  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
+  const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
+  const horizontal = compact ? direction : '50%'
+  const vertical = compact ? '50%' : direction
+  return {
+    padding: 0,
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.easeOut,
+    }),
+    '&:last-child': {
+      paddingBottom: 0,
+    },
+    ...(cardVariant !== 'outlined' && {
+      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:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.background.paper, 0.02)
+            : lighten(theme.palette.background.paper, 0.02),
       },
-      ...(cardVariant !== 'outlined' && {
-        backgroundColor: theme.vars.palette.background.paper,
-        mask: mask
-          ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`
-          : 'none',
-      }),
-      ...(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)`,
-          }),
-        },
-      }),
-    }
+    }),
   }
-)
+})

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -8,6 +8,7 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { HiddenUI } from '../../types/widget.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
@@ -21,12 +22,11 @@ import {
 export const SelectTokenButton: React.FC<
   FormTypeProps & {
     compact: boolean
-    hiddenReverse?: boolean
   }
-> = ({ formType, compact, hiddenReverse }) => {
+> = ({ formType, compact }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { disabledUI, subvariant } = useWidgetConfig()
+  const { disabledUI, subvariant, hiddenUI } = useWidgetConfig()
   const swapOnly = useSwapOnly()
   const tokenKey = FormKeyHelper.getTokenKey(formType)
   const [chainId, tokenAddress] = useFieldValues(
@@ -51,7 +51,8 @@ export const SelectTokenButton: React.FC<
   const defaultPlaceholder =
     formType === 'to' && subvariant === 'refuel'
       ? t('main.selectChain')
-      : formType === 'to' && swapOnly
+      : (formType === 'to' && swapOnly) ||
+          hiddenUI?.includes(HiddenUI.ChainSelect)
         ? t('main.selectToken')
         : t('main.selectChainAndToken')
   const cardTitle: string =
@@ -60,7 +61,7 @@ export const SelectTokenButton: React.FC<
       : t(`main.${formType}`)
   return (
     <SelectTokenCard component="button" onClick={onClick}>
-      <CardContent formType={formType} compact={compact} mask={!hiddenReverse}>
+      <CardContent formType={formType} compact={compact}>
         <CardTitle>{cardTitle}</CardTitle>
         {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
           <SelectTokenCardHeader
@@ -79,15 +80,17 @@ export const SelectTokenButton: React.FC<
               )
             }
             title={isSelected ? token.symbol : defaultPlaceholder}
-            slotProps={{
-              title: {
-                title: isSelected ? token.symbol : defaultPlaceholder,
-              },
-              subheader: {
-                title: isSelected ? chain.name : undefined,
-              },
+            titleTypographyProps={{
+              title: isSelected ? token.symbol : defaultPlaceholder,
             }}
             subheader={isSelected ? chain.name : null}
+            subheaderTypographyProps={
+              isSelected
+                ? {
+                    title: chain.name,
+                  }
+                : undefined
+            }
             selected={isSelected}
             compact={compact}
           />

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.vars.palette.text.secondary,
+    color: theme.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.vars.palette.text.primary,
+          color: theme.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/CloseRounded'
+import { CloseRounded } from '@mui/icons-material'
 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/Wallet'
+import { Wallet } from '@mui/icons-material'
 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.vars?.palette?.text.primary,
+  color: theme.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.vars.palette.background.default,
+    backgroundColor: theme.palette.background.default,
     backdropFilter: 'blur(12px)',
     position: 'relative',
     top: 0,

package/src/components/Skeleton/WidgetSkeleton.tsx

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

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

@@ -3,6 +3,7 @@ import type { Theme } from '@mui/material'
 import {
   Box,
   CircularProgress as MuiCircularProgress,
+  alpha,
   circularProgressClasses,
   keyframes,
   styled,
@@ -15,16 +16,16 @@ const getStatusColor = (
 ) => {
   switch (status) {
     case 'ACTION_REQUIRED':
-      return `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`
+      return alpha(theme.palette.info.main, 0.12)
     case 'DONE':
       if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
-        return `rgba(${theme.vars.palette.warning.mainChannel} / 0.48)`
+        return alpha(theme.palette.warning.main, 0.48)
       }
-      return `rgba(${theme.vars.palette.success.mainChannel} / 0.12)`
+      return alpha(theme.palette.success.main, 0.12)
     case 'FAILED':
-      return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`
+      return alpha(theme.palette.error.main, 0.12)
     default:
-      return theme.vars.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
+      return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
   }
 }
 
@@ -34,7 +35,7 @@ export const CircularIcon = styled(Box, {
   ({ theme, status, substatus }) => ({
     backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
       ? getStatusColor(theme, status, substatus)
-      : theme.vars.palette.background.paper,
+      : theme.palette.background.paper,
     borderStyle: 'solid',
     borderColor: getStatusColor(theme, status, substatus),
     borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
@@ -67,11 +68,10 @@ 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.vars.palette.primary.main};
-  ${({ theme }) =>
-    theme.applyStyles('dark', {
-      color: theme.vars.palette.primary.light,
-    })}
+  color: ${({ theme }) =>
+    theme.palette.mode === 'light'
+      ? theme.palette.primary.main
+      : theme.palette.primary.light};
   animation-duration: 3s;
   position: absolute;
   .${circularProgressClasses.circle} {

package/src/components/Step/CircularProgress.tsx

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

package/src/components/Step/DestinationWalletAddress.tsx

@@ -1,6 +1,5 @@
 import type { LiFiStepExtended } from '@lifi/sdk'
-import LinkRounded from '@mui/icons-material/LinkRounded'
-import Wallet from '@mui/icons-material/Wallet'
+import { LinkRounded, Wallet } from '@mui/icons-material'
 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/OpenInNewRounded'
+import { OpenInNewRounded } from '@mui/icons-material'
 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,6 +3,7 @@ import {
   StepConnector as MuiStepConnector,
   StepLabel as MuiStepLabel,
   Typography,
+  alpha,
   stepConnectorClasses,
   stepLabelClasses,
   styled,
@@ -17,9 +18,9 @@ export const StepConnector = styled(MuiStepConnector, {
   [`.${stepConnectorClasses.line}`]: {
     minHeight: 8,
     borderLeftWidth: 2,
-    borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
-    ...theme.applyStyles('dark', {
-      borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+    borderColor: alpha(theme.palette.common.white, 0.16),
+    ...theme.applyStyles('light', {
+      borderColor: alpha(theme.palette.common.black, 0.12),
     }),
   },
 }))
@@ -48,19 +49,16 @@ export const StepLabelTypography = styled(Typography)(({ theme }) => ({
   fontSize: 12,
   fontWeight: 500,
   lineHeight: 1.325,
-  color: theme.vars.palette.text.secondary,
+  color: theme.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,
@@ -70,9 +68,12 @@ 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.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   backgroundColor: 'transparent',
 }))

package/src/components/StepActions/StepActions.tsx

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

package/src/components/Switch.tsx

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

package/src/components/Tabs/Tabs.style.tsx

@@ -2,6 +2,7 @@ import type { TabProps } from '@mui/material'
 import {
   Tab as MuiTab,
   Tabs as MuiTabs,
+  alpha,
   styled,
   tabClasses,
   tabsClasses,
@@ -21,15 +22,15 @@ export const Tabs = styled(MuiTabs)(({ theme }) => ({
 }))
 
 export const CardTabs = styled(Tabs)(({ theme }) => ({
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  backgroundColor: alpha(theme.palette.common.white, 0.08),
   [`.${tabsClasses.indicator}`]: {
-    backgroundColor: theme.vars.palette.background.paper,
+    backgroundColor: alpha(theme.palette.common.black, 0.56),
+    ...theme.applyStyles('light', {
+      backgroundColor: theme.palette.background.paper,
+    }),
   },
-  ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-    [`.${tabsClasses.indicator}`]: {
-      backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
-    },
+  ...theme.applyStyles('light', {
+    backgroundColor: alpha(theme.palette.common.black, 0.04),
   }),
 }))
 
@@ -39,8 +40,14 @@ export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
   textTransform: 'none',
   fontSize: '1rem',
   fontWeight: 700,
-  color: theme.vars.palette.common.onBackground,
+  color: theme.palette.common.white,
   [`&.${tabClasses.selected}`]: {
-    color: theme.vars.palette.common.onBackground,
+    color: theme.palette.common.white,
+    ...theme.applyStyles('light', {
+      color: theme.palette.common.black,
+    }),
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.common.black,
+  }),
 }))

package/src/components/TextFitter/TextFitter.tsx

@@ -75,7 +75,7 @@ export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
       //     : height
       // }
       preserveAspectRatio={preserveAspectRatio}
-      fill={theme.vars.palette.text.primary}
+      fill={theme.palette.text.primary}
       ref={ref}
     >
       <title>{children}</title>