npm - @lifi/widget - Versions diffs - 4.0.0-beta.12 → 4.0.0-beta.14 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/dist/esm/stores/routes/utils.js CHANGED Viewed

@@ -26,7 +26,7 @@ const getUpdatedAction = (currentRoute, updatedRoute) => {
 	return actionDiff.path.slice(0, actionDiffIndex).reduce((obj, path) => obj[path], updatedRoute);
 };
 const getSourceTxHash = (route) => {
-	const sourceAction = route?.steps[0].execution?.actions.filter((action) => !["RESET_ALLOWANCE", "SET_ALLOWANCE"].includes(action.type)).find((action) => action.txHash || action.taskId);
+	const sourceAction = route?.steps[0].execution?.actions?.filter((action) => !["RESET_ALLOWANCE", "SET_ALLOWANCE"].includes(action.type)).find((action) => action.txHash || action.taskId);
 	return sourceAction?.txHash || sourceAction?.taskId;
 };
 //#endregion

package/dist/esm/stores/routes/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","names":[],"sources":["../../../../src/stores/routes/utils.ts"],"sourcesContent":["import type { ExecutionAction, RouteExtended } from '@lifi/sdk'\nimport microdiff from 'microdiff'\n\nexport const isRouteDone = (route: RouteExtended): boolean => {\n return route.steps.every((step) => step.execution?.status === 'DONE')\n}\n\nexport const isRoutePartiallyDone = (route: RouteExtended): boolean => {\n return route.steps.some((step) =>\n step.execution?.actions?.some((action) => action.substatus === 'PARTIAL')\n )\n}\n\nexport const isRouteRefunded = (route: RouteExtended): boolean => {\n return route.steps.some((step) =>\n step.execution?.actions?.some((action) => action.substatus === 'REFUNDED')\n )\n}\n\nexport const isRouteFailed = (route: RouteExtended): boolean => {\n return route.steps.some((step) => step.execution?.status === 'FAILED')\n}\n\nexport const isRouteActive = (route?: RouteExtended): boolean => {\n if (!route) {\n return false\n }\n const isDone = isRouteDone(route)\n const isFailed = isRouteFailed(route)\n const alreadyStarted = route.steps.some((step) => step.execution)\n return !isDone && !isFailed && alreadyStarted\n}\n\nexport const getUpdatedAction = (\n currentRoute: RouteExtended,\n updatedRoute: RouteExtended\n): ExecutionAction \| undefined => {\n const actionDiff = microdiff(currentRoute, updatedRoute).find((diff) =>\n diff.path.includes('actions')\n )\n if (!actionDiff) {\n return undefined\n }\n // Find action index in the diff array so we can slice the complete action object\n // e.g. ['steps', 0, 'execution', 'actions', 0, 'message']\n const actionDiffIndex = actionDiff.path.indexOf('actions') + 2\n const actionPathSlice = actionDiff.path.slice(0, actionDiffIndex)\n // Reduce updated route using the diff path to get updated process\n const action = actionPathSlice.reduce(\n (obj, path) => obj[path],\n updatedRoute as any\n ) as ExecutionAction\n return action\n}\n\nexport const getSourceTxHash = (route?: RouteExtended): string \| undefined => {\n const sourceAction = route?.steps[0].execution?.actions\n .filter(\n (action) => !['RESET_ALLOWANCE', 'SET_ALLOWANCE'].includes(action.type)\n )\n .find((action) => action.txHash \|\| action.taskId)\n return sourceAction?.txHash \|\| sourceAction?.taskId\n}\n"],"mappings":";;AAGA,MAAa,eAAe,UAAkC;AAC5D,QAAO,MAAM,MAAM,OAAO,SAAS,KAAK,WAAW,WAAW,OAAO;;AAGvE,MAAa,wBAAwB,UAAkC;AACrE,QAAO,MAAM,MAAM,MAAM,SACvB,KAAK,WAAW,SAAS,MAAM,WAAW,OAAO,cAAc,UAAU,CAC1E;;AAGH,MAAa,mBAAmB,UAAkC;AAChE,QAAO,MAAM,MAAM,MAAM,SACvB,KAAK,WAAW,SAAS,MAAM,WAAW,OAAO,cAAc,WAAW,CAC3E;;AAGH,MAAa,iBAAiB,UAAkC;AAC9D,QAAO,MAAM,MAAM,MAAM,SAAS,KAAK,WAAW,WAAW,SAAS;;AAGxE,MAAa,iBAAiB,UAAmC;AAC/D,KAAI,CAAC,MACH,QAAO;CAET,MAAM,SAAS,YAAY,MAAM;CACjC,MAAM,WAAW,cAAc,MAAM;CACrC,MAAM,iBAAiB,MAAM,MAAM,MAAM,SAAS,KAAK,UAAU;AACjE,QAAO,CAAC,UAAU,CAAC,YAAY;;AAGjC,MAAa,oBACX,cACA,iBACgC;CAChC,MAAM,aAAa,UAAU,cAAc,aAAa,CAAC,MAAM,SAC7D,KAAK,KAAK,SAAS,UAAU,CAC9B;AACD,KAAI,CAAC,WACH;CAIF,MAAM,kBAAkB,WAAW,KAAK,QAAQ,UAAU,GAAG;AAO7D,QANwB,WAAW,KAAK,MAAM,GAAG,gBAAgB,CAElC,QAC5B,KAAK,SAAS,IAAI,OACnB,aACD;;AAIH,MAAa,mBAAmB,UAA8C;CAC5E,MAAM,eAAe,OAAO,MAAM,GAAG,WAAW,~~QAC7C~~,~~QACE~~,WAAW,CAAC,CAAC,mBAAmB,gBAAgB,CAAC,SAAS,OAAO,KAAK,CACxE,CACA,MAAM,WAAW,OAAO,UAAU,OAAO,OAAO;AACnD,QAAO,cAAc,UAAU,cAAc"}
1	+ {"version":3,"file":"utils.js","names":[],"sources":["../../../../src/stores/routes/utils.ts"],"sourcesContent":["import type { ExecutionAction, RouteExtended } from '@lifi/sdk'\nimport microdiff from 'microdiff'\n\nexport const isRouteDone = (route: RouteExtended): boolean => {\n return route.steps.every((step) => step.execution?.status === 'DONE')\n}\n\nexport const isRoutePartiallyDone = (route: RouteExtended): boolean => {\n return route.steps.some((step) =>\n step.execution?.actions?.some((action) => action.substatus === 'PARTIAL')\n )\n}\n\nexport const isRouteRefunded = (route: RouteExtended): boolean => {\n return route.steps.some((step) =>\n step.execution?.actions?.some((action) => action.substatus === 'REFUNDED')\n )\n}\n\nexport const isRouteFailed = (route: RouteExtended): boolean => {\n return route.steps.some((step) => step.execution?.status === 'FAILED')\n}\n\nexport const isRouteActive = (route?: RouteExtended): boolean => {\n if (!route) {\n return false\n }\n const isDone = isRouteDone(route)\n const isFailed = isRouteFailed(route)\n const alreadyStarted = route.steps.some((step) => step.execution)\n return !isDone && !isFailed && alreadyStarted\n}\n\nexport const getUpdatedAction = (\n currentRoute: RouteExtended,\n updatedRoute: RouteExtended\n): ExecutionAction \| undefined => {\n const actionDiff = microdiff(currentRoute, updatedRoute).find((diff) =>\n diff.path.includes('actions')\n )\n if (!actionDiff) {\n return undefined\n }\n // Find action index in the diff array so we can slice the complete action object\n // e.g. ['steps', 0, 'execution', 'actions', 0, 'message']\n const actionDiffIndex = actionDiff.path.indexOf('actions') + 2\n const actionPathSlice = actionDiff.path.slice(0, actionDiffIndex)\n // Reduce updated route using the diff path to get updated process\n const action = actionPathSlice.reduce(\n (obj, path) => obj[path],\n updatedRoute as any\n ) as ExecutionAction\n return action\n}\n\nexport const getSourceTxHash = (route?: RouteExtended): string \| undefined => {\n const sourceAction = route?.steps[0].execution?.actions\n ?.filter(\n (action) => !['RESET_ALLOWANCE', 'SET_ALLOWANCE'].includes(action.type)\n )\n .find((action) => action.txHash \|\| action.taskId)\n return sourceAction?.txHash \|\| sourceAction?.taskId\n}\n"],"mappings":";;AAGA,MAAa,eAAe,UAAkC;AAC5D,QAAO,MAAM,MAAM,OAAO,SAAS,KAAK,WAAW,WAAW,OAAO;;AAGvE,MAAa,wBAAwB,UAAkC;AACrE,QAAO,MAAM,MAAM,MAAM,SACvB,KAAK,WAAW,SAAS,MAAM,WAAW,OAAO,cAAc,UAAU,CAC1E;;AAGH,MAAa,mBAAmB,UAAkC;AAChE,QAAO,MAAM,MAAM,MAAM,SACvB,KAAK,WAAW,SAAS,MAAM,WAAW,OAAO,cAAc,WAAW,CAC3E;;AAGH,MAAa,iBAAiB,UAAkC;AAC9D,QAAO,MAAM,MAAM,MAAM,SAAS,KAAK,WAAW,WAAW,SAAS;;AAGxE,MAAa,iBAAiB,UAAmC;AAC/D,KAAI,CAAC,MACH,QAAO;CAET,MAAM,SAAS,YAAY,MAAM;CACjC,MAAM,WAAW,cAAc,MAAM;CACrC,MAAM,iBAAiB,MAAM,MAAM,MAAM,SAAS,KAAK,UAAU;AACjE,QAAO,CAAC,UAAU,CAAC,YAAY;;AAGjC,MAAa,oBACX,cACA,iBACgC;CAChC,MAAM,aAAa,UAAU,cAAc,aAAa,CAAC,MAAM,SAC7D,KAAK,KAAK,SAAS,UAAU,CAC9B;AACD,KAAI,CAAC,WACH;CAIF,MAAM,kBAAkB,WAAW,KAAK,QAAQ,UAAU,GAAG;AAO7D,QANwB,WAAW,KAAK,MAAM,GAAG,gBAAgB,CAElC,QAC5B,KAAK,SAAS,IAAI,OACnB,aACD;;AAIH,MAAa,mBAAmB,UAA8C;CAC5E,MAAM,eAAe,OAAO,MAAM,GAAG,WAAW,SAC5C,QACC,WAAW,CAAC,CAAC,mBAAmB,gBAAgB,CAAC,SAAS,OAAO,KAAK,CACxE,CACA,MAAM,WAAW,OAAO,UAAU,OAAO,OAAO;AACnD,QAAO,cAAc,UAAU,cAAc"}

package/dist/esm/themes/createTheme.js CHANGED Viewed

@@ -79,7 +79,7 @@ const createTheme$1 = (widgetTheme = {}) => {
 			...widgetTheme.navigation
 		},
 		typography: {
-			fontFamily: "Inter var, Inter, sans-serif",
+			fontFamily: "Inter, sans-serif",
 			...widgetTheme.typography
 		},
 		shape: {
@@ -96,11 +96,7 @@ const createTheme$1 = (widgetTheme = {}) => {
 		components: {
 			MuiScopedCssBaseline: { styleOverrides: { root: {
 				fontFamily: "Inter, sans-serif",
-				...widgetTheme.typography,
-				"@supports (font-variation-settings: normal)": {
-					fontFamily: "Inter var, sans-serif",
-					...widgetTheme.typography
-				}
+				...widgetTheme.typography
 			} } },
 			MuiAppBar: { styleOverrides: { root: ({ ownerState }) => ({
 				minHeight: 40,
@@ -134,8 +130,8 @@ const createTheme$1 = (widgetTheme = {}) => {
 						} },
 						...!!ownerState.onClick && ownerState.variant === "elevation" && { "&:hover": {
 							cursor: "pointer",
-							filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
-							...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.onBackground} 8%, transparent))`,
+							...theme.applyStyles("dark", { filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 8%, transparent))` })
 						} },
 						...typeof root === "object" && root,
 						...!!ownerState.onClick && !!rootHover && { "&:hover": {
@@ -160,8 +156,8 @@ const createTheme$1 = (widgetTheme = {}) => {
 						style: ({ theme }) => ({
 							border: "none",
 							boxShadow: "none",
-							filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04))`,
-							...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.onBackground} 4%, transparent))`,
+							...theme.applyStyles("dark", { filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent))` })
 						})
 					},
 					{
@@ -190,7 +186,7 @@ const createTheme$1 = (widgetTheme = {}) => {
 						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"
 						},
@@ -205,13 +201,13 @@ const createTheme$1 = (widgetTheme = {}) => {
 						...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)` },
+						"&:hover": { 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, .08)),
-							"&:hover": { backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.56)` }
+							"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 56%, transparent)` }
 						}),
 						...getStyleOverrides("MuiButton", "text", widgetTheme, ownerState)
 					}),
