refactor: pick theme refactor from GH-6009

packages/mask/src/UIRoot.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 import { Web3Provider } from '@masknet/web3-shared-evm'
-import { CssBaseline, StyledEngineProvider, Theme } from '@mui/material'
+import { StyledEngineProvider, Theme } from '@mui/material'
 import { NetworkPluginID, PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra'
 import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared'
 import { ErrorBoundary, ErrorBoundaryBuildInfoContext, useValueRef } from '@masknet/shared-base-ui'
@@ -57,10 +57,8 @@ export function MaskUIRoot({ children, kind, useTheme }: MaskUIRootProps) {
                 useMaskIconPalette={useMaskIconPalette}
                 CustomSnackbarOffsetY={isFacebook(activatedSocialNetworkUI) ? 80 : undefined}
                 useTheme={useTheme}
-                baseline={kind === 'page'}>
-                <CssBaseline />
-                {jsx}
-            </MaskThemeProvider>
+                children={jsx}
+            />
         ),
         (jsx) => <SharedContextProvider>{jsx}</SharedContextProvider>,
     )

packages/mask/src/extension/options-page/DashboardDialogs/Base.tsx

@@ -10,9 +10,13 @@ import {
     IconButtonProps,
 } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { ThemeProvider } from '@mui/material/styles'
+import { Theme, ThemeOptions, ThemeProvider } from '@mui/material/styles'
 import CloseIcon from '@mui/icons-material/Close'
-import { extendsTheme, useClassicMaskFullPageTheme, useMatchXS } from '../../../utils'
+import { useMatchXS } from '../../../utils'
+import { useClassicMaskFullPageTheme } from '../../../utils/theme/useClassicMaskFullPageTheme'
+import { appearanceSettings, languageSettings } from '../../../settings/settings'
+import { useValueRef } from '@masknet/shared-base-ui'
+import { cloneDeep, merge } from 'lodash-unified'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -101,7 +105,7 @@ export function useModal<DialogProps extends object, AdditionalPropsAppendByDisp
         onClose,
     }
     // Restore old theme
-    const theme = useClassicMaskFullPageTheme()
+    const theme = useClassicMaskFullPageTheme(useValueRef(appearanceSettings), useValueRef(languageSettings))
     const renderedComponent =
         state === DialogState.Destroyed ? null : (
             <ThemeProvider theme={theme}>
@@ -160,6 +164,9 @@ const useDashboardDialogWrapperStyles = makeStyles<DashboardDialogWrapperProps>(
     },
 }))
 
