@lifi/widget 3.19.0-beta.0 → 3.19.0-beta.2

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/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/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/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/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/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/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/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/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

@@ -3,7 +3,6 @@ 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 { darken } from '@mui/material'
 import {
   CircularIcon,
   CircularProgressPending,
@@ -30,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/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/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)`,
   },
 }))

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

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

package/src/components/Token/Token.style.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, alpha, styled } from '@mui/material'
+import { Box, Typography, styled } from '@mui/material'
 
 export const TextSecondaryContainer = styled(Box)(() => ({
   display: 'flex',
@@ -13,13 +13,13 @@ export const TextSecondary = styled(Typography, {
   fontSize: 12,
   lineHeight: 1,
   fontWeight: 500,
-  color: theme.palette.text.secondary,
+  color: theme.vars.palette.text.secondary,
   whiteSpace: 'nowrap',
   variants: [
     {
       props: ({ dot }) => dot,
       style: {
-        color: alpha(theme.palette.text.secondary, 0.56),
+        color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)`,
       },
     },
   ],
@@ -29,8 +29,8 @@ export const TokenDivider = styled(Box)(({ theme }) => ({
   height: 16,
   borderLeftWidth: 2,
   borderLeftStyle: 'solid',
-  borderColor: theme.palette.grey[800],
-  ...theme.applyStyles('light', {
-    borderColor: theme.palette.grey[300],
+  borderColor: theme.vars.palette.grey[300],
+  ...theme.applyStyles('dark', {
+    borderColor: theme.vars.palette.grey[800],
   }),
 }))