refactor: unify theme (#1303)

apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx

@@ -14,14 +14,17 @@ import {
   PaperIcon,
 } from '@blocksuite/icons';
 import { PageMeta } from '@blocksuite/store';
-import { useMediaQuery, useTheme as useMuiTheme } from '@mui/material';
+import {
+  useMediaQuery,
+  useTheme as useMuiTheme,
+  useTheme,
+} from '@mui/material';
 import React, { useMemo } from 'react';
 
 import {
   usePageMeta,
   usePageMetaHelper,
 } from '../../../../hooks/use-page-meta';
-import { useTheme } from '../../../../providers/ThemeProvider';
 import { BlockSuiteWorkspace } from '../../../../shared';
 import DateCell from './DateCell';
 import Empty from './Empty';
@@ -41,7 +44,7 @@ const FavoriteTag: React.FC<FavoriteTagProps> = ({
   pageMeta: { favorite },
   onClick,
 }) => {
-  const { theme } = useTheme();
+  const theme = useTheme();
   const { t } = useTranslation();
   return (
     <Tooltip

apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts

@@ -1,14 +1,14 @@
 import { displayFlex, styled } from '@affine/component';
 import { TableRow } from '@affine/component';
 
-export const StyledTableContainer = styled.div(() => {
+export const StyledTableContainer = styled('div')(() => {
   return {
     height: 'calc(100vh - 60px)',
     padding: '78px 72px',
     overflowY: 'auto',
   };
 });
-export const StyledTitleWrapper = styled.div(({ theme }) => {
+export const StyledTitleWrapper = styled('div')(({ theme }) => {
   return {
     ...displayFlex('flex-start', 'center'),
     a: {
@@ -22,7 +22,7 @@ export const StyledTitleWrapper = styled.div(({ theme }) => {
     },
   };
 });
-export const StyledTitleLink = styled.div(({ theme }) => {
+export const StyledTitleLink = styled('div')(({ theme }) => {
   return {
     maxWidth: '80%',
     marginRight: '18px',

apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from '@affine/i18n';
 import { assertExists } from '@blocksuite/store';
+import { useTheme } from '@mui/material';
 import React, { cloneElement, CSSProperties, useEffect, useState } from 'react';
 
 import {
@@ -7,7 +8,6 @@ import {
   usePageMetaHelper,
 } from '../../../../hooks/use-page-meta';
 // todo(himself65): remove `useTheme` hook
-import { useTheme } from '../../../../providers/ThemeProvider';
 import { BlockSuiteWorkspace } from '../../../../shared';
 import { EdgelessIcon, PaperIcon } from './Icons';
 import {
@@ -20,9 +20,7 @@ import {
 import type { AnimateRadioItemProps, RadioItemStatus } from './type';
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {
-    theme: {
-      colors: { iconColor, primaryColor },
-    },
+    colors: { iconColor, primaryColor },
   } = useTheme();
 
   return <PaperIcon style={{ color: active ? primaryColor : iconColor }} />;
@@ -30,9 +28,7 @@ const PaperItem = ({ active }: { active?: boolean }) => {
 
 const EdgelessItem = ({ active }: { active?: boolean }) => {
   const {
-    theme: {
-      colors: { iconColor, primaryColor },
-    },
+    colors: { iconColor, primaryColor },
   } = useTheme();
 
   return <EdgelessIcon style={{ color: active ? primaryColor : iconColor }} />;
@@ -78,7 +74,7 @@ export const EditorModeSwitch: React.FC<EditorModeSwitchProps> = ({
   blockSuiteWorkspace,
   pageId,
 }) => {
-  const { mode: themeMode } = useTheme();
+  const theme = useTheme();
   const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
   const pageMeta = usePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
@@ -139,7 +135,10 @@ export const EditorModeSwitch: React.FC<EditorModeSwitchProps> = ({
           setRadioItemStatus(modifyRadioItemStatus());
         }}
       />
-      <StyledMiddleLine hidden={!isHover} dark={themeMode === 'dark'} />
+      <StyledMiddleLine
+        hidden={!isHover}
+        dark={theme.palette.mode === 'dark'}
+      />
       <AnimateRadioItem
         isLeft={false}
         label={t('Edgeless')}

apps/web/src/components/blocksuite/header/editor-mode-switch/style.ts

@@ -1,7 +1,8 @@
-import { displayFlex, keyframes, styled } from '@affine/component';
+import { css, displayFlex, keyframes, styled } from '@affine/component';
 // @ts-ignore
 import spring, { toString } from 'css-spring';
 
+// @ts-ignore
 import type { ItemStatus } from './type';
 
 const ANIMATE_DURATION = 500;
@@ -10,37 +11,48 @@ export const StyledAnimateRadioContainer = styled('div')<{
   shrink: boolean;
   disabled: boolean;
 }>(({ shrink, theme, disabled }) => {
-  const animateScaleStretch = keyframes`${toString(
+  const animateScaleStretch = toString(
     spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
-  )}`;
-  const animateScaleShrink = keyframes(
-    `${toString(
-      spring({ width: '160px' }, { width: '36px' }, { preset: 'gentle' })
-    )}`
   );
-  const shrinkStyle = shrink
+  const animateScaleShrink = toString(
+    spring({ width: '160px' }, { width: '36px' }, { preset: 'gentle' })
+  );
+  const shrinkStyle: any = shrink
     ? {
-        animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
+        animation: css`
+          ${keyframes`${animateScaleShrink}`} ${ANIMATE_DURATION}ms forwards
+        `,
         background: 'transparent',
       }
     : {
-        animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
+        animation: css`
+          ${keyframes`${animateScaleStretch}`} ${ANIMATE_DURATION}ms forwards
+        `,
       };
+  return css`
+    height: 36px;
+    border-radius: 18px;
+    background: ${disabled ? 'transparent' : theme.colors.hoverBackground}
+    position: relative;
+    display: flex;
+    transition: background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms;
+    border: 1px solid transparent;
+    ${
+      disabled
+        ? css`
+            pointer-events: none;
+          `
+        : css`
+            animation: ${shrinkStyle.animation};
+            background: ${shrinkStyle.background};
+          `
+    }
 
-  return {
-    height: '36px',
-    borderRadius: '18px',
-    background: disabled ? 'transparent' : theme.colors.hoverBackground,
-    position: 'relative',
-    display: 'flex',
-    transition: `background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms`,
-    border: '1px solid transparent',
-
-    ...(disabled ? { pointerEvents: 'none' } : shrinkStyle),
-    ':hover': {
-      border: disabled ? '' : `1px solid ${theme.colors.primaryColor}`,
-    },
-  };
+    //...(disabled ? { pointerEvents: 'none' } : shrinkStyle),
+    :hover {
+      border: ${disabled ? '' : `1px solid ${theme.colors.primaryColor}`}
+    }
+  `;
 });
 
 export const StyledMiddleLine = styled('div')<{
@@ -62,83 +74,94 @@ export const StyledRadioItem = styled('div')<{
   status: ItemStatus;
   active: boolean;
 }>(({ status, active, theme }) => {
-  const animateScaleStretch = keyframes`${toString(
+  const animateScaleStretch = toString(
     spring({ width: '44px' }, { width: '112px' })
-  )}`;
-  const animateScaleOrigin = keyframes(
-    `${toString(spring({ width: '112px' }, { width: '44px' }))}`
   );
-  const animateScaleShrink = keyframes(
-    `${toString(spring({ width: '0px' }, { width: '36px' }))}`
+  const animateScaleOrigin = toString(
+    spring({ width: '112px' }, { width: '44px' })
+  );
+  const animateScaleShrink = toString(
+    spring({ width: '0px' }, { width: '36px' })
   );
   const dynamicStyle =
     status === 'stretch'
       ? {
-          animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
+          animation: css`
+            ${keyframes`${animateScaleStretch}`} ${ANIMATE_DURATION}ms forwards
+          `,
           flexShrink: '0',
         }
       : status === 'shrink'
       ? {
-          animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
+          animation: css`
+            ${keyframes`${animateScaleShrink}`} ${ANIMATE_DURATION}ms forwards
+          `,
         }
       : status === 'normal'
-      ? { animation: `${animateScaleOrigin} ${ANIMATE_DURATION}ms forwards` }
+      ? {
+          animation: css`
+            ${keyframes`${animateScaleOrigin}`} ${ANIMATE_DURATION}ms forwards
+          `,
+        }
       : {};
 
   const {
     colors: { iconColor, primaryColor },
   } = theme;
-  return {
-    width: '0',
-    height: '100%',
-    display: 'flex',
-    cursor: 'pointer',
-    overflow: 'hidden',
-    color: active ? primaryColor : iconColor,
-    ...dynamicStyle,
-  };
+  return css`
+    width: 0;
+    height: 100%;
+    display: flex;
+    cursor: pointer;
+    overflow: hidden;
+    color: ${active ? primaryColor : iconColor};
+    animation: ${dynamicStyle.animation};
+    flex-shrink: ${dynamicStyle.flexShrink};
+  `;
 });
 
 export const StyledLabel = styled('div')<{
   shrink: boolean;
   isLeft: boolean;
 }>(({ shrink, isLeft }) => {
-  const animateScaleStretch = keyframes`${toString(
+  const animateScaleStretch = toString(
     spring(
       { width: '0px' },
       { width: isLeft ? '65px' : '75px' },
       { preset: 'gentle' }
     )
-  )}`;
-  const animateScaleShrink = keyframes(
-    `${toString(
-      spring(
-        { width: isLeft ? '65px' : '75px' },
-        { width: '0px' },
-        { preset: 'gentle' }
-      )
-    )}`
+  );
+  const animateScaleShrink = toString(
+    spring(
+      { width: isLeft ? '65px' : '75px' },
+      { width: '0px' },
+      { preset: 'gentle' }
+    )
   );
   const shrinkStyle = shrink
     ? {
-        animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
+        animation: css`
+          ${keyframes`${animateScaleShrink}`} ${ANIMATE_DURATION}ms forwards
+        `,
       }
     : {
-        animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
+        animation: css`
+          ${keyframes`${animateScaleStretch}`} ${ANIMATE_DURATION}ms forwards
+        `,
       };
 
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: isLeft ? 'flex-start' : 'flex-end',
-    fontSize: '16px',
-    flexShrink: '0',
-    transition: `transform ${ANIMATE_DURATION}ms`,
-    fontWeight: 'normal',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    ...shrinkStyle,
-  };
+  return css`
+    display: flex;
+    align-items: center;
+    justify-content: ${isLeft ? 'flex-start' : 'flex-end'};
+    font-size: 16px;
+    flex-shrink: 0;
+    transition: transform ${ANIMATE_DURATION}ms;
+    font-weight: normal;
+    overflow: hidden;
+    white-space: nowrap;
+    animation: ${shrinkStyle.animation};
+  `;
 });
 
 export const StyledIcon = styled('div')<{

apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx

@@ -33,7 +33,7 @@ const NoNetWorkIcon = () => {
     </svg>
   );
 };
-const IconWrapper = styled.div(() => {
+const IconWrapper = styled('div')(() => {
   return {
     width: '32px',
     height: '32px',

apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/index.tsx

@@ -1,10 +1,10 @@
+import { useTheme } from 'next-themes';
 import { useState } from 'react';
 
-import { useTheme } from '../../../../../providers/ThemeProvider';
 import { MoonIcon, SunIcon } from './Icons';
 import { StyledSwitchItem, StyledThemeModeSwitch } from './style';
 export const ThemeModeSwitch = () => {
-  const { mode, changeMode } = useTheme();
+  const { theme, setTheme } = useTheme();
   const [isHover, setIsHover] = useState(false);
   const [firstTrigger, setFirstTrigger] = useState(false);
   return (
@@ -22,22 +22,22 @@ export const ThemeModeSwitch = () => {
     >
       <StyledSwitchItem
         data-testid="change-theme-light"
-        active={mode === 'light'}
+        active={theme === 'light'}
         isHover={isHover}
         firstTrigger={firstTrigger}
         onClick={() => {
-          changeMode('light');
+          setTheme('light');
         }}
       >
         <SunIcon />
       </StyledSwitchItem>
       <StyledSwitchItem
         data-testid="change-theme-dark"
-        active={mode === 'dark'}
+        active={theme === 'dark'}
         isHover={isHover}
         firstTrigger={firstTrigger}
         onClick={() => {
-          changeMode('dark');
+          setTheme('dark');
         }}
       >
         <MoonIcon />

apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/style.ts

@@ -1,7 +1,6 @@
-import { displayFlex, keyframes, styled } from '@affine/component';
+import { css, displayFlex, keyframes, styled } from '@affine/component';
 // @ts-ignore
 import spring, { toString } from 'css-spring';
-import { CSSProperties } from 'react';
 
 const ANIMATE_DURATION = 400;
 
@@ -18,52 +17,60 @@ export const StyledSwitchItem = styled('div')<{
   isHover: boolean;
   firstTrigger: boolean;
 }>(({ active, isHover, firstTrigger, theme }) => {
-  const activeRaiseAnimate = keyframes`${toString(
+  const activeRaiseAnimate = toString(
     spring({ top: '0' }, { top: '-100%' }, { preset: 'gentle' })
-  )}`;
-  const raiseAnimate = keyframes`${toString(
+  );
+  const raiseAnimate = toString(
     spring({ top: '100%' }, { top: '0' }, { preset: 'gentle' })
-  )}`;
-  const activeDeclineAnimate = keyframes`${toString(
+  );
+  const activeDeclineAnimate = toString(
     spring({ top: '-100%' }, { top: '0' }, { preset: 'gentle' })
-  )}`;
-  const declineAnimate = keyframes`${toString(
+  );
+  const declineAnimate = toString(
     spring({ top: '0' }, { top: '100%' }, { preset: 'gentle' })
-  )}`;
+  );
+
   const activeStyle = active
     ? {
         color: theme.colors.iconColor,
         top: '0',
         animation: firstTrigger
-          ? `${
-              isHover ? activeRaiseAnimate : activeDeclineAnimate
-            } ${ANIMATE_DURATION}ms forwards`
+          ? css`
+              ${keyframes`${
+                isHover ? activeRaiseAnimate : activeDeclineAnimate
+              }`} ${ANIMATE_DURATION}ms forwards
+            `
           : 'unset',
         animationDirection: isHover ? 'normal' : 'alternate',
       }
-    : ({
+    : {
         top: '100%',
         color: theme.colors.primaryColor,
         backgroundColor: theme.colors.hoverBackground,
         animation: firstTrigger
-          ? `${
-              isHover ? raiseAnimate : declineAnimate
-            } ${ANIMATE_DURATION}ms forwards`
+          ? css`
+              ${keyframes`${
+                isHover ? raiseAnimate : declineAnimate
+              }`} ${ANIMATE_DURATION}ms forwards
+            `
           : 'unset',
         animationDirection: isHover ? 'normal' : 'alternate',
-      } as CSSProperties);
-
-  return {
-    width: '32px',
-    height: '32px',
-    position: 'absolute',
-    left: '0',
-    ...displayFlex('center', 'center'),
-    cursor: 'pointer',
-    ...activeStyle,
-    svg: {
-      width: '24px',
-      height: '24px',
+      };
+  return css`
+    ${css(displayFlex('center', 'center'))}
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    left: 0;
+    cursor: pointer;
+    color: ${activeStyle.color}
+    top: ${activeStyle.top};
+    background-color: ${activeStyle.backgroundColor};
+    animation: ${activeStyle.animation};
+    animation-direction: ${activeStyle.animationDirection};
+    svg {
+      width: 24px;
+      height: 24px;
     },
-  };
+  `;
 });

apps/web/src/components/blocksuite/header/styles.ts

@@ -1,6 +1,6 @@
 import { displayFlex, styled } from '@affine/component';
 
-export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
+export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
   ({ hasWarning }) => {
     return {
       height: hasWarning ? '96px' : '60px',
@@ -8,16 +8,18 @@ export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
     };
   }
 );
-export const StyledHeader = styled.div<{ hasWarning: boolean }>(({ theme }) => {
-  return {
-    height: '60px',
-    width: '100%',
-    ...displayFlex('flex-end', 'center'),
-    background: theme.colors.pageBackground,
-    transition: 'background-color 0.5s',
-    zIndex: 99,
-  };
-});
+export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
+  ({ theme }) => {
+    return {
+      height: '60px',
+      width: '100%',
+      ...displayFlex('flex-end', 'center'),
+      background: theme.colors.pageBackground,
+      transition: 'background-color 0.5s',
+      zIndex: 99,
+    };
+  }
+);
 
 export const StyledTitle = styled('div')(({ theme }) => ({
   width: '720px',
@@ -45,7 +47,7 @@ export const StyledHeaderRightSide = styled('div')({
   },
 });
 
-export const StyledBrowserWarning = styled.div<{ show: boolean }>(
+export const StyledBrowserWarning = styled('div')<{ show: boolean }>(
   ({ theme, show }) => {
     return {
       backgroundColor: theme.colors.warningBackground,
@@ -63,7 +65,7 @@ export const StyledBrowserWarning = styled.div<{ show: boolean }>(
   }
 );
 
-export const StyledCloseButton = styled.div(({ theme }) => {
+export const StyledCloseButton = styled('div')(({ theme }) => {
   return {
     width: '36px',
     height: '36px',
@@ -83,7 +85,7 @@ export const StyledCloseButton = styled.div(({ theme }) => {
   };
 });
 
-export const StyledSwitchWrapper = styled.div(() => {
+export const StyledSwitchWrapper = styled('div')(() => {
   return {
     position: 'absolute',
     right: '100%',
@@ -94,7 +96,7 @@ export const StyledSwitchWrapper = styled.div(() => {
   };
 });
 
-export const StyledSearchArrowWrapper = styled.div(() => {
+export const StyledSearchArrowWrapper = styled('div')(() => {
   return {
     position: 'absolute',
     left: 'calc(100% + 4px)',