+function extendsTheme(extend: (theme: Theme) => ThemeOptions) {
+    return (theme: Theme) => merge(cloneDeep(theme), extend(theme))
+}
 const dialogTheme = extendsTheme((theme) => ({
     components: {
         MuiOutlinedInput: {

packages/mask/src/extension/popups/UI.tsx

@@ -2,16 +2,17 @@ import { lazy } from 'react'
 import { Navigate, Route, Routes, HashRouter } from 'react-router-dom'
 import { createInjectHooksRenderer, useActivatedPluginsDashboard } from '@masknet/plugin-infra'
 import { PopupRoutes } from '@masknet/shared-base'
-import { useClassicMaskFullPageTheme } from '../../utils'
+import { usePopupFullPageTheme } from '../../utils/theme/useClassicMaskFullPageTheme'
 import '../../social-network-adaptor/browser-action'
 import { Web3Provider } from '@masknet/web3-shared-evm'
 import { PopupWeb3Context } from '../../web3/context'
 import { PopupFrame } from './components/PopupFrame'
-import { Appearance } from '@masknet/theme'
 import { MaskUIRoot } from '../../UIRoot'
+import { useValueRef } from '@masknet/shared-base-ui'
+import { languageSettings } from '../../settings/settings'
 
-function useAlwaysLightTheme() {
-    return useClassicMaskFullPageTheme({ forcePalette: Appearance.light })
+function usePopupTheme() {
+    return usePopupFullPageTheme(useValueRef(languageSettings))
 }
 const Wallet = lazy(() => import('./pages/Wallet'))
 const Personas = lazy(() => import('./pages/Personas'))
@@ -24,7 +25,7 @@ const PluginRender = createInjectHooksRenderer(useActivatedPluginsDashboard, (x)
 
 export default function Popups() {
     return (
-        <MaskUIRoot useTheme={useAlwaysLightTheme} kind="page">
+        <MaskUIRoot useTheme={usePopupTheme} kind="page">
             <Web3Provider value={PopupWeb3Context}>
                 <HashRouter>
                     <Routes>

packages/mask/src/extension/popups/components/PopupFrame/index.tsx

@@ -17,7 +17,7 @@ function GlobalCss() {
                     overflowX: 'hidden',
                     margin: '0 auto !important',
                     maxWidth: '100%',
-                    '-webkit-font-smoothing': 'subpixel-antialiased',
+                    WebkitFontSmoothing: 'subpixel-antialiased',
                     '&::-webkit-scrollbar': {
                         display: 'none',
                     },

packages/mask/src/extension/popups/pages/Swap/index.tsx

@@ -9,7 +9,8 @@ import { WalletStateBarUI } from '../../components/WalletStateBar'
 import { SwapBox } from './SwapBox'
 import { SwapWeb3Context } from '../../../../web3/context'
 import { PopupRoutes } from '@masknet/shared-base'
-import { useI18N, usePopupsMaskFullPageTheme } from '../../../../utils'
+import { useI18N } from '../../../../utils'
+import { useSwapPageTheme } from '../../../../utils/theme/useSwapPageTheme'
 import { NetworkPluginID, useReverseAddress } from '@masknet/plugin-infra'
 import { TargetChainIdContext } from '../../../../plugins/Trader/trader/useTargetChainIdContext'
 import { AllProviderTradeContext } from '../../../../plugins/Trader/trader/useAllProviderTradeContext'
@@ -68,7 +69,7 @@ export default function SwapPage() {
     const { t } = useI18N()
     const { classes } = useStyles()
     const chainId = useChainId()
-    const theme = usePopupsMaskFullPageTheme()
+    const theme = useSwapPageTheme()
     const { value: pendingTransactions = [] } = useRecentTransactions({
         status: TransactionStatusType.NOT_DEPEND,
     })

packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx

@@ -95,7 +95,7 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => {
             width: '100%',
             alignItems: 'center',
             justifyContent: 'space-between',
-            '-webkit-font-smoothing': 'antialiased',
+            WebkitFontSmoothing: 'antialiased',
             fontSize: 14,
         },
         cardHeaderLocked: {

packages/mask/src/plugins/VCent/SNSAdaptor/TweetDialog.tsx

@@ -1,7 +1,7 @@
 import { first } from 'lodash-unified'
 import { Button } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { isDarkTheme } from '../../../utils/theme-tools'
+import { isDarkTheme } from '../../../utils/theme'
 import { ETHIcon } from '../icons/ETH'
 import { VCentIconLight, VCentIconDark } from '../icons/VCent'
 import { VALUABLES_VCENT_URL } from '../constants'

packages/mask/src/plugins/Wallet/SNSAdaptor/RiskWarningDialog/index.tsx

@@ -50,9 +50,9 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: theme.spacing(2),
         padding: theme.spacing(2),
         borderRadius: theme.spacing(1),
-        '&> :first-child': {
-            paddingBottom: theme.spacing(1),
-        },
+    },
+    texts: {
+        paddingBottom: theme.spacing(1),
     },
 }))
 
@@ -104,10 +104,10 @@ export function WalletRiskWarningDialog() {
                         children={<Trans i18nKey="multiline">{t('wallet_risk_warning_content')}</Trans>}
                     />
                     <Paper elevation={0} className={`${classes.wallet} dashboard-style`}>
-                        <Typography variant="body1" color="textSecondary">
+                        <Typography variant="body1" color="textSecondary" className={classes.texts}>
                             {t('nft_wallet_label')}
                         </Typography>
-                        <Typography variant="body1" color="textPrimary">
+                        <Typography variant="body1" color="textPrimary" className={classes.texts}>
                             {isMobile ? formatEthereumAddress(account, 5) : account}
                         </Typography>
                     </Paper>

packages/mask/src/social-network-adaptor/facebook.com/customization/custom.ts

@@ -5,7 +5,7 @@ import { useMemo } from 'react'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { SubscriptionFromValueRef } from '@masknet/shared-base'
 import type { SocialNetworkUI } from '../../../social-network'
-import { fromRGB, isDark, shade, toRGB } from '../../../utils/theme-tools'
+import { fromRGB, isDark, shade, toRGB } from '../../../utils/theme'
 
 const primaryColorRef = new ValueRef(toRGB([29, 161, 242]))
 const primaryColorContrastColorRef = new ValueRef(toRGB([255, 255, 255]))

packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts

@@ -5,7 +5,7 @@ import { useMemo } from 'react'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { SubscriptionFromValueRef } from '@masknet/shared-base'
 import type { SocialNetworkUI } from '../../../social-network'
-import { fromRGB, getBackgroundColor, getForegroundColor, shade, toRGB } from '../../../utils/theme-tools'
+import { fromRGB, getBackgroundColor, getForegroundColor, shade, toRGB } from '../../../utils/theme'
 import { themeListItemSelector } from '../utils/selector'
 
 // TODO: get this from DOM. But currently Minds has a single primary color

packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts

@@ -5,7 +5,7 @@ import { PaletteMode, Theme, unstable_createMuiStrictModeTheme } from '@mui/mate
 import produce, { setAutoFreeze } from 'immer'
 import { useMemo } from 'react'
 import type { SocialNetworkUI } from '../../../social-network'
-import { fromRGB, getBackgroundColor, getForegroundColor, isDark, shade, toRGB } from '../../../utils/theme-tools'
+import { fromRGB, getBackgroundColor, getForegroundColor, isDark, shade, toRGB } from '../../../utils/theme'
 import { isMobileTwitter } from '../utils/isMobile'
 import { composeAnchorSelector, composeAnchorTextSelector, headingTextSelector } from '../utils/selector'
 import twitterColorSchema from './twitter-color-schema.json'

packages/mask/src/utils/index.ts

@@ -11,7 +11,6 @@ export * from './i18n-next-ui'
 export * from './messages'
 export * from './permissions'
 export * from './createNormalReactRoot'
-export * from './theme-tools'
 export * from './theme'
 export * from './utils'
 export * from './watcher'

packages/mask/src/utils/theme/MaskTheme.ts

@@ -0,0 +1,96 @@
+// ! This file is used during SSR. DO NOT import new files that does not work in SSR
+
+import { unstable_createMuiStrictModeTheme, type ThemeOptions } from '@mui/material'
+import { grey, orange } from '@mui/material/colors'
+import { cloneDeep, merge } from 'lodash-unified'
+
+function getFontFamily(monospace?: boolean) {
+    // We want to look native.
+    // Windows has no CJK sans monospace. Accommodate that.
+    // We only use it for fingerprints anyway so CJK coverage ain't a problem... yet.
+    const monofont = navigator.platform.startsWith('Win') ? 'Consolas, monospace' : 'monospace'
+    // https://caniuse.com/font-family-system-ui
+    // Firefox does NOT support yet it in any form on Windows, but tests indicate that it agrees with Edge in using the UI font for sans-serif:
+    // Microsoft YaHei on zh-Hans-CN.
+    return !monospace ? '-apple-system, system-ui, sans-serif' : monofont
+}
+const base: ThemeOptions = {
+    palette: {
+        primary: { main: '#1c68f3' },
+        secondary: orange,
+        text: { hint: 'rgba(0, 0, 0, 0.38)' },
+    },
+    typography: {
+        fontFamily: getFontFamily(),
+    },
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 1112,
+            lg: 1280,
+            xl: 1920,
+        },
+    },
+    components: {
+        MuiLink: { defaultProps: { underline: 'hover' } },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    textTransform: 'unset',
+                    minWidth: '100px',
+                },
+            },
+            defaultProps: {
+                size: 'small',
+                disableElevation: true,
+            },
+        },
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    textTransform: 'unset',
+                    padding: '0',
+                    // up-sm
+                    '@media screen and (min-width: 600px)': {
+                        minWidth: 160,
+                    },
+                },
+            },
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: {
+                    borderRadius: '12px',
+                },
+            },
+        },
+    },
+}
+const lightThemePatch: Partial<ThemeOptions> = {
+    palette: {
+        mode: 'light',
+    },
+}
+const darkThemePatch: Partial<ThemeOptions> = {
+    palette: {
+        mode: 'dark',
+        background: {
+            paper: grey[900],
+        },
+    },
+    components: {
+        MuiPaper: {
+            // https://github.com/mui-org/material-ui/pull/25522
+            styleOverrides: { root: { backgroundImage: 'unset' } },
+        },
+    },
+}
+const baseTheme = (theme: 'dark' | 'light') => {
+    if (theme === 'light') return merge(cloneDeep(base), lightThemePatch)
+    return merge(cloneDeep(base), darkThemePatch)
+}
+/** @deprecated Only use it from useClassicMaskSNSTheme  */
+export const MaskLightTheme = unstable_createMuiStrictModeTheme(baseTheme('light'))
+/** @deprecated Only use it from useClassicMaskSNSTheme  */
+export const MaskDarkTheme = unstable_createMuiStrictModeTheme(baseTheme('dark'))