@@ -289,15 +285,15 @@ const createTheme$1 = (widgetTheme = {}) => {
 					root: ({ theme, ownerState }) => {
 						const rootStyleOverrides = getStyleOverrides("MuiTabs", "root", widgetTheme, ownerState);
 						return {
-							backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-							...theme.applyStyles("dark", { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)` }),
+							backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+							...theme.applyStyles("dark", { 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)` }),
+								...theme.applyStyles("dark", { 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/dist/esm/themes/createTheme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createTheme.js","names":["createTheme","createMuiTheme"],"sources":["../../../src/themes/createTheme.ts"],"sourcesContent":["import type {\n CSSObject,\n Shape,\n SimplePaletteColorOptions,\n Theme,\n} from '@mui/material'\nimport {\n alpha,\n buttonClasses,\n createTheme as createMuiTheme,\n css,\n darken,\n keyframes,\n lighten,\n tabsClasses,\n touchRippleClasses,\n} from '@mui/material'\nimport type { WidgetTheme } from '../types/widget.js'\nimport { palette, paletteDark, paletteLight } from './palettes.js'\nimport type {} from './types.js'\nimport { getStyleOverrides } from './utils.js'\n\nconst shape: Shape = {\n borderRadius: 12,\n borderRadiusSecondary: 12,\n borderRadiusTertiary: 24,\n}\n\nconst enterKeyframe = keyframes`\n 0% {\n transform: scale(0);\n opacity: 0.05;\n }\n 100% {\n transform: scale(1);\n opacity: 0.1;\n }\n`\n\nexport const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {\n const configuredPaletteLight =\n widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette\n const configuredPaletteDark =\n widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette\n\n const primaryMainColorLight =\n (configuredPaletteLight?.primary as SimplePaletteColorOptions)?.main ??\n palette.primary.main\n const primaryMainColorDark =\n (configuredPaletteDark?.primary as SimplePaletteColorOptions)?.main ??\n palette.primary.main\n\n const primaryLightenColorLight = lighten(primaryMainColorLight, 0.84)\n const primaryDarkenColorLight = darken(primaryMainColorLight, 0.2)\n const primaryLightenColorDark =\n primaryMainColorLight === primaryMainColorDark\n ? primaryLightenColorLight\n : lighten(primaryMainColorDark, 0.84)\n const primaryDarkenColorDark =\n primaryMainColorLight === primaryMainColorDark\n ? primaryDarkenColorLight\n : darken(primaryMainColorDark, 0.2)\n\n const secondaryMainColorLight =\n (configuredPaletteLight?.secondary as SimplePaletteColorOptions)?.main ??\n palette.secondary.main\n const secondaryMainColorDark =\n (configuredPaletteDark?.secondary as SimplePaletteColorOptions)?.main ??\n palette.secondary.main\n\n const secondaryLightenColorLight = lighten(secondaryMainColorLight, 0.84)\n const secondaryDarkenColorLight = darken(secondaryMainColorLight, 0.2)\n const secondaryLightenColorDark =\n secondaryMainColorLight === secondaryMainColorDark\n ? secondaryLightenColorLight\n : lighten(secondaryMainColorDark, 0.84)\n const secondaryDarkenColorDark =\n secondaryMainColorLight === secondaryMainColorDark\n ? secondaryDarkenColorLight\n : darken(secondaryMainColorDark, 0.2)\n\n const theme = createMuiTheme({\n cssVariables: {\n cssVarPrefix: 'lifi',\n colorSchemeSelector: 'class',\n nativeColor: true,\n },\n colorSchemes: {\n light: {\n palette: {\n ...palette,\n ...paletteLight,\n ...(widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette),\n primary: {\n main: primaryMainColorLight,\n light: primaryLightenColorLight,\n dark: primaryDarkenColorLight,\n },\n secondary: {\n main: secondaryMainColorLight,\n light: secondaryLightenColorLight,\n dark: secondaryDarkenColorLight,\n },\n },\n },\n dark: {\n palette: {\n ...palette,\n ...paletteDark,\n ...(widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette),\n primary: {\n main: primaryMainColorDark,\n light: primaryLightenColorDark,\n dark: primaryDarkenColorDark,\n },\n secondary: {\n main: secondaryMainColorDark,\n light: secondaryLightenColorDark,\n dark: secondaryDarkenColorDark,\n },\n },\n },\n },\n container: widgetTheme.container,\n routesContainer: widgetTheme.routesContainer,\n chainSidebarContainer: widgetTheme.chainSidebarContainer,\n header: widgetTheme.header,\n navigation: {\n edge: true,\n ...widgetTheme.navigation,\n },\n typography: {\n fontFamily: 'Inter var, Inter, sans-serif',\n ...widgetTheme.typography,\n },\n shape: {\n ...shape,\n ...widgetTheme.shape,\n },\n breakpoints: {\n values: {\n xs: 360,\n sm: 416,\n md: 900,\n lg: 1200,\n xl: 1536,\n },\n },\n components: {\n MuiScopedCssBaseline: {\n styleOverrides: {\n root: {\n fontFamily: 'Inter, sans-serif',\n ...widgetTheme.typography,\n '@supports (font-variation-settings: normal)': {\n fontFamily: 'Inter var, sans-serif',\n ...widgetTheme.typography,\n },\n },\n },\n },\n MuiAppBar: {\n styleOverrides: {\n root: ({ ownerState }) => ({\n minHeight: 40,\n padding: 0,\n ...getStyleOverrides('MuiAppBar', 'root', widgetTheme, ownerState),\n }),\n },\n },\n MuiCard: {\n defaultProps: {\n variant: 'outlined',\n ...widgetTheme.components?.MuiCard?.defaultProps,\n },\n styleOverrides: {\n root: ({ ownerState, theme }) => {\n const root = widgetTheme.components?.MuiCard?.styleOverrides\n ?.root as CSSObject\n const rootHover = root?.['&:hover']\n return {\n backgroundColor: theme.vars.palette.background.paper,\n backgroundImage: 'none',\n borderRadius: theme.vars.shape.borderRadius,\n overflow: 'hidden',\n position: 'relative',\n boxSizing: 'border-box',\n transition: theme.transitions.create(\n ['background-color', 'filter'],\n {\n duration: theme.transitions.duration.enteringScreen,\n easing: theme.transitions.easing.easeOut,\n }\n ),\n ...(!!ownerState.onClick && {\n '&:hover': {\n cursor: 'pointer',\n },\n }),\n ...(!!ownerState.onClick &&\n (ownerState.variant === 'outlined' \|\|\n ownerState.variant === 'filled') && {\n '&:hover': {\n cursor: 'pointer',\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n }),\n },\n }),\n ...(!!ownerState.onClick &&\n ownerState.variant === 'elevation' && {\n '&:hover': {\n cursor: 'pointer',\n filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,\n ...theme.applyStyles('dark', {\n filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.08))`,\n }),\n },\n }),\n ...(typeof root === 'object' && root),\n ...(!!ownerState.onClick &&\n !!rootHover && {\n '&:hover': {\n ...rootHover,\n ...theme.applyStyles('dark', {\n ...rootHover,\n }),\n },\n }),\n ...(!ownerState.onClick && {\n '&:hover': {},\n }),\n }\n },\n },\n variants: widgetTheme.components?.MuiCard?.variants ?? [\n {\n props: { variant: 'outlined' },\n style: ({ theme }) => ({\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: theme.vars.palette.grey[300],\n ...theme.applyStyles('dark', {\n borderColor: theme.vars.palette.grey[800],\n }),\n }),\n },\n {\n props: { variant: 'elevation' },\n style: ({ theme }) => ({\n border: 'none',\n boxShadow: 'none',\n filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04))`,\n ...theme.applyStyles('dark', {\n filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04))`,\n }),\n }),\n },\n {\n props: { variant: 'filled' },\n style: {\n border: 'none',\n },\n },\n ],\n },\n MuiInputCard: {\n ...widgetTheme.components?.MuiInputCard,\n },\n MuiButtonBase: {\n styleOverrides: {\n // This `css()` function invokes keyframes. `styled-components` only supports keyframes\n // in string templates. Do not convert these styles in JS object as it will break.\n root: css`\n &\n .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible} {\n opacity: 0.1;\n animation-name: ${enterKeyframe};\n }\n `,\n },\n },\n MuiButton: {\n defaultProps: {\n disableElevation: true,\n ...widgetTheme.components?.MuiButton?.defaultProps,\n },\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n borderRadius: theme.vars.shape.borderRadiusSecondary,\n textTransform: 'none',\n fontSize: 16,\n fontWeight: 600,\n '&.Mui-disabled, &.Mui-disabled:hover': {\n color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.56)`,\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n },\n [`&.${buttonClasses.loading}.Mui-disabled`]: {\n backgroundColor: theme.vars.palette.primary.main,\n color: theme.palette.getContrastText(theme.palette.primary.main),\n cursor: 'auto',\n pointerEvents: 'auto',\n },\n [`.${buttonClasses.loadingIndicator}`]: {\n color: theme.palette.getContrastText(theme.palette.primary.main),\n },\n [`&.${buttonClasses.root}.${buttonClasses.loading}`]: {\n color: 'transparent',\n },\n ...getStyleOverrides('MuiButton', 'root', widgetTheme, ownerState),\n }),\n text: ({ theme, ownerState }) => ({\n backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,\n color: theme.vars.palette.primary.main,\n '&:hover': {\n backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.12)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.42)`,\n color: theme.palette.getContrastText(\n alpha(theme.palette.primary.main, 0.08)\n ),\n '&:hover': {\n backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.56)`,\n },\n }),\n ...getStyleOverrides('MuiButton', 'text', widgetTheme, ownerState),\n }),\n contained: ({ ownerState }) => ({\n '&:hover': {\n color: theme.palette.getContrastText(theme.palette.primary.main),\n },\n ...getStyleOverrides(\n 'MuiButton',\n 'contained',\n widgetTheme,\n ownerState\n ),\n }),\n sizeMedium: ({ ownerState }) => ({\n padding: '10px 14px',\n ...getStyleOverrides(\n 'MuiButton',\n 'sizeMedium',\n widgetTheme,\n ownerState\n ),\n }),\n },\n },\n MuiIconButton: {\n ...widgetTheme.components?.MuiIconButton,\n styleOverrides: {\n ...widgetTheme.components?.MuiIconButton?.styleOverrides,\n root: ({ ownerState }) => ({\n color: 'inherit',\n '&:hover': {\n color: 'inherit',\n },\n ...getStyleOverrides(\n 'MuiIconButton',\n 'root',\n widgetTheme,\n ownerState\n ),\n }),\n },\n },\n MuiAvatar: {\n styleOverrides: {\n root: {\n height: 40,\n width: 40,\n },\n img: {\n objectFit: 'contain',\n },\n },\n ...widgetTheme.components?.MuiAvatar,\n },\n MuiListItemText: {\n styleOverrides: {\n primary: ({ theme }) => ({\n fontWeight: 600,\n fontSize: '1.125rem',\n lineHeight: '1.2778',\n color: theme.vars.palette.text.primary,\n }),\n secondary: ({ theme }) => ({\n fontWeight: 500,\n fontSize: '0.75rem',\n color: theme.vars.palette.text.secondary,\n }),\n },\n },\n MuiTooltip: {\n defaultProps: {\n enterDelay: 400,\n disableInteractive: true,\n arrow: true,\n placement: 'top',\n },\n styleOverrides: {\n tooltip: ({ theme }) => ({\n backgroundColor: 'rgb(0 0 0 / 64%)',\n backdropFilter: 'blur(3px)',\n fontSize: '0.75rem',\n padding: theme.spacing(1, 1.5),\n }),\n arrow: {\n color: 'rgb(0 0 0 / 64%)',\n },\n },\n },\n MuiMenu: {\n styleOverrides: {\n paper: ({ theme }) => ({\n backgroundColor: theme.vars.palette.background.paper,\n backgroundImage: 'none',\n }),\n },\n },\n MuiDrawer: {\n styleOverrides: {\n paper: {\n backgroundImage: 'none',\n },\n },\n },\n MuiPaper: {\n styleOverrides: {\n root: {\n backgroundImage: 'none',\n },\n },\n },\n MuiTabs: {\n ...widgetTheme.components?.MuiTabs,\n styleOverrides: {\n ...widgetTheme.components?.MuiTabs?.styleOverrides,\n root: ({ theme, ownerState }) => {\n const rootStyleOverrides = getStyleOverrides(\n 'MuiTabs',\n 'root',\n widgetTheme,\n ownerState\n )\n return {\n backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,\n }),\n borderRadius: theme.vars.shape.borderRadius,\n ...rootStyleOverrides,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: theme.vars.palette.background.paper,\n ...theme.applyStyles('dark', {\n backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,\n }),\n borderRadius:\n theme.shape.borderRadius > 0\n ? `calc(${theme.vars.shape.borderRadius} - 4px)`\n : theme.vars.shape.borderRadius,\n boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n ...rootStyleOverrides?.[`.${tabsClasses.indicator}`],\n },\n }\n },\n },\n },\n MuiNavigationTabs: {\n ...widgetTheme.components?.MuiNavigationTabs,\n },\n MuiNavigationTab: {\n ...widgetTheme.components?.MuiNavigationTab,\n },\n MuiCheckbox: {\n styleOverrides: {\n root: {\n '&:hover': {\n backgroundColor: 'transparent',\n },\n },\n },\n ...widgetTheme.components?.MuiCheckbox,\n },\n },\n })\n\n return theme\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"createTheme.js","names":["createTheme","createMuiTheme"],"sources":["../../../src/themes/createTheme.ts"],"sourcesContent":["import type {\n CSSObject,\n Shape,\n SimplePaletteColorOptions,\n Theme,\n} from '@mui/material'\nimport {\n alpha,\n buttonClasses,\n createTheme as createMuiTheme,\n css,\n darken,\n keyframes,\n lighten,\n tabsClasses,\n touchRippleClasses,\n} from '@mui/material'\nimport type { WidgetTheme } from '../types/widget.js'\nimport { palette, paletteDark, paletteLight } from './palettes.js'\nimport type {} from './types.js'\nimport { getStyleOverrides } from './utils.js'\n\nconst shape: Shape = {\n borderRadius: 12,\n borderRadiusSecondary: 12,\n borderRadiusTertiary: 24,\n}\n\nconst enterKeyframe = keyframes`\n 0% {\n transform: scale(0);\n opacity: 0.05;\n }\n 100% {\n transform: scale(1);\n opacity: 0.1;\n }\n`\n\nexport const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {\n const configuredPaletteLight =\n widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette\n const configuredPaletteDark =\n widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette\n\n const primaryMainColorLight =\n (configuredPaletteLight?.primary as SimplePaletteColorOptions)?.main ??\n palette.primary.main\n const primaryMainColorDark =\n (configuredPaletteDark?.primary as SimplePaletteColorOptions)?.main ??\n palette.primary.main\n\n const primaryLightenColorLight = lighten(primaryMainColorLight, 0.84)\n const primaryDarkenColorLight = darken(primaryMainColorLight, 0.2)\n const primaryLightenColorDark =\n primaryMainColorLight === primaryMainColorDark\n ? primaryLightenColorLight\n : lighten(primaryMainColorDark, 0.84)\n const primaryDarkenColorDark =\n primaryMainColorLight === primaryMainColorDark\n ? primaryDarkenColorLight\n : darken(primaryMainColorDark, 0.2)\n\n const secondaryMainColorLight =\n (configuredPaletteLight?.secondary as SimplePaletteColorOptions)?.main ??\n palette.secondary.main\n const secondaryMainColorDark =\n (configuredPaletteDark?.secondary as SimplePaletteColorOptions)?.main ??\n palette.secondary.main\n\n const secondaryLightenColorLight = lighten(secondaryMainColorLight, 0.84)\n const secondaryDarkenColorLight = darken(secondaryMainColorLight, 0.2)\n const secondaryLightenColorDark =\n secondaryMainColorLight === secondaryMainColorDark\n ? secondaryLightenColorLight\n : lighten(secondaryMainColorDark, 0.84)\n const secondaryDarkenColorDark =\n secondaryMainColorLight === secondaryMainColorDark\n ? secondaryDarkenColorLight\n : darken(secondaryMainColorDark, 0.2)\n\n const theme = createMuiTheme({\n cssVariables: {\n cssVarPrefix: 'lifi',\n colorSchemeSelector: 'class',\n nativeColor: true,\n },\n colorSchemes: {\n light: {\n palette: {\n ...palette,\n ...paletteLight,\n ...(widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette),\n primary: {\n main: primaryMainColorLight,\n light: primaryLightenColorLight,\n dark: primaryDarkenColorLight,\n },\n secondary: {\n main: secondaryMainColorLight,\n light: secondaryLightenColorLight,\n dark: secondaryDarkenColorLight,\n },\n },\n },\n dark: {\n palette: {\n ...palette,\n ...paletteDark,\n ...(widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette),\n primary: {\n main: primaryMainColorDark,\n light: primaryLightenColorDark,\n dark: primaryDarkenColorDark,\n },\n secondary: {\n main: secondaryMainColorDark,\n light: secondaryLightenColorDark,\n dark: secondaryDarkenColorDark,\n },\n },\n },\n },\n container: widgetTheme.container,\n routesContainer: widgetTheme.routesContainer,\n chainSidebarContainer: widgetTheme.chainSidebarContainer,\n header: widgetTheme.header,\n navigation: {\n edge: true,\n ...widgetTheme.navigation,\n },\n typography: {\n fontFamily: 'Inter, sans-serif',\n ...widgetTheme.typography,\n },\n shape: {\n ...shape,\n ...widgetTheme.shape,\n },\n breakpoints: {\n values: {\n xs: 360,\n sm: 416,\n md: 900,\n lg: 1200,\n xl: 1536,\n },\n },\n components: {\n MuiScopedCssBaseline: {\n styleOverrides: {\n root: {\n fontFamily: 'Inter, sans-serif',\n ...widgetTheme.typography,\n },\n },\n },\n MuiAppBar: {\n styleOverrides: {\n root: ({ ownerState }) => ({\n minHeight: 40,\n padding: 0,\n ...getStyleOverrides('MuiAppBar', 'root', widgetTheme, ownerState),\n }),\n },\n },\n MuiCard: {\n defaultProps: {\n variant: 'outlined',\n ...widgetTheme.components?.MuiCard?.defaultProps,\n },\n styleOverrides: {\n root: ({ ownerState, theme }) => {\n const root = widgetTheme.components?.MuiCard?.styleOverrides\n ?.root as CSSObject\n const rootHover = root?.['&:hover']\n return {\n backgroundColor: theme.vars.palette.background.paper,\n backgroundImage: 'none',\n borderRadius: theme.vars.shape.borderRadius,\n overflow: 'hidden',\n position: 'relative',\n boxSizing: 'border-box',\n transition: theme.transitions.create(\n ['background-color', 'filter'],\n {\n duration: theme.transitions.duration.enteringScreen,\n easing: theme.transitions.easing.easeOut,\n }\n ),\n ...(!!ownerState.onClick && {\n '&:hover': {\n cursor: 'pointer',\n },\n }),\n ...(!!ownerState.onClick &&\n (ownerState.variant === 'outlined' \|\|\n ownerState.variant === 'filled') && {\n '&:hover': {\n cursor: 'pointer',\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n }),\n },\n }),\n ...(!!ownerState.onClick &&\n ownerState.variant === 'elevation' && {\n '&:hover': {\n cursor: 'pointer',\n filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent))`,\n ...theme.applyStyles('dark', {\n filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 8%, transparent))`,\n }),\n },\n }),\n ...(typeof root === 'object' && root),\n ...(!!ownerState.onClick &&\n !!rootHover && {\n '&:hover': {\n ...rootHover,\n ...theme.applyStyles('dark', {\n ...rootHover,\n }),\n },\n }),\n ...(!ownerState.onClick && {\n '&:hover': {},\n }),\n }\n },\n },\n variants: widgetTheme.components?.MuiCard?.variants ?? [\n {\n props: { variant: 'outlined' },\n style: ({ theme }) => ({\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: theme.vars.palette.grey[300],\n ...theme.applyStyles('dark', {\n borderColor: theme.vars.palette.grey[800],\n }),\n }),\n },\n {\n props: { variant: 'elevation' },\n style: ({ theme }) => ({\n border: 'none',\n boxShadow: 'none',\n filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent))`,\n ...theme.applyStyles('dark', {\n filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent))`,\n }),\n }),\n },\n {\n props: { variant: 'filled' },\n style: {\n border: 'none',\n },\n },\n ],\n },\n MuiInputCard: {\n ...widgetTheme.components?.MuiInputCard,\n },\n MuiButtonBase: {\n styleOverrides: {\n // This `css()` function invokes keyframes. `styled-components` only supports keyframes\n // in string templates. Do not convert these styles in JS object as it will break.\n root: css`\n &\n .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible} {\n opacity: 0.1;\n animation-name: ${enterKeyframe};\n }\n `,\n },\n },\n MuiButton: {\n defaultProps: {\n disableElevation: true,\n ...widgetTheme.components?.MuiButton?.defaultProps,\n },\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n borderRadius: theme.vars.shape.borderRadiusSecondary,\n textTransform: 'none',\n fontSize: 16,\n fontWeight: 600,\n '&.Mui-disabled, &.Mui-disabled:hover': {\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 56%, transparent)`,\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n },\n [`&.${buttonClasses.loading}.Mui-disabled`]: {\n backgroundColor: theme.vars.palette.primary.main,\n color: theme.palette.getContrastText(theme.palette.primary.main),\n cursor: 'auto',\n pointerEvents: 'auto',\n },\n [`.${buttonClasses.loadingIndicator}`]: {\n color: theme.palette.getContrastText(theme.palette.primary.main),\n },\n [`&.${buttonClasses.root}.${buttonClasses.loading}`]: {\n color: 'transparent',\n },\n ...getStyleOverrides('MuiButton', 'root', widgetTheme, ownerState),\n }),\n text: ({ theme, ownerState }) => ({\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 8%, transparent)`,\n color: theme.vars.palette.primary.main,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 12%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 42%, transparent)`,\n color: theme.palette.getContrastText(\n alpha(theme.palette.primary.main, 0.08)\n ),\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 56%, transparent)`,\n },\n }),\n ...getStyleOverrides('MuiButton', 'text', widgetTheme, ownerState),\n }),\n contained: ({ ownerState }) => ({\n '&:hover': {\n color: theme.palette.getContrastText(theme.palette.primary.main),\n },\n ...getStyleOverrides(\n 'MuiButton',\n 'contained',\n widgetTheme,\n ownerState\n ),\n }),\n sizeMedium: ({ ownerState }) => ({\n padding: '10px 14px',\n ...getStyleOverrides(\n 'MuiButton',\n 'sizeMedium',\n widgetTheme,\n ownerState\n ),\n }),\n },\n },\n MuiIconButton: {\n ...widgetTheme.components?.MuiIconButton,\n styleOverrides: {\n ...widgetTheme.components?.MuiIconButton?.styleOverrides,\n root: ({ ownerState }) => ({\n color: 'inherit',\n '&:hover': {\n color: 'inherit',\n },\n ...getStyleOverrides(\n 'MuiIconButton',\n 'root',\n widgetTheme,\n ownerState\n ),\n }),\n },\n },\n MuiAvatar: {\n styleOverrides: {\n root: {\n height: 40,\n width: 40,\n },\n img: {\n objectFit: 'contain',\n },\n },\n ...widgetTheme.components?.MuiAvatar,\n },\n MuiListItemText: {\n styleOverrides: {\n primary: ({ theme }) => ({\n fontWeight: 600,\n fontSize: '1.125rem',\n lineHeight: '1.2778',\n color: theme.vars.palette.text.primary,\n }),\n secondary: ({ theme }) => ({\n fontWeight: 500,\n fontSize: '0.75rem',\n color: theme.vars.palette.text.secondary,\n }),\n },\n },\n MuiTooltip: {\n defaultProps: {\n enterDelay: 400,\n disableInteractive: true,\n arrow: true,\n placement: 'top',\n },\n styleOverrides: {\n tooltip: ({ theme }) => ({\n backgroundColor: 'rgb(0 0 0 / 64%)',\n backdropFilter: 'blur(3px)',\n fontSize: '0.75rem',\n padding: theme.spacing(1, 1.5),\n }),\n arrow: {\n color: 'rgb(0 0 0 / 64%)',\n },\n },\n },\n MuiMenu: {\n styleOverrides: {\n paper: ({ theme }) => ({\n backgroundColor: theme.vars.palette.background.paper,\n backgroundImage: 'none',\n }),\n },\n },\n MuiDrawer: {\n styleOverrides: {\n paper: {\n backgroundImage: 'none',\n },\n },\n },\n MuiPaper: {\n styleOverrides: {\n root: {\n backgroundImage: 'none',\n },\n },\n },\n MuiTabs: {\n ...widgetTheme.components?.MuiTabs,\n styleOverrides: {\n ...widgetTheme.components?.MuiTabs?.styleOverrides,\n root: ({ theme, ownerState }) => {\n const rootStyleOverrides = getStyleOverrides(\n 'MuiTabs',\n 'root',\n widgetTheme,\n ownerState\n )\n return {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n }),\n borderRadius: theme.vars.shape.borderRadius,\n ...rootStyleOverrides,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: theme.vars.palette.background.paper,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n }),\n borderRadius:\n theme.shape.borderRadius > 0\n ? `calc(${theme.vars.shape.borderRadius} - 4px)`\n : theme.vars.shape.borderRadius,\n boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n ...rootStyleOverrides?.[`.${tabsClasses.indicator}`],\n },\n }\n },\n },\n },\n MuiNavigationTabs: {\n ...widgetTheme.components?.MuiNavigationTabs,\n },\n MuiNavigationTab: {\n ...widgetTheme.components?.MuiNavigationTab,\n },\n MuiCheckbox: {\n styleOverrides: {\n root: {\n '&:hover': {\n backgroundColor: 'transparent',\n },\n },\n },\n ...widgetTheme.components?.MuiCheckbox,\n },\n },\n })\n\n return theme\n}\n"],"mappings":"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"}

