@xyo-network/os-react-runtime 5.0.11 → 5.0.13

package/src/modules/network/components/LoadingIndicator.tsx

@@ -22,11 +22,11 @@ export const NetworkLoadingIndicator: React.FC<NetworkLoadingIndicatorProps> = (
   const theme = useTheme()
   const { networkReady } = useOsNetwork()
 
-  const highContrastSuccessColor = darkMode ? theme.palette.success.dark : theme.palette.success.main
-  const successColor = highContrast ? highContrastSuccessColor : theme.palette.success.main
+  const highContrastSuccessColor = darkMode ? theme.vars?.palette.success.dark : theme.vars?.palette.success.main
+  const successColor = highContrast ? highContrastSuccessColor : theme.vars?.palette.success.main
 
-  const highContrastErrorColor = darkMode ? theme.palette.success.dark : theme.palette.error.main
-  const errorColor = highContrast ? highContrastErrorColor : theme.palette.error.main
+  const highContrastErrorColor = darkMode ? theme.vars?.palette.success.dark : theme.vars?.palette.error.main
+  const errorColor = highContrast ? highContrastErrorColor : theme.vars?.palette.error.main
 
   const NetworkComponent = useMemo(() => {
     if (networkReady) {

package/src/modules/widgets/StackOfWidgets.tsx

@@ -1,10 +1,9 @@
 // Example from https://codesandbox.io/p/sandbox/cards-stack-to6uf?
-import {
-  alpha, Box, useTheme,
-} from '@mui/material'
+import { Box, useTheme } from '@mui/material'
 import {
   animated, to as interpolate, useSprings,
 } from '@react-spring/web'
+import { alphaCss } from '@xylabs/react-theme'
 import type { ReactNode } from 'react'
 import React, { useState } from 'react'
 import { useDrag } from 'react-use-gesture'
@@ -112,7 +111,7 @@ function Deck() {
             style={{
               // WebkitBackdropFilter: 'blur(10px)',
               // backdropFilter: 'blur(10px)',
-              backgroundColor: alpha(theme.palette.background.paper, 0.2),
+              backgroundColor: alphaCss(theme.vars?.palette.background.paper ?? '#000', 0.2),
               backgroundPosition: 'center center',
               backgroundRepeat: 'no-repeat',
               backgroundSize: 'auto 85%',

package/src/modules/widgets/Types/BarGraph/StyledLinearProgress.tsx

@@ -1,13 +1,12 @@
-import {
-  alpha, LinearProgress, styled,
-} from '@mui/material'
+import { LinearProgress, styled } from '@mui/material'
+import { alphaCss } from '@xylabs/react-theme'
 
 export const StyledLinearProgress = styled(LinearProgress, { name: 'StyledLinearProgress' })(({ theme }) => ({
   '& .MuiLinearProgress-bar': { borderRadius: theme.shape.borderRadius },
   'MozBoxSizing': 'border-box',
   'WebkitBoxSizing': 'border-box',
   'background': 'transparent',
-  'borderBottom': `1px solid ${alpha(theme.palette.text.secondary, 0.3)}`,
+  'borderBottom': `1px solid ${alphaCss(theme.vars?.palette.text.secondary ?? '#000', 0.3)}`,
   'boxSizing': 'border-box',
   'height': theme.spacing(0.25),
 }))

package/src/modules/widgets/Types/Tables/BooleanTable.tsx

@@ -2,12 +2,13 @@
 import { CircleRounded } from '@mui/icons-material'
 import type { SvgIcon } from '@mui/material'
 import {
-  alpha, Paper, styled, TableRow, Typography,
+  Paper, styled, TableRow, Typography,
 } from '@mui/material'
 import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import {
   FlexCol, FlexGrowRow, FlexRow,
 } from '@xylabs/react-flexbox'
+import { alphaCss } from '@xylabs/react-theme'
 import type { ReactNode } from 'react'
 import React from 'react'
 
@@ -37,18 +38,18 @@ export const StyledLightTableRow = styled(Paper, { name: 'StyledLightTableRow' }
 }))
 
 export const StyledTableColumnTitle = styled(Typography, { name: 'StyledTableColumnTitle' })(({ theme }) => ({
-  color: theme.palette.text.secondary,
+  color: theme.vars?.palette.text.secondary,
   fontWeight: theme.typography.fontWeightBold,
   textTransform: 'uppercase',
 }))
 
 export const DefaultTrueOutput = styled<typeof SvgIcon>(CircleRounded, { name: 'DefaultTrueOutput' })(({ theme }) => ({
-  fill: theme.palette.success.main,
+  fill: theme.vars?.palette.success.main,
   fontSize: '10px',
 }))
 
 export const DefaultFalseOutput = styled<typeof SvgIcon>(CircleRounded, { name: 'DefaultFalseOutput' })(({ theme }) => ({
-  fill: alpha(theme.palette.text.disabled, 0.5),
+  fill: alphaCss(theme.vars?.palette.text.disabled ?? '#111', 0.5),
   fontSize: '10px',
 }))
 

package/src/modules/widgets/WidgetCard.tsx

@@ -2,12 +2,13 @@ import {
   ArrowForwardRounded, HistoryRounded, RefreshRounded,
 } from '@mui/icons-material'
 import {
-  alpha, Box, CardContent, IconButton, Tooltip, Typography, useTheme,
+  Box, CardContent, IconButton, Tooltip, Typography, useTheme,
 } from '@mui/material'
 import { ButtonEx } from '@xylabs/react-button'
 import {
   FlexCol, FlexGrowRow, FlexRow,
 } from '@xylabs/react-flexbox'
+import { alphaCss } from '@xylabs/react-theme'
 import type { SimpleCardProps } from '@xyo-network/react-card'
 import { CardEx } from '@xyo-network/react-card'
 import { DateTime } from 'luxon'
@@ -67,7 +68,7 @@ export const WidgetCard: React.FC<WidgetCardProps> = ({
     <CardEx
       {...props}
       sx={{
-        backgroundColor: alpha(theme.palette.background.paper, 0.4),
+        backgroundColor: alphaCss(theme.vars?.palette.background.paper ?? '#000', 0.4),
         display: 'flex',
         height: '300px',
         width: '300px',
@@ -80,7 +81,7 @@ export const WidgetCard: React.FC<WidgetCardProps> = ({
         >
           <FlexCol alignItems="stretch">
             <FlexGrowRow justifyContent="space-between" alignItems="center">
-              <Typography color={theme.palette.text.primary} fontWeight={theme.typography.fontWeightMedium} variant="h6">
+              <Typography color={theme.vars?.palette.text.primary} fontWeight={theme.typography.fontWeightMedium} variant="h6">
                 {widgetName}
               </Typography>
               <IconButton>

package/src/settings/Theme/ThemeCssVars.ts

@@ -1,6 +1,7 @@
 import {
-  alpha, createTheme, darken, lighten,
+  createTheme, darken, lighten,
 } from '@mui/material'
+import { alphaCss } from '@xylabs/react-theme'
 
 declare module '@mui/material/styles' {
   interface PaletteOptions {
@@ -101,7 +102,7 @@ export const ThemeCssVars = createTheme({
         root: ({ theme }) => ({
           WebkitBackdropFilter: 'blur(20px)',
           backdropFilter: 'blur(20px)',
-          backgroundColor: alpha(theme.palette.background.paper, 0.2),
+          backgroundColor: alphaCss(theme.vars?.palette.background.paper ?? '#000', 0.2),
           boxShadow: 'none',
           color: '#16163D',
           ...theme.applyStyles('dark', { color: '#CBC4CE' }),
@@ -114,7 +115,7 @@ export const ThemeCssVars = createTheme({
         root: ({ theme }) => ({
           WebkitBackdropFilter: 'blur(20px)',
           backdropFilter: 'blur(20px)',
-          backgroundColor: alpha(theme.palette.background.paper, 0.7),
+          backgroundColor: alphaCss(theme.vars?.palette.background.paper ?? '#000', 0.7),
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'space-between',
@@ -152,7 +153,7 @@ export const ThemeCssVars = createTheme({
         root: ({ theme }) => ({
           '& .MuiTypography-root, & .MuiButton-root': { color: '#FFFFFF' },
           'paperProps': { backgroundColor: '#19193F' },
-          ...theme.applyStyles('dark', { color: theme.palette.secondary.main }),
+          ...theme.applyStyles('dark', { color: theme.vars?.palette.secondary.main }),
         }),
       },
     },
@@ -160,7 +161,7 @@ export const ThemeCssVars = createTheme({
       defaultProps: { disableUnderline: true },
       styleOverrides: {
         root: ({ theme }) => ({
-          '&.Mui-error': { border: `${theme.palette.error.main} 1px solid` },
+          '&.Mui-error': { border: `${theme.vars?.palette.error.main} 1px solid` },
           'border': 'transparent 1px solid',
           'borderRadius': theme.shape.borderRadius,
         }),
@@ -189,8 +190,8 @@ export const ThemeCssVars = createTheme({
           ...theme.typography.body1,
           color: 'inherit',
           maxWidth: 250,
-          border: `1px solid ${theme.palette.background.default}`,
-          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.vars?.palette.background.default}`,
+          backgroundColor: theme.vars?.palette.background.paper,
           padding: theme.spacing(1),
           boxShadow: 'rgba(17, 12, 46, 0.15) 0px 48px 100px 0px',
         }),

package/src/utils/DappInstallTypeFilters.ts

@@ -15,8 +15,8 @@ export const DappInstallTypeFilters: Record<
   preInstalled(registeredDappSets?: RegisteredDappSet[]) {
     return registeredDappSets && registeredDappSets?.length > 0
       ? registeredDappSets
-        ?.filter(isPreInstalledDappSet)
-        .sort((a, b) => (a.dapp.config.name.toUpperCase() < b.dapp.config.name.toUpperCase() ? -1 : 1))
+          ?.filter(isPreInstalledDappSet)
+          .sort((a, b) => (a.dapp.config.name.toUpperCase() < b.dapp.config.name.toUpperCase() ? -1 : 1))
       : undefined
   },
   uninstalled(registeredDappSets?: RegisteredDappSet[]) {