@lifi/widget 4.0.0-beta.12 → 4.0.0-beta.14

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

@@ -16,9 +16,9 @@ export const AlertMessageCard: React.FC<
   whiteSpace: 'pre-line',
   width: '100%',
   paddingBottom: theme.spacing(2),
-  backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
   ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
   }),
   variants: [
     {
@@ -26,9 +26,9 @@ export const AlertMessageCard: React.FC<
         severity: 'warning',
       },
       style: {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
         }),
       },
     },

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

@@ -9,14 +9,14 @@ export const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =
         [`& + .${switchClasses.track}`]: {
           backgroundColor: theme.vars.palette.info.main,
           ...theme.applyStyles('dark', {
-            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,
           }),
         },
       },
       [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
         color: theme.vars.palette.info.main,
         ...theme.applyStyles('dark', {
-          color: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
+          color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,
         }),
       },
     },

package/src/components/RouteCard/RouteTokens.tsx

@@ -9,7 +9,7 @@ export const RouteTokens: React.FC<{
   route: RouteExtended
   showEssentials?: boolean
 }> = ({ route, showEssentials }) => {
-  const { subvariant, defaultUI } = useWidgetConfig()
+  const { subvariant } = useWidgetConfig()
 
   const fromToken = {
     ...route.steps[0].action.fromToken,
@@ -46,7 +46,6 @@ export const RouteTokens: React.FC<{
           route={route}
           token={toToken}
           impactToken={fromToken}
-          defaultExpanded={defaultUI?.transactionDetailsExpanded}
           showEssentials={showEssentials}
         />
       ) : null}

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

@@ -18,14 +18,14 @@ const getStatusColor = (
     case 'ACTION_REQUIRED':
     case 'MESSAGE_REQUIRED':
     case 'RESET_REQUIRED':
-      return `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`
+      return `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`
     case 'DONE':
       if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
-        return `rgba(${theme.vars.palette.warning.mainChannel} / 0.48)`
+        return `color-mix(in srgb, ${theme.vars.palette.warning.main} 48%, transparent)`
       }
-      return `rgba(${theme.vars.palette.success.mainChannel} / 0.12)`
+      return `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, transparent)`
     case 'FAILED':
-      return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`
+      return `color-mix(in srgb, ${theme.vars.palette.error.main} 12%, transparent)`
     default:
       return null
   }

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

@@ -20,9 +20,9 @@ export const StepConnector: React.FC<
   [`.${stepConnectorClasses.line}`]: {
     minHeight: 8,
     borderLeftWidth: 2,
-    borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+    borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
     ...theme.applyStyles('dark', {
-      borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+      borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,
     }),
   },
 }))
@@ -66,9 +66,9 @@ export const StepContent: React.FC<
 })<{ last?: boolean }>(({ theme }) => ({
   margin: theme.spacing(0, 0, 0, 2.375),
   paddingLeft: theme.spacing(4.375),
-  borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+  borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
   ...theme.applyStyles('dark', {
-    borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+    borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,
   }),
   variants: [
     {

package/src/components/Switch.tsx

@@ -29,7 +29,7 @@ export const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(
       borderColor: theme.vars.palette.common.white,
     },
     [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
-      color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
     },
     [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
       opacity: 0.7,
@@ -49,6 +49,6 @@ export const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(
     transition: theme.transitions.create(['background-color'], {
       duration: theme.transitions.duration.standard,
     }),
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,
   },
 }))

package/src/components/Tabs/NavigationTabs.tsx

@@ -26,9 +26,9 @@ export const NavigationTabs: React.FC<React.ComponentProps<typeof Tabs>> =
       height: '100%',
       width: '100%',
       borderRadius: theme.vars.shape.borderRadius,
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
       ...theme.applyStyles('dark', {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
       }),
     },
   }))

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

@@ -24,14 +24,14 @@ const Tabs = styled(MuiTabs)(({ theme }) => ({
 export const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(
   Tabs
 )(({ theme }) => ({
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   [`.${tabsClasses.indicator}`]: {
     backgroundColor: theme.vars.palette.background.paper,
   },
   ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
     [`.${tabsClasses.indicator}`]: {
-      backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
     },
   }),
 }))

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

@@ -25,7 +25,7 @@ export const TextSecondary: React.FC<
     {
       props: ({ dot }) => dot,
       style: {
-        color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)`,
+        color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)`,
       },
     },
   ],

package/src/components/TokenList/TokenList.style.tsx

@@ -36,7 +36,7 @@ export const IconButton: React.FC<
   minWidth: 'unset',
   borderRadius: theme.vars.shape.borderRadiusTertiary,
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   },
   svg: {
     fontSize: 14,

package/src/components/TransactionCard/ActiveTransactionCard.style.tsx

@@ -24,7 +24,7 @@ export const StatusRow: React.FC<React.ComponentProps<typeof Box>> = styled(
   gap: theme.spacing(1),
   padding: theme.spacing(1),
   borderRadius: theme.vars.shape.borderRadiusTertiary,
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
 }))
 
 export const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.0.0-beta.12'
+export const version = '4.0.0-beta.14'

package/src/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -3,10 +3,10 @@ import type React from 'react'
 
 export const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =
   styled(Box)(({ theme }) => ({
-    background: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     borderRadius: '16px',
     padding: '16px',
     svg: {
-      fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
+      fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
     },
   }))

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -16,18 +16,18 @@ export const SettingsFieldSet: React.FC<
   padding: theme.spacing(0.5),
   gap: theme.spacing(0.5),
   height: '3.5rem',
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
   }),
 }))
 
 const settingsControlSelected = (theme: Theme) => ({
   backgroundColor: theme.vars.palette.background.paper,
-  boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
-    boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
+    boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent)`,
   }),
   borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,
 })