package/dist/esm/themes/types.d.ts CHANGED Viewed

@@ -4,12 +4,6 @@ import { CardProps, ComponentsOverrides, ComponentsVariants, SimplePaletteColorO
 //#region src/themes/types.d.ts
 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;
@@ -70,9 +64,4 @@ declare module "@mui/material/Paper" {
     filled: true;
   }
 }
-declare module "@mui/material/Typography" {
-  interface TypographyPropsVariantOverrides {
-    "@supports (font-variation-settings: normal)": true;
-  }
-}
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/themes/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/themes/types.ts"],"mappings":";;;;;;YAcY,~~kBAAA;IACR,6CAAA,EAA+C,~~KAAA~~,CAAM,aAAA~~;~~EAAA;EAAA,UAE7C,yBAAA;~~IACR,~~6CAAA,GAAgD,KAAA,CAAM,aAAA;EAAA;EAAA,UAE9C,KAAA;IACR,~~YAAA;IACA,qBAAA;IACA,oBAAA;EAAA;EAAA,UAEQ,KAAA;IACR,KAAA,EAAO,KAAA;IACP,SAAA,EAAW,aAAA;IACX,eAAA,EAAiB,aAAA;IACjB,qBAAA,EAAuB,aAAA;IACvB,MAAA,EAAQ,aAAA;IACR,UAAA,EAAY,eAAA;EAAA;EAAA,UAEJ,YAAA;IACR,KAAA,GAAQ,OAAA,CAAQ,KAAA;IAChB,SAAA,GAAY,aAAA;IACZ,eAAA,GAAkB,aAAA;IAClB,qBAAA,GAAwB,aAAA;IACxB,MAAA,GAAS,aAAA;IACT,UAAA,GAAa,eAAA;EAAA;EAAA,UAEL,uBAAA;IACR,YAAA;IACA,iBAAA;IACA,gBAAA;EAAA;EAAA,UAEQ,mBAAA;IACR,YAAA,EAAc,OAAA,CAAQ,SAAA;IACtB,iBAAA,EAAmB,OAAA,CAAQ,SAAA;IAC3B,gBAAA,EAAkB,OAAA,CAAQ,QAAA;EAAA;EAAA,UAElB,UAAA;IACR,YAAA;MACE,YAAA,GAAe,mBAAA;MACf,cAAA,GAAiB,mBAAA,CACf,IAAA,CAAK,KAAA;MAEP,QAAA,GAAW,kBAAA;IAAA;IAEb,iBAAA;MACE,YAAA,GAAe,mBAAA;MACf,cAAA,GAAiB,mBAAA,CACf,IAAA,CAAK,KAAA;MAEP,QAAA,GAAW,kBAAA;IAAA;IAEb,gBAAA;MACE,YAAA,GAAe,mBAAA;MACf,cAAA,GAAiB,mBAAA,CACf,IAAA,CAAK,KAAA;MAEP,QAAA,GAAW,kBAAA;IAAA;EAAA;EAAA,UAGL,OAAA;IACR,UAAA,EAAY,OAAA;EAAA;EAAA,UAGJ,cAAA;IACR,UAAA,GAAa,yBAAA;EAAA;AAAA;AAAA;EAAA,UAKL,0BAAA;IACR,MAAA;EAAA;AAAA~~;AAAA;EAAA,UAKQ,+BAAA;IACR,6CAAA;EAAA;AAAA~~"}
1	+ {"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/themes/types.ts"],"mappings":";;;;;;YAcY,KAAA;IACR,YAAA;IACA,qBAAA;IACA,oBAAA;EAAA;EAAA,UAEQ,KAAA;IACR,KAAA,EAAO,KAAA;IACP,SAAA,EAAW,aAAA;IACX,eAAA,EAAiB,aAAA;IACjB,qBAAA,EAAuB,aAAA;IACvB,MAAA,EAAQ,aAAA;IACR,UAAA,EAAY,eAAA;EAAA;EAAA,UAEJ,YAAA;IACR,KAAA,GAAQ,OAAA,CAAQ,KAAA;IAChB,SAAA,GAAY,aAAA;IACZ,eAAA,GAAkB,aAAA;IAClB,qBAAA,GAAwB,aAAA;IACxB,MAAA,GAAS,aAAA;IACT,UAAA,GAAa,eAAA;EAAA;EAAA,UAEL,uBAAA;IACR,YAAA;IACA,iBAAA;IACA,gBAAA;EAAA;EAAA,UAEQ,mBAAA;IACR,YAAA,EAAc,OAAA,CAAQ,SAAA;IACtB,iBAAA,EAAmB,OAAA,CAAQ,SAAA;IAC3B,gBAAA,EAAkB,OAAA,CAAQ,QAAA;EAAA;EAAA,UAElB,UAAA;IACR,YAAA;MACE,YAAA,GAAe,mBAAA;MACf,cAAA,GAAiB,mBAAA,CACf,IAAA,CAAK,KAAA;MAEP,QAAA,GAAW,kBAAA;IAAA;IAEb,iBAAA;MACE,YAAA,GAAe,mBAAA;MACf,cAAA,GAAiB,mBAAA,CACf,IAAA,CAAK,KAAA;MAEP,QAAA,GAAW,kBAAA;IAAA;IAEb,gBAAA;MACE,YAAA,GAAe,mBAAA;MACf,cAAA,GAAiB,mBAAA,CACf,IAAA,CAAK,KAAA;MAEP,QAAA,GAAW,kBAAA;IAAA;EAAA;EAAA,UAGL,OAAA;IACR,UAAA,EAAY,OAAA;EAAA;EAAA,UAGJ,cAAA;IACR,UAAA,GAAa,yBAAA;EAAA;AAAA;AAAA;EAAA,UAKL,0BAAA;IACR,MAAA;EAAA;AAAA"}

