refactor: unify theme (#1303)

packages/component/package.json

@@ -16,14 +16,18 @@
     "@blocksuite/icons": "2.0.17",
     "@blocksuite/react": "0.5.0-20230303192351-13b0dd7",
     "@blocksuite/store": "0.5.0-20230303192351-13b0dd7",
+    "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.6",
+    "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.6",
     "@mui/base": "5.0.0-alpha.119",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.11",
+    "@mui/styled-engine-sc": "^5.11.11",
     "lit": "^2.6.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.8"
   },
   "devDependencies": {
     "@storybook/addon-actions": "7.0.0-beta.60",

packages/component/src/index.ts

@@ -16,3 +16,151 @@ export * from './ui/shared/Container';
 export * from './ui/table';
 export * from './ui/toast';
 export * from './ui/tooltip';
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    colors: {
+      primaryColor: string;
+
+      pageBackground: string;
+      popoverBackground: string;
+      tooltipBackground: string;
+      hoverBackground: string;
+      innerHoverBackground: string;
+      codeBackground: string;
+      codeBlockBackground: string;
+      // Use for blockHub and slide bar background
+      hubBackground: string;
+      cardHoverBackground: string;
+      warningBackground: string;
+      errorBackground: string;
+      // Use for the page`s text
+      textColor: string;
+      secondaryTextColor: string;
+      // Use for the editor`s text, because in edgeless mode text is different form other
+      edgelessTextColor: string;
+      linkColor: string;
+      // In dark mode, normal text`s (not bold) color
+      linkColor2: string;
+      linkVisitedColor: string;
+      iconColor: string;
+      handleColor: string;
+      popoverColor: string;
+      inputColor: string;
+      tooltipColor: string;
+      codeColor: string;
+      quoteColor: string;
+      placeHolderColor: string;
+      selectedColor: string;
+      borderColor: string;
+      disableColor: string;
+      warningColor: string;
+      errorColor: string;
+      lineNumberColor: string;
+    };
+    font: {
+      title: string;
+      h1: string;
+      h2: string;
+      h3: string;
+      h4: string;
+      h5: string;
+      h6: string;
+      base: string;
+      sm: string; // small
+      xs: string; // tiny
+
+      family: string;
+      numberFamily: string;
+      codeFamily: string;
+
+      lineHeight: string | number;
+    };
+    zIndex: {
+      modal: number;
+      popover: number;
+    };
+    shadow: {
+      modal: string;
+      popover: string;
+      tooltip: string;
+    };
+    space: {
+      paragraph: string;
+    };
+    radius: {
+      popover: string;
+    };
+  }
+
+  interface ThemeOptions {
+    colors: {
+      primaryColor: string;
+
+      pageBackground: string;
+      popoverBackground: string;
+      tooltipBackground: string;
+      hoverBackground: string;
+      innerHoverBackground: string;
+      codeBackground: string;
+      codeBlockBackground: string;
+      // Use for blockHub and slide bar background
+      hubBackground: string;
+      cardHoverBackground: string;
+      warningBackground: string;
+      errorBackground: string;
+      // Use for the page`s text
+      textColor: string;
+      secondaryTextColor: string;
+      // Use for the editor`s text, because in edgeless mode text is different form other
+      edgelessTextColor: string;
+      linkColor: string;
+      // In dark mode, normal text`s (not bold) color
+      linkColor2: string;
+      linkVisitedColor: string;
+      iconColor: string;
+      handleColor: string;
+      popoverColor: string;
+      inputColor: string;
+      tooltipColor: string;
+      codeColor: string;
+      quoteColor: string;
+      placeHolderColor: string;
+      selectedColor: string;
+      borderColor: string;
+      disableColor: string;
+      warningColor: string;
+      errorColor: string;
+      lineNumberColor: string;
+    };
+    font: {
+      title: string;
+      h1: string;
+      h2: string;
+      h3: string;
+      h4: string;
+      h5: string;
+      h6: string;
+      base: string;
+      sm: string; // small
+      xs: string; // tiny
+
+      family: string;
+      numberFamily: string;
+      codeFamily: string;
+
+      lineHeight: string | number;
+    };
+    shadow: {
+      modal: string;
+      popover: string;
+      tooltip: string;
+    };
+    space: {
+      paragraph: string;
+    };
+    radius: {
+      popover: string;
+    };
+  }
+}

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;
 