package/src/pages/TransactionDetailsPage/ActionRow.style.tsx

@@ -8,7 +8,7 @@ export const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =
     gap: theme.spacing(1),
     padding: theme.spacing(1),
     borderRadius: theme.vars.shape.borderRadiusTertiary,
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   }))
 
 export const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =
@@ -19,7 +19,7 @@ export const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =
     width: 24,
     height: 24,
     borderRadius: '50%',
-    backgroundColor: `color-mix(in srgb, rgb(${theme.vars.palette.success.mainChannel}) 12%, ${theme.vars.palette.background.paper})`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`,
   }))
 
 export const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =

package/src/pages/TransactionDetailsPage/ReceiptsCard.style.tsx

@@ -20,6 +20,6 @@ export const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(
   textDecoration: 'none',
   color: theme.vars.palette.text.primary,
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   },
 }))

package/src/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -9,14 +9,14 @@ const getStatusColor = (status: StatusColor, theme: Theme) => {
   switch (status) {
     case RouteExecutionStatus.Done:
       return {
-        color: theme.vars.palette.success.mainChannel,
+        color: theme.vars.palette.success.main,
         alpha: 0.12,
         lightDarken: 0,
         darkDarken: 0,
       }
     case RouteExecutionStatus.Failed:
       return {
-        color: theme.vars.palette.error.mainChannel,
+        color: theme.vars.palette.error.main,
         alpha: 0.12,
         lightDarken: 0,
         darkDarken: 0,
@@ -25,14 +25,14 @@ const getStatusColor = (status: StatusColor, theme: Theme) => {
     case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
     case 'warning':
       return {
-        color: theme.vars.palette.warning.mainChannel,
+        color: theme.vars.palette.warning.main,
         alpha: 0.48,
         lightDarken: 0.32,
         darkDarken: 0,
       }
     default:
       return {
-        color: theme.vars.palette.primary.mainChannel,
+        color: theme.vars.palette.primary.main,
         alpha: 0.12,
         lightDarken: 0,
         darkDarken: 0,
@@ -57,7 +57,7 @@ export const IconCircle: React.FC<
     const statusConfig = getStatusColor(status, theme)
 
     return {
-      backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,
+      backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,
       borderRadius: '50%',
       width: 72,
       height: 72,
@@ -65,13 +65,13 @@ export const IconCircle: React.FC<
       position: 'relative',
       placeItems: 'center',
       '& > svg': {
-        color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,
+        color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.lightDarken) * 100}%, black)`,
         width: 36,
         height: 36,
       },
       ...theme.applyStyles('dark', {
         '& > svg': {
-          color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,
+          color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.darkDarken) * 100}%, black)`,
           width: 36,
           height: 36,
         },

package/src/stores/form/useFormRef.ts

@@ -1,8 +1,15 @@
 import { useImperativeHandle } from 'react'
+import { widgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { formDefaultValues } from '../../stores/form/createFormStore.js'
+import type { FormFieldChanged } from '../../types/events.js'
+import { WidgetEvent } from '../../types/events.js'
 import type { FormRef } from '../../types/widget.js'
-import type { FormStoreStore, GenericFormValue } from './types.js'
+import type {
+  FormFieldNames,
+  FormStoreStore,
+  GenericFormValue,
+} from './types.js'
 
 export const useFormRef = (
   formStore: FormStoreStore,
@@ -48,9 +55,21 @@ export const useFormRef = (
           ? { isTouched: options?.setUrlSearchParam }
           : undefined
 
+        const oldValue = formStore
+          .getState()
+          .getFieldValues(fieldName as FormFieldNames)[0]
+
         formStore
           .getState()
           .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
+
+        if (sanitizedValue !== oldValue) {
+          widgetEvents.emit(WidgetEvent.FormFieldChanged, {
+            fieldName,
+            newValue: sanitizedValue,
+            oldValue,
+          } as FormFieldChanged)
+        }
       },
     }
   }, [formStore, setSelectedBookmark])

package/src/stores/routes/createRouteExecutionStore.ts

@@ -129,8 +129,10 @@ export const createRouteExecutionStore = ({
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-routes`,
-        version: 3,
-        migrate: (persistedState: any) => persistedState,
+        // Bump version on breaking changes to the stored structure.
+        version: 4,
+        // Clear stored routes on any version mismatch to avoid errors from incompatible data shapes.
+        migrate: () => ({ routes: {} }),
         partialize: (state) => ({ routes: state.routes }),
         merge: (persistedState: any, currentState: RouteExecutionState) => {
           const state = {

package/src/stores/routes/utils.ts

@@ -55,7 +55,7 @@ export const getUpdatedAction = (
 
 export const getSourceTxHash = (route?: RouteExtended): string | undefined => {
   const sourceAction = route?.steps[0].execution?.actions
-    .filter(
+    ?.filter(
       (action) => !['RESET_ALLOWANCE', 'SET_ALLOWANCE'].includes(action.type)
     )
     .find((action) => action.txHash || action.taskId)

package/src/themes/createTheme.ts

@@ -130,7 +130,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
       ...widgetTheme.navigation,
     },
     typography: {
-      fontFamily: 'Inter var, Inter, sans-serif',
+      fontFamily: 'Inter, sans-serif',
       ...widgetTheme.typography,
     },
     shape: {
@@ -152,10 +152,6 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
           root: {
             fontFamily: 'Inter, sans-serif',
             ...widgetTheme.typography,
-            '@supports (font-variation-settings: normal)': {
-              fontFamily: 'Inter var, sans-serif',
-              ...widgetTheme.typography,
-            },
           },
         },
       },
@@ -212,9 +208,9 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
                 ownerState.variant === 'elevation' && {
                   '&:hover': {
                     cursor: 'pointer',
-                    filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
+                    filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent))`,
                     ...theme.applyStyles('dark', {
-                      filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.08))`,
+                      filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 8%, transparent))`,
                     }),
                   },
                 }),
@@ -251,9 +247,9 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
             style: ({ theme }) => ({
               border: 'none',
               boxShadow: 'none',
-              filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04))`,
+              filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent))`,
               ...theme.applyStyles('dark', {
-                filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04))`,
+                filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent))`,
               }),
             }),
           },
@@ -293,7 +289,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
             fontSize: 16,
             fontWeight: 600,
             '&.Mui-disabled, &.Mui-disabled:hover': {
-              color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.56)`,
+              color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 56%, transparent)`,
               cursor: 'not-allowed',
               pointerEvents: 'auto',
             },
@@ -312,18 +308,18 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
             ...getStyleOverrides('MuiButton', 'root', widgetTheme, ownerState),
           }),
           text: ({ theme, ownerState }) => ({
-            backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 8%, transparent)`,
             color: theme.vars.palette.primary.main,
             '&:hover': {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.12)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 12%, transparent)`,
             },
             ...theme.applyStyles('dark', {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.42)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 42%, transparent)`,
               color: theme.palette.getContrastText(
                 alpha(theme.palette.primary.main, 0.08)
               ),
               '&:hover': {
-                backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.56)`,
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 56%, transparent)`,
               },
             }),
             ...getStyleOverrides('MuiButton', 'text', widgetTheme, ownerState),