package/dist/esm/themes/watermelonLight.js CHANGED Viewed

@@ -34,7 +34,7 @@ const watermelonLightTheme = {
 		MuiCard: { defaultProps: { variant: "elevation" } },
 		MuiNavigationTabs: { styleOverrides: { 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"
 		} }) } }
 	}

package/dist/esm/themes/watermelonLight.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"watermelonLight.js","names":[],"sources":["../../../src/themes/watermelonLight.ts"],"sourcesContent":["import { tabsClasses } from '@mui/material'\nimport type { WidgetTheme } from '../types/widget.js'\n\nexport const watermelonLightTheme: WidgetTheme = {\n colorSchemes: {\n light: {\n palette: {\n primary: {\n main: '#f7557c',\n },\n secondary: {\n main: '#00A35A',\n },\n background: {\n default: '#ffeff3',\n paper: '#ffffff',\n },\n text: {\n primary: '#190006',\n secondary: '#766066',\n },\n grey: {\n 200: '#F0E5E8',\n 300: '#E5D7DA',\n 700: '#7A666B',\n 800: '#58373F',\n },\n playground: {\n main: '#f7557c',\n },\n },\n },\n },\n shape: {\n borderRadius: 16,\n borderRadiusSecondary: 16,\n borderRadiusTertiary: 24,\n },\n typography: {\n fontFamily: 'Inter, sans-serif',\n },\n container: {\n boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.12)',\n borderRadius: '16px',\n },\n components: {\n MuiCard: {\n defaultProps: { variant: 'elevation' },\n },\n MuiNavigationTabs: {\n styleOverrides: {\n root: ({ theme }) => ({\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: '#ffffff',\n filter: `drop-shadow(0 1px 4px ~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.08~~))`,\n borderRadius: '16px',\n },\n }),\n },\n },\n // MuiIconButton: {\n // styleOverrides: {\n // root: ({ theme }) => ({\n // backgroundColor: alpha(theme.palette.common.white, 0.04),\n // color: 'inherit',\n // borderRadius: theme.vars.shape.borderRadiusSecondary,\n // '&:hover': {\n // backgroundColor: alpha(\n // theme.palette.mode === 'light'\n // ? theme.palette.common.black\n // : theme.palette.common.white,\n // 0.08,\n // ),\n // color: 'inherit',\n // },\n // }),\n // },\n // },\n },\n} as WidgetTheme\n"],"mappings":";;AAGA,MAAa,uBAAoC;CAC/C,cAAc,EACZ,OAAO,EACL,SAAS;EACP,SAAS,EACP,MAAM,WACP;EACD,WAAW,EACT,MAAM,WACP;EACD,YAAY;GACV,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,WAAW;GACZ;EACD,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,YAAY,EACV,MAAM,WACP;EACF,EACF,EACF;CACD,OAAO;EACL,cAAc;EACd,uBAAuB;EACvB,sBAAsB;EACvB;CACD,YAAY,EACV,YAAY,qBACb;CACD,WAAW;EACT,WAAW;EACX,cAAc;EACf;CACD,YAAY;EACV,SAAS,EACP,cAAc,EAAE,SAAS,aAAa,EACvC;EACD,mBAAmB,EACjB,gBAAgB,EACd,OAAO,EAAE,aAAa,GACnB,IAAI,YAAY,cAAc;GAC7B,iBAAiB;GACjB,QAAQ,~~8BAA8B~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~;~~GACpF~~,cAAc;GACf,EACF,GACF,EACF;EAmBF;CACF"}
1	+ {"version":3,"file":"watermelonLight.js","names":[],"sources":["../../../src/themes/watermelonLight.ts"],"sourcesContent":["import { tabsClasses } from '@mui/material'\nimport type { WidgetTheme } from '../types/widget.js'\n\nexport const watermelonLightTheme: WidgetTheme = {\n colorSchemes: {\n light: {\n palette: {\n primary: {\n main: '#f7557c',\n },\n secondary: {\n main: '#00A35A',\n },\n background: {\n default: '#ffeff3',\n paper: '#ffffff',\n },\n text: {\n primary: '#190006',\n secondary: '#766066',\n },\n grey: {\n 200: '#F0E5E8',\n 300: '#E5D7DA',\n 700: '#7A666B',\n 800: '#58373F',\n },\n playground: {\n main: '#f7557c',\n },\n },\n },\n },\n shape: {\n borderRadius: 16,\n borderRadiusSecondary: 16,\n borderRadiusTertiary: 24,\n },\n typography: {\n fontFamily: 'Inter, sans-serif',\n },\n container: {\n boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.12)',\n borderRadius: '16px',\n },\n components: {\n MuiCard: {\n defaultProps: { variant: 'elevation' },\n },\n MuiNavigationTabs: {\n styleOverrides: {\n root: ({ theme }) => ({\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: '#ffffff',\n filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent))`,\n borderRadius: '16px',\n },\n }),\n },\n },\n // MuiIconButton: {\n // styleOverrides: {\n // root: ({ theme }) => ({\n // backgroundColor: alpha(theme.palette.common.white, 0.04),\n // color: 'inherit',\n // borderRadius: theme.vars.shape.borderRadiusSecondary,\n // '&:hover': {\n // backgroundColor: alpha(\n // theme.palette.mode === 'light'\n // ? theme.palette.common.black\n // : theme.palette.common.white,\n // 0.08,\n // ),\n // color: 'inherit',\n // },\n // }),\n // },\n // },\n },\n} as WidgetTheme\n"],"mappings":";;AAGA,MAAa,uBAAoC;CAC/C,cAAc,EACZ,OAAO,EACL,SAAS;EACP,SAAS,EACP,MAAM,WACP;EACD,WAAW,EACT,MAAM,WACP;EACD,YAAY;GACV,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,WAAW;GACZ;EACD,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,YAAY,EACV,MAAM,WACP;EACF,EACF,EACF;CACD,OAAO;EACL,cAAc;EACd,uBAAuB;EACvB,sBAAsB;EACvB;CACD,YAAY,EACV,YAAY,qBACb;CACD,WAAW;EACT,WAAW;EACX,cAAc;EACf;CACD,YAAY;EACV,SAAS,EACP,cAAc,EAAE,SAAS,aAAa,EACvC;EACD,mBAAmB,EACjB,gBAAgB,EACd,OAAO,EAAE,aAAa,GACnB,IAAI,YAAY,cAAc;GAC7B,iBAAiB;GACjB,QAAQ,4CAA4C,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC3F,cAAc;GACf,EACF,GACF,EACF;EAmBF;CACF"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "4.0.0-beta.12",
+  "version": "4.0.0-beta.14",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -35,9 +35,9 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@lifi/sdk": "4.0.0-beta.5",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/material": "^7.3.9",
-    "@mui/system": "^7.3.9",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@mui/system": "^7.3.10",
     "@tanstack/react-router": "^1.168.10",
     "@tanstack/react-virtual": "^3.13.23",
     "i18next": "^26.0.4",
@@ -47,7 +47,7 @@
     "react-intersection-observer": "^10.0.3",
     "react-transition-group": "^4.4.5",
     "zustand": "^5.0.12",
-    "@lifi/wallet-management": "4.0.0-beta.11",
+    "@lifi/wallet-management": "4.0.0-beta.12",
     "@lifi/widget-provider": "4.0.0-beta.11"
   },
   "peerDependencies": {

package/src/components/AmountInput/PriceFormHelperText.style.tsx CHANGED Viewed

@@ -14,12 +14,12 @@ export const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =
     ...(onClick
       ? {
           '&:hover': {
-            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: 'transparent',
             '&:hover': {
-              backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
             },
           }),
         }

package/src/components/ButtonTertiary.tsx CHANGED Viewed

@@ -6,21 +6,21 @@ export const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =
     color: theme.vars.palette.text.primary,
     height: 40,
     fontSize: 14,
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     '&:hover, &:active': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
     },
     [`&.${buttonClasses.loading}:disabled`]: {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     },
     ...theme.applyStyles('dark', {
       color: theme.vars.palette.text.primary,
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
       '&:hover, &:active': {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
       },
       [`&.${buttonClasses.loading}:disabled`]: {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
       },
     }),
     [`.${buttonClasses.loadingIndicator}`]: {

package/src/components/Card/Card.tsx CHANGED Viewed

@@ -52,13 +52,13 @@ export const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =
           style: {
             borderWidth: 1,
             borderStyle: 'solid',
-            borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
+            borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
             backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
             '&:hover': {
               backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,
             },
             ...theme.applyStyles('dark', {
-              borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
+              borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
               backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
               '&:hover': {
                 backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,

package/src/components/Card/CardIconButton.tsx CHANGED Viewed

@@ -11,9 +11,9 @@ export const CardIconButton: React.FC<
 >(({ theme }) => {
   return {
     padding: theme.spacing(0.5),
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
     },
     fontSize: '1rem',
   }

package/src/components/Card/CardLabel.tsx CHANGED Viewed

@@ -47,10 +47,10 @@ export const CardLabel: React.FC<
     {
       props: { variant: 'warning' },
       style: {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
         color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
           color: theme.vars.palette.warning.main,
         }),
       },

package/src/components/ContextMenu.style.tsx CHANGED Viewed

@@ -8,6 +8,6 @@ export const ContextMenuButton: React.FC<
   top: theme.spacing(1.75),
   right: theme.spacing(2),
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   },
 }))

package/src/components/Header/ActivitiesButton.style.tsx CHANGED Viewed

@@ -41,14 +41,14 @@ export const ActivitiesIconButton: React.FC<
     {
       props: { active: true },
       style: ({ theme }) => ({
-        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
         '&:hover': {
-          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.12)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
           '&:hover': {
-            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
           },
         }),
       }),