packages/mask/src/utils/theme-tools.ts → packages/mask/src/utils/theme/color-tools.ts

@@ -1,3 +1,5 @@
+import { clamp } from 'lodash-unified'
+
 type RGB = [number, number, number]
 type RGBA = [number, number, number, number]
 
@@ -19,12 +21,6 @@ export function fromRGB(rgb: string): RGB | undefined {
     return
 }
 
-export function clamp(num: number, min: number, max: number) {
-    if (num < min) return min
-    if (num > max) return max
-    return num
-}
-
 export function shade(channels: RGB, percentage: number): RGB {
     return channels.map((c) => clamp(Math.floor((c * (100 + percentage)) / 100), 0, 255)) as RGB
 }

packages/mask/src/utils/theme/index.ts

@@ -0,0 +1,9 @@
+import './theme-global.d'
+
+// Do not export more files. Those files are deprecated.
+export * from './color-tools'
+export * from './MaskTheme'
+export * from './useColorStyles'
+export * from './useErrorStyles'
+export * from './useThemeLanguage'
+export * from './useClassicMaskSNSTheme'

packages/mask/src/utils/theme/useClassicMaskFullPageTheme.ts

@@ -0,0 +1,26 @@
+// ! This file is used during SSR. DO NOT import new files that does not work in SSR
+
+import type { LanguageOptions } from '@masknet/public-api'
+import { Appearance } from '@masknet/theme'
+import { PaletteMode, unstable_createMuiStrictModeTheme } from '@mui/material'
+import { MaskDarkTheme, MaskLightTheme } from './MaskTheme'
+import { useThemeLanguage } from './useThemeLanguage'
+
+/**
+ * @deprecated Should migrate to \@masknet/theme
+ */
+export function useClassicMaskFullPageTheme(userPreference: Appearance, language: LanguageOptions) {
+    const systemPreference: PaletteMode =
+        'matchMedia' in globalThis ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : 'light'
+    const finalPalette: PaletteMode = userPreference === Appearance.default ? systemPreference : userPreference
+
+    const baseTheme = finalPalette === 'dark' ? MaskDarkTheme : MaskLightTheme
+    return unstable_createMuiStrictModeTheme(baseTheme, useThemeLanguage(language))
+}
+
+/**
+ * @deprecated Should migrate to \@masknet/theme
+ */
+export function usePopupFullPageTheme(language: LanguageOptions) {
+    return useClassicMaskFullPageTheme(Appearance.light, language)
+}

packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts

@@ -0,0 +1,28 @@
+import { unstable_createMuiStrictModeTheme } from '@mui/material'
+import type { Theme } from '@mui/material/styles/createTheme'
+import { useRef } from 'react'
+import { activatedSocialNetworkUI } from '../../social-network'
+import { useSubscription } from 'use-subscription'
+import { MaskDarkTheme, MaskLightTheme } from './MaskTheme'
+import { useThemeLanguage } from './useThemeLanguage'
+import { SubscriptionFromValueRef } from '@masknet/shared-base'
+import { ValueRef } from '@dimensiondev/holoflows-kit'
+import { useValueRef } from '@masknet/shared-base-ui'
+import { languageSettings } from '../../settings/settings'
+
+const staticRef = SubscriptionFromValueRef(new ValueRef('light'))
+const defaultUseTheme = (t: Theme) => t
+/**
+ * @deprecated Should migrate to \@masknet/theme
+ */
+export function useClassicMaskSNSTheme() {
+    const provider = useRef(activatedSocialNetworkUI.customization.paletteMode?.current || staticRef).current
+    const usePostTheme = useRef(activatedSocialNetworkUI.customization.useTheme || defaultUseTheme).current
+    const palette = useSubscription(provider)
+    const baseTheme = palette === 'dark' ? MaskDarkTheme : MaskLightTheme
+
+    // TODO: support RTL?
+    const [localization, isRTL] = useThemeLanguage(useValueRef(languageSettings))
+    const theme = unstable_createMuiStrictModeTheme(baseTheme, localization)
+    return usePostTheme(theme)
+}

packages/mask/src/utils/theme/useColorStyles.ts

@@ -0,0 +1,18 @@
+import { makeStyles } from '@masknet/theme'
+import { blue, green, red } from '@mui/material/colors'
+import type { MaskDarkTheme } from './MaskTheme'
+
+export const useColorStyles = makeStyles()((theme: typeof MaskDarkTheme) => {
+    const dark = theme.palette.mode === 'dark'
+    return {
+        error: {
+            color: dark ? red[500] : red[900],
+        },
+        success: {
+            color: dark ? green[500] : green[800],
+        },
+        info: {
+            color: dark ? blue[500] : blue[800],
+        },
+    }
+})