packages/component/src/ui/button/styles.ts

@@ -16,7 +16,7 @@ export const StyledIconButton = styled('button', {
       'hoverColor',
       'hoverStyle',
       'darker',
-    ].includes(prop);
+    ].includes(prop as string);
   },
 })<{
   width: number;
@@ -90,7 +90,7 @@ export const StyledTextButton = styled('button', {
       'hoverColor',
       'hoverStyle',
       'bold',
-    ].includes(prop);
+    ].includes(prop as string);
   },
 })<
   Pick<
@@ -153,7 +153,7 @@ export const StyledButton = styled('button', {
       'type',
       'bold',
       'noBorder',
-    ].includes(prop);
+    ].includes(prop as string);
   },
 })<
   Pick<

packages/component/src/ui/button/utils.ts

@@ -1,4 +1,5 @@
-import { AffineTheme } from '../../styles';
+import { Theme } from '@mui/material';
+
 import {
   ButtonProps,
   SIZE_DEFAULT,
@@ -38,7 +39,7 @@ export const getSize = (
 };
 
 export const getButtonColors = (
-  theme: AffineTheme,
+  theme: Theme,
   type: ButtonProps['type'],
   disabled: boolean,
   extend?: {

packages/component/src/ui/confirm/styles.ts

@@ -10,7 +10,7 @@ export const StyledModalWrapper = styled(ModalWrapper)(() => {
   };
 });
 
-export const StyledConfirmTitle = styled.div(({ theme }) => {
+export const StyledConfirmTitle = styled('div')(({ theme }) => {
   return {
     fontSize: theme.font.h6,
     fontWeight: 600,
@@ -20,7 +20,7 @@ export const StyledConfirmTitle = styled.div(({ theme }) => {
   };
 });
 
-export const StyledConfirmContent = styled.div(({ theme }) => {
+export const StyledConfirmContent = styled('div')(({ theme }) => {
   return {
     fontSize: theme.font.base,
     textAlign: 'center',
@@ -30,14 +30,14 @@ export const StyledConfirmContent = styled.div(({ theme }) => {
   };
 });
 
-export const StyledColumnButtonWrapper = styled.div(() => {
+export const StyledColumnButtonWrapper = styled('div')(() => {
   return {
     ...displayFlex('center', 'center'),
     flexDirection: 'column',
     marginTop: '32px',
   };
 });
-export const StyledRowButtonWrapper = styled.div(() => {
+export const StyledRowButtonWrapper = styled('div')(() => {
   return {
     ...displayFlex('center', 'center'),
     flexDirection: 'row',

packages/component/src/ui/empty/style.ts

@@ -1,6 +1,6 @@
 import { displayFlex, styled } from '../../styles';
 
-export const StyledEmptyContainer = styled.div(() => {
+export const StyledEmptyContainer = styled('div')(() => {
   return {
     height: '100%',
     ...displayFlex('center', 'center'),

packages/component/src/ui/layout/Content.tsx

@@ -27,7 +27,7 @@ export const Content = styled('div', {
       'width',
       'maxWidth',
       'align',
-    ].includes(prop);
+    ].includes(prop as string);
   },
 })<ContentProps>(
   ({

packages/component/src/ui/layout/Wrapper.tsx

@@ -45,7 +45,7 @@ export const Wrapper = styled('div', {
       'marginLeft',
       'marginRight',
       'marginBottom',
-    ].includes(prop);
+    ].includes(prop as string);
   },
 })<WrapperProps>(
   ({
@@ -90,7 +90,7 @@ export const FlexWrapper = styled(Wrapper, {
       'flexDirection',
       'flexShrink',
       'flexGrow',
-    ].includes(prop);
+    ].includes(prop as string);
   },
 })<FlexWrapperProps>(
   ({
@@ -116,7 +116,7 @@ export const FlexWrapper = styled(Wrapper, {
 // TODO: Complete me
 export const GridWrapper = styled(Wrapper, {
   shouldForwardProp: prop => {
-    return ![''].includes(prop);
+    return ![''].includes(prop as string);
   },
 })<WrapperProps>(() => {
   return {

packages/component/src/ui/menu/styles.ts

@@ -22,7 +22,7 @@ export const StyledArrow = styled(ArrowRightSmallIcon)({
   margin: 'auto',
 });
 
-export const StyledMenuItem = styled.button<{
+export const StyledMenuItem = styled('button')<{
   isDir?: boolean;
 }>(({ theme, isDir = false }) => {
   return {

packages/component/src/ui/modal/ModalWrapper.tsx

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 
 import { styled } from '../../styles';
 
-export const ModalWrapper = styled.div<{
+export const ModalWrapper = styled('div')<{
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
   minHeight?: CSSProperties['minHeight'];

packages/component/src/ui/modal/styles.ts

@@ -4,7 +4,7 @@ import { CSSProperties } from 'react';
 import { styled } from '../../styles';
 import { Wrapper } from '../layout';
 
-export const StyledBackdrop = styled.div(({ theme }) => {
+export const StyledBackdrop = styled('div')(({ theme }) => {
   return {
     zIndex: '-1',
     position: 'fixed',
@@ -13,7 +13,7 @@ export const StyledBackdrop = styled.div(({ theme }) => {
     top: '0',
     left: '0',
     backgroundColor:
-      theme.mode === 'light'
+      theme.palette.mode === 'light'
         ? 'rgba(58, 76, 92, 0.2)'
         : 'rgba(34, 34, 34, 0.6)',
   };
@@ -21,7 +21,7 @@ export const StyledBackdrop = styled.div(({ theme }) => {
 
 export const StyledModal = styled(ModalUnstyled, {
   shouldForwardProp: prop => {
-    return !['justifyContent', 'alignItems'].includes(prop);
+    return !['justifyContent', 'alignItems'].includes(prop as string);
   },
 })<{
   alignItems: CSSProperties['alignItems'];

packages/component/src/ui/table/styles.ts

@@ -1,7 +1,7 @@
 import { styled, textEllipsis } from '../../styles';
 import { TableCellProps } from './interface';
 
-export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
+export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
   ({ theme, tableLayout }) => {
     return {
       fontSize: theme.font.base,
@@ -14,13 +14,13 @@ export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
   }
 );
 
-export const StyledTableBody = styled.tbody(() => {
+export const StyledTableBody = styled('tbody')(() => {
   return {
     fontWeight: 400,
   };
 });
 
-export const StyledTableCell = styled.td<
+export const StyledTableCell = styled('td')<
   Pick<TableCellProps, 'ellipsis' | 'align' | 'proportion'>
 >(({ align = 'left', ellipsis = false, proportion }) => {
   const width = proportion ? `${proportion * 100}%` : 'auto';
@@ -37,7 +37,7 @@ export const StyledTableCell = styled.td<
   };
 });
 
-export const StyledTableHead = styled.thead(() => {
+export const StyledTableHead = styled('thead')(() => {
   return {
     fontWeight: 500,
     tr: {
@@ -50,7 +50,7 @@ export const StyledTableHead = styled.thead(() => {
   };
 });
 
-export const StyledTableRow = styled.tr(({ theme }) => {
+export const StyledTableRow = styled('tr')(({ theme }) => {
   return {
     td: {
       transition: 'background .15s',