package/src/components/Header/ActivitiesButton.tsx CHANGED Viewed

@@ -25,6 +25,7 @@ export const ActivitiesButton = (): JSX.Element => {
         active={indicator.active || indicator.failed}
         size="medium"
         onClick={() => navigate({ to: navigationRoutes.activities })}
+        disableRipple
       >
         <ErrorBadge
           invisible={!indicator.failed}

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

@@ -62,12 +62,12 @@ export const WalletButton: React.FC<
   borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
   backgroundColor: 'transparent',
   '&:hover': {
-    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: 'transparent',
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     },
   }),
   [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {

package/src/components/Header/SettingsButton.style.tsx CHANGED Viewed

@@ -32,27 +32,27 @@ export const SettingsIconButton: React.FC<
   switch (variant) {
     case 'info':
       return {
-        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
         '&:hover': {
-          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.12)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
           '&:hover': {
-            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,
           },
         }),
       }
     case 'warning':
       return {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
         '&:hover': {
-          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)`,
+          backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)`,
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
           '&:hover': {
-            backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.16) 80%, black)`,
+            backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)`,
           },
         }),
       }

package/src/components/IconCircle/IconCircle.style.tsx CHANGED Viewed

@@ -19,28 +19,28 @@ export const getStatusColor = (
   switch (status) {
     case 'success':
       return {
-        color: theme.vars.palette.success.mainChannel,
+        color: theme.vars.palette.success.main,
         mixAmount: 12,
         lightDarken: 0,
         darkDarken: 0,
       }
     case 'error':
       return {
-        color: theme.vars.palette.error.mainChannel,
+        color: theme.vars.palette.error.main,
         mixAmount: 12,
         lightDarken: 0,
         darkDarken: 0,
       }
     case 'warning':
       return {
-        color: theme.vars.palette.warning.mainChannel,
+        color: theme.vars.palette.warning.main,
         mixAmount: 48,
         lightDarken: 0.32,
         darkDarken: 0,
       }
     case 'info':
       return {
-        color: theme.vars.palette.info.mainChannel,
+        color: theme.vars.palette.info.main,
         mixAmount: 12,
         lightDarken: 0,
         darkDarken: 0,
@@ -61,7 +61,7 @@ export const IconCircleRoot: React.FC<
   ({ theme, colorConfig, circleSize }) => {
     const svgSize = Math.round(circleSize * iconSizeRatio)
     return {
-      backgroundColor: `color-mix(in srgb, rgb(${colorConfig.color}) ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
+      backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
       borderRadius: '50%',
       width: circleSize,
       height: circleSize,
@@ -69,13 +69,13 @@ export const IconCircleRoot: React.FC<
       position: 'relative',
       placeItems: 'center',
       '& > svg': {
-        color: `color-mix(in srgb, rgb(${colorConfig.color}) ${(1 - colorConfig.lightDarken) * 100}%, black)`,
+        color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,
         width: svgSize,
         height: svgSize,
       },
       ...theme.applyStyles('dark', {
         '& > svg': {
-          color: `color-mix(in srgb, rgb(${colorConfig.color}) ${(1 - colorConfig.darkDarken) * 100}%, black)`,
+          color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,
           width: svgSize,
           height: svgSize,
         },

package/src/components/IconTypography.ts CHANGED Viewed

@@ -3,9 +3,9 @@ import type React from 'react'
 export const IconTypography: React.FC<React.ComponentProps<typeof Box>> =
   styled(Box)(({ theme }) => ({
-    color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
+    color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
     lineHeight: 0,
     ...theme.applyStyles('dark', {
-      color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.32)`,
+      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,
     }),
   }))

package/src/components/ListItemButton.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ export const ListItemButton: React.FC<
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     },
     [`&.${listItemButtonClasses.selected}`]: {
       backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,