refactor: unify theme (#1303)

packages/component/src/styles/styled.tsx

@@ -1,10 +1,17 @@
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
-import emotionStyled from '@emotion/styled';
+import { CssBaseline } from '@mui/material';
+import {
+  createTheme as createMuiTheme,
+  css,
+  keyframes,
+  styled,
+  ThemeProvider as MuiThemeProvider,
+} from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
+import { useMemo } from 'react';
 
 import { AffineTheme } from './types';
-export { css, keyframes } from '@emotion/react';
-export const styled = emotionStyled;
+
+export { css, keyframes, styled };
 
 export const ThemeProvider = ({
   theme,
@@ -12,5 +19,11 @@ export const ThemeProvider = ({
 }: PropsWithChildren<{
   theme: AffineTheme;
 }>) => {
-  return <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>;
+  const muiTheme = useMemo(() => createMuiTheme(theme), [theme]);
+  return (
+    <MuiThemeProvider theme={muiTheme}>
+      <CssBaseline />
+      {children}
+    </MuiThemeProvider>
+  );
 };

packages/component/src/styles/theme.ts

@@ -2,7 +2,7 @@ import '@emotion/react';
 
 import type { EditorContainer } from '@blocksuite/editor';
 
-import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
+import { AffineTheme, AffineThemeCSSVariables } from './types';
 
 const basicFontFamily =
   'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
@@ -11,7 +11,9 @@ export const getLightTheme = (
   editorMode: EditorContainer['mode']
 ): AffineTheme => {
   return {
-    mode: 'light',
+    palette: {
+      mode: 'light',
+    },
     editorMode,
     colors: {
       primaryColor: '#6880FF',
@@ -92,7 +94,9 @@ export const getDarkTheme = (
 
   return {
     ...lightTheme,
-    mode: 'dark',
+    palette: {
+      mode: 'dark',
+    },
     colors: {
       primaryColor: '#6880FF',
       pageBackground: '#2c2c2c',
@@ -143,11 +147,10 @@ export const getDarkTheme = (
 };
 
 export const globalThemeVariables: (
-  mode: ThemeMode,
   theme: AffineTheme
-) => AffineThemeCSSVariables = (mode, theme) => {
+) => AffineThemeCSSVariables = theme => {
   return {
-    '--affine-theme-mode': theme.mode,
+    '--affine-theme-mode': theme.palette.mode,
     '--affine-editor-mode': theme.editorMode,
 
     '--affine-primary-color': theme.colors.primaryColor,

packages/component/src/styles/types.ts

@@ -14,8 +14,10 @@ export type ThemeProviderValue = {
 };
 
 export interface AffineTheme {
-  mode: Theme;
   editorMode: EditorContainer['mode'];
+  palette: {
+    mode: 'light' | 'dark';
+  };
   colors: {
     primaryColor: string;