@@ -448,22 +444,22 @@ export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
               ownerState
             )
             return {
-              backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
               ...theme.applyStyles('dark', {
-                backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
               }),
               borderRadius: theme.vars.shape.borderRadius,
               ...rootStyleOverrides,
               [`.${tabsClasses.indicator}`]: {
                 backgroundColor: theme.vars.palette.background.paper,
                 ...theme.applyStyles('dark', {
-                  backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+                  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
                 }),
                 borderRadius:
                   theme.shape.borderRadius > 0
                     ? `calc(${theme.vars.shape.borderRadius} - 4px)`
                     : theme.vars.shape.borderRadius,
-                boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+                boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
                 ...rootStyleOverrides?.[`.${tabsClasses.indicator}`],
               },
             }

package/src/themes/types.ts

@@ -12,12 +12,6 @@ import type { NavigationProps } from '../types/widget.js'
 
 // https://mui.com/customization/palette/
 declare module '@mui/material/styles' {
-  interface TypographyVariants {
-    '@supports (font-variation-settings: normal)': React.CSSProperties
-  }
-  interface TypographyVariantsOptions {
-    '@supports (font-variation-settings: normal)'?: React.CSSProperties
-  }
   interface Shape {
     borderRadius: number
     borderRadiusSecondary: number
@@ -86,9 +80,3 @@ declare module '@mui/material/Paper' {
     filled: true
   }
 }
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {
-    '@supports (font-variation-settings: normal)': true
-  }
-}

package/src/themes/watermelonLight.ts

@@ -52,7 +52,7 @@ export const watermelonLightTheme: WidgetTheme = {
         root: ({ theme }) => ({
           [`.${tabsClasses.indicator}`]: {
             backgroundColor: '#ffffff',
-            filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
+            filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent))`,
             borderRadius: '16px',
           },
         }),