feat: modify styles

packages/app/src/components/Header/styles.ts

@@ -13,7 +13,7 @@ export const StyledHeader = styled('div')({
   zIndex: '10',
 });
 
-export const StyledTitle = styled('div')({
+export const StyledTitle = styled('div')(({ theme }) => ({
   width: '720px',
   height: '100%',
   position: 'absolute',
@@ -23,8 +23,8 @@ export const StyledTitle = styled('div')({
   margin: 'auto',
 
   ...displayFlex('center', 'center'),
-  fontSize: '20px',
+  fontSize: theme.font.base,
-});
+}));
 
 export const StyledTitleWrapper = styled('div')({
   maxWidth: '720px',

packages/app/src/components/contact-modal/index.tsx

@@ -25,7 +25,7 @@ import {
   StyledLogo,
   StyledModalHeader,
   StyledModalHeaderLeft,
-  CloseButton,
+  StyledCloseButton,
   StyledModalFooter,
 } from './style';
 
@@ -87,13 +87,13 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
               <StyledLogo src={logo.src} alt="" />
               <span>Alpha</span>
             </StyledModalHeaderLeft>
-            <CloseButton
+            <StyledCloseButton
               onClick={() => {
                 onClose();
               }}
             >
               <CloseIcon width={12} height={12} />
-            </CloseButton>
+            </StyledCloseButton>
           </StyledModalHeader>
 
           <StyledContent>

packages/app/src/components/contact-modal/style.ts

@@ -1,5 +1,7 @@
 import { absoluteCenter, displayFlex, styled } from '@/styles';
 import bg from './bg.png';
+import CloseIcon from '@mui/icons-material/Close';
+
 export const StyledModalContainer = styled('div')(({ theme }) => {
   return {
     width: '100vw',
@@ -175,20 +177,36 @@ export const StyledModalHeaderLeft = styled('div')(({ theme }) => {
   };
 });
 
-export const CloseButton = styled('div')(({ theme }) => {
+export const StyledCloseButton = styled('div')(({ theme }) => {
   return {
-    width: '30px',
+    width: '60px',
-    height: '30px',
+    height: '60px',
-    borderRadius: '6px',
     color: theme.colors.iconColor,
     cursor: 'pointer',
     ...displayFlex('center', 'center'),
+    position: 'absolute',
+    right: '0',
+    top: '0',
+
+    // TODO: we need to add @emotion/babel-plugin
+    '::after': {
+      content: '""',
+      width: '30px',
+      height: '30px',
+      borderRadius: '6px',
+      ...absoluteCenter({ horizontal: true, vertical: true }),
+    },
     ':hover': {
-      background: theme.colors.hoverBackground,
+      color: theme.colors.primaryColor,
+      '::after': {
+        background: theme.colors.hoverBackground,
+      },
     },
     svg: {
       width: '20px',
       height: '20px',
+      position: 'relative',
+      zIndex: 1,
     },
   };
 });

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -28,32 +28,32 @@ const toolbarList1 = [
   {
     flavor: 'text',
     icon: <TextIcon />,
-    toolTip: 'Text(coming soon)',
+    toolTip: 'Text (coming soon)',
     disable: true,
   },
   {
     flavor: 'shape',
     icon: <ShapeIcon />,
-    toolTip: 'Shape(coming soon)',
+    toolTip: 'Shape (coming soon)',
     disable: true,
   },
   {
     flavor: 'sticky',
     icon: <StickerIcon />,
-    toolTip: 'Sticky(coming soon)',
+    toolTip: 'Sticky (coming soon)',
     disable: true,
   },
   {
     flavor: 'pen',
     icon: <PenIcon />,
-    toolTip: 'Pen(coming soon)',
+    toolTip: 'Pen (coming soon)',
     disable: true,
   },
 
   {
     flavor: 'connector',
     icon: <ConnectorIcon />,
-    toolTip: 'Connector(coming soon)',
+    toolTip: 'Connector (coming soon)',
     disable: true,
   },
 ];
@@ -88,7 +88,7 @@ const UndoRedo = () => {
 
   return (
     <StyledToolbarWrapper>
-      <Tooltip content="undo" placement="right-start">
+      <Tooltip content="Undo" placement="right-start">
         <StyledToolbarItem
           disable={!canUndo}
           onClick={() => {
@@ -98,7 +98,7 @@ const UndoRedo = () => {
           <UndoIcon />
         </StyledToolbarItem>
       </Tooltip>
-      <Tooltip content="redo" placement="right-start">
+      <Tooltip content="Redo" placement="right-start">
         <StyledToolbarItem
           disable={!canRedo}
           onClick={() => {

packages/app/src/components/edgeless-toolbar/style.ts

@@ -1,4 +1,4 @@
-import { styled, displayFlex, fixedCenter } from '@/styles';
+import { styled, displayFlex } from '@/styles';
 
 export const StyledEdgelessToolbar = styled.div(({ theme }) => ({
   height: '320px',
@@ -26,7 +26,7 @@ export const StyledToolbarItem = styled.div<{
   width: '36px',
   height: '36px',
   ...displayFlex('center', 'center'),
-  color: disable ? '#C0C0C0' : theme.colors.iconColor,
+  color: disable ? theme.colors.disableColor : theme.colors.iconColor,
   cursor: 'pointer',
   svg: {
     width: '36px',

packages/app/src/components/editor-mode-switch/index.tsx

@@ -38,20 +38,25 @@ const EdgelessItem = ({ active }: { active?: boolean }) => {
 const AnimateRadioItem = ({
   active,
   status,
-  icon,
+  icon: propsIcon,
   label,
   isLeft,
   ...props
 }: AnimateRadioItemProps) => {
+  const icon = (
+    <StyledIcon shrink={status === 'shrink'} isLeft={isLeft}>
+      {cloneElement(propsIcon, {
+        active,
+      })}
+    </StyledIcon>
+  );
   return (
     <StyledRadioItem active={active} status={status} {...props}>
-      <StyledIcon shrink={status === 'shrink'} isLeft={isLeft}>
+      {isLeft ? icon : null}
-        {cloneElement(icon, {
+      <StyledLabel shrink={status !== 'stretch'} isLeft={isLeft}>
-          active,
+        {label}
-        })}
+      </StyledLabel>
-      </StyledIcon>
+      {isLeft ? null : icon}
-
-      <StyledLabel shrink={status !== 'stretch'}>{label}</StyledLabel>
     </StyledRadioItem>
   );
 };

packages/app/src/components/editor-mode-switch/style.ts

@@ -99,12 +99,23 @@ export const StyledRadioItem = styled('div')<{
 
 export const StyledLabel = styled('div')<{
   shrink: boolean;
-}>(({ shrink }) => {
+  isLeft: boolean;
+}>(({ shrink, isLeft }) => {
   const animateScaleStretch = keyframes`${toString(
-    spring({ scale: 0 }, { scale: 1 }, { preset: 'gentle' })
+    spring(
+      { width: '0px' },
+      { width: isLeft ? '65px' : '75px' },
+      { preset: 'gentle' }
+    )
   )}`;
   const animateScaleShrink = keyframes(
-    `${toString(spring({ scale: 1 }, { scale: 0 }, { preset: 'gentle' }))}`
+    `${toString(
+      spring(
+        { width: isLeft ? '65px' : '75px' },
+        { width: '0px' },
+        { preset: 'gentle' }
+      )
+    )}`
   );
   const shrinkStyle = shrink
     ? {
@@ -117,10 +128,12 @@ export const StyledLabel = styled('div')<{
   return {
     display: 'flex',
     alignItems: 'center',
+    justifyContent: isLeft ? 'flex-start' : 'flex-end',
     fontSize: '16px',
     flexShrink: '0',
     transition: `transform ${ANIMATE_DURATION}ms`,
     fontWeight: 'normal',
+    overflow: 'hidden',
     ...shrinkStyle,
   };
 });

packages/app/src/components/shortcuts-modal/style.ts

@@ -6,6 +6,7 @@ export const StyledShortcutsModal = styled.div(({ theme }) => ({
   paddingBottom: '28px',
   backgroundColor: theme.colors.popoverBackground,
   boxShadow: theme.shadow.popover,
+  borderRadius: `${theme.radius.popover} 0 ${theme.radius.popover} ${theme.radius.popover}`,
   color: theme.colors.popoverColor,
   overflow: 'auto',
   boxRadius: '10px',
@@ -71,6 +72,7 @@ export const CloseButton = styled('div')(({ theme }) => {
     },
     ':hover': {
       background: theme.colors.hoverBackground,
+      color: theme.colors.primaryColor,
     },
   };
 });

packages/app/src/pages/_app.tsx

@@ -17,13 +17,13 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
       <Logger />
-      <ThemeProvider>
+      <EditorProvider>
-        <ModalProvider>
+        <ThemeProvider>
-          <EditorProvider>
+          <ModalProvider>
             <Component {...pageProps} />
-          </EditorProvider>
+          </ModalProvider>
-        </ModalProvider>
+        </ThemeProvider>
-      </ThemeProvider>
+      </EditorProvider>
     </>
   );
 }

packages/app/src/styles/index.ts

@@ -2,6 +2,6 @@ export type { ThemeMode, ThemeProviderProps, AffineTheme } from './types';
 
 export * from './styled';
 export { ThemeProvider } from './themeProvider';
-export { lightTheme, darkTheme } from './theme';
+export * from './theme';
 export { useTheme } from './hooks';
 export * from './helper';

packages/app/src/styles/theme.ts

@@ -1,90 +1,108 @@
 import '@emotion/react';
 import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
+import { EditorContainer } from '@blocksuite/editor';
 
 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';
 
-export const lightTheme: AffineTheme = {
+export const getLightTheme = (
-  mode: 'light',
+  editorMode: EditorContainer['mode']
-  colors: {
+): AffineTheme => {
-    primaryColor: '#6880FF',
+  return {
+    mode: 'light',
+    editorMode,
+    colors: {
+      primaryColor: '#6880FF',
 
-    pageBackground: '#fff',
+      pageBackground: '#fff',
-    hoverBackground: '#F1F3FF',
+      hoverBackground: '#F1F3FF',
-    popoverBackground: '#fff',
+      popoverBackground: '#fff',
-    codeBackground: '#f2f5f9',
+      codeBackground: '#f2f5f9',
 
-    textColor: '#3A4C5C',
+      textColor: '#3A4C5C',
-    edgelessTextColor: '#3A4C5C',
+      edgelessTextColor: '#3A4C5C',
-    iconColor: '#9096A5',
+      iconColor: '#9096A5',
-    linkColor: '#6880FF',
+      linkColor: '#6880FF',
-    linkColor2: '#6880FF',
+      linkColor2: '#6880FF',
-    linkVisitedColor: '#ABB8FE',
+      linkVisitedColor: '#ABB8FE',
-    popoverColor: '#4C6275',
+      popoverColor: '#4C6275',
-    codeColor: '#517ea6',
+      codeColor: '#517ea6',
-    quoteColor: '#4C6275',
+      quoteColor: '#4C6275',
-    placeHolderColor: '#C7C7C7',
+      placeHolderColor: '#C7C7C7',
-    selectedColor: 'rgba(104, 128, 255, 0.1)',
+      selectedColor: 'rgba(104, 128, 255, 0.1)',
-    borderColor: '#D0D7E3',
+      borderColor: '#D0D7E3',
-  },
+      disableColor: '#C0C0C0',
-  font: {
+    },
-    xs: '12px',
+    font: {
-    sm: '16px',
+      xs: '12px',
-    base: '18px',
+      sm: '16px',
-    family: `Avenir Next, ${basicFontFamily}`,
+      base: '18px',
-    family2: `Space Mono, ${basicFontFamily}`,
+      family: `Avenir Next, ${basicFontFamily}`,
-    lineHeightBase: '26px',
+      family2: `Space Mono, ${basicFontFamily}`,
-  },
+      lineHeightBase: '26px',
-  zIndex: {
+    },
-    modal: 1000,
+    zIndex: {
-    popover: 100,
+      modal: 1000,
-  },
+      popover: 100,
-  shadow: {
+    },
-    popover:
+    shadow: {
-      '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);',
+      popover:
-    modal:
+        '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);',
-      '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);',
+      modal:
-    tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
+        '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);',
-  },
+      tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
-  space: {
+    },
-    paragraph: '8px',
+    space: {
-  },
+      paragraph: '8px',
-  radius: {
+    },
-    popover: '10px',
+    radius: {
-  },
+      popover: '10px',
+    },
+  };
 };
 
-export const darkTheme: AffineTheme = {
+export const getDarkTheme = (
-  ...lightTheme,
+  editorMode: EditorContainer['mode']
-  mode: 'dark',
+): AffineTheme => {
-  colors: {
+  const lightTheme = getLightTheme(editorMode);
-    primaryColor: '#6880FF',
 
-    pageBackground: '#2c2c2c',
+  return {
-    hoverBackground: '#3C3C42',
+    ...lightTheme,
-    popoverBackground: '#1F2021',
+    mode: 'dark',
-    codeBackground: '#505662',
+    colors: {
+      primaryColor: '#6880FF',
 
-    textColor: '#fff',
+      pageBackground: '#2c2c2c',
-    edgelessTextColor: '#3A4C5C',
+      hoverBackground: '#3C3C42',
-    iconColor: '#9096A5',
+      popoverBackground: '#1F2021',
-    linkColor: '#7D91FF',
+      codeBackground:
-    linkColor2: '#6880FF',
+        editorMode === 'edgeless'
-    linkVisitedColor: '#505FAB',
+          ? lightTheme.colors.codeBackground
-    popoverColor: '#C6CBD9',
+          : '#505662',
-    codeColor: '#BDDBFD',
+
-    quoteColor: '#C6CBD9',
+      textColor: '#fff',
-    placeHolderColor: '#C7C7C7',
+      edgelessTextColor: '#3A4C5C',
-    selectedColor: 'rgba(240, 242, 255, 0.8)',
+      iconColor: '#9096A5',
-    borderColor: '#4D4C53',
+      linkColor: '#7D91FF',
-  },
+      linkColor2: '#6880FF',
-  shadow: {
+      linkVisitedColor: '#505FAB',
-    popover:
+      popoverColor: '#C6CBD9',
-      '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
+      codeColor:
-    modal:
+        editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD',
-      '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
+      quoteColor: '#C6CBD9',
-    tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
+      placeHolderColor: '#C7C7C7',
-  },
+      selectedColor: 'rgba(104, 128, 255, 0.1)',
+      borderColor: '#4D4C53',
+      disableColor: '#4b4b4b',
+    },
+    shadow: {
+      popover:
+        '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
+      modal:
+        '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
+      tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
+    },
+  };
 };
 
 export const globalThemeVariables: (
@@ -92,6 +110,9 @@ export const globalThemeVariables: (
   theme: AffineTheme
 ) => AffineThemeCSSVariables = (mode, theme) => {
   return {
+    '--affine-theme-mode': theme.mode,
+    '--affine-editor-mode': theme.editorMode,
+
     '--affine-primary-color': theme.colors.primaryColor,
 
     '--affine-page-background': theme.colors.pageBackground,
@@ -112,6 +133,7 @@ export const globalThemeVariables: (
     '--affine-selected-color': theme.colors.selectedColor,
     '--affine-placeholder-color': theme.colors.placeHolderColor,
     '--affine-border-color': theme.colors.borderColor,
+    '--affine-disable-color': theme.colors.disableColor,
 
     '--affine-modal-shadow': theme.shadow.modal,
     '--affine-popover-shadow': theme.shadow.popover,

packages/app/src/styles/themeProvider.tsx

@@ -11,13 +11,14 @@ import {
   ThemeProviderProps,
   ThemeProviderValue,
 } from './types';
-import { lightTheme, darkTheme, globalThemeVariables } from './theme';
+import { getLightTheme, getDarkTheme, globalThemeVariables } from './theme';
 import { SystemThemeHelper, localStorageThemeHelper } from './utils';
+import { useEditor } from '@/components/editor-provider';
 
 export const ThemeContext = createContext<ThemeProviderValue>({
   mode: 'light',
   changeMode: () => {},
-  theme: lightTheme,
+  theme: getLightTheme('page'),
 });
 
 export const ThemeProvider = ({
@@ -26,8 +27,9 @@ export const ThemeProvider = ({
 }: PropsWithChildren<ThemeProviderProps>) => {
   const [theme, setTheme] = useState<Theme>(defaultTheme);
   const [mode, setMode] = useState<ThemeMode>('auto');
-
+  const { mode: editorMode } = useEditor();
-  const themeStyle = theme === 'light' ? lightTheme : darkTheme;
+  const themeStyle =
+    theme === 'light' ? getLightTheme(editorMode) : getDarkTheme(editorMode);
   const changeMode = (themeMode: ThemeMode) => {
     themeMode !== mode && setMode(themeMode);
     // Remember the theme mode which user selected for next time

packages/app/src/styles/types.ts

@@ -1,3 +1,5 @@
+import { EditorContainer } from '@blocksuite/editor';
+
 export type Theme = 'light' | 'dark';
 export type ThemeMode = Theme | 'auto';
 
@@ -13,6 +15,7 @@ export type ThemeProviderValue = {
 
 export interface AffineTheme {
   mode: Theme;
+  editorMode: EditorContainer['mode'];
   colors: {
     primaryColor: string;
 
@@ -36,6 +39,7 @@ export interface AffineTheme {
     placeHolderColor: string;
     selectedColor: string;
     borderColor: string;
+    disableColor: string;
   };
   font: {
     xs: string; // tiny
@@ -65,6 +69,9 @@ export interface AffineTheme {
 }
 
 export interface AffineThemeCSSVariables {
+  '--affine-theme-mode': Theme;
+  '--affine-editor-mode': EditorContainer['mode'];
+
   '--affine-primary-color': AffineTheme['colors']['primaryColor'];
   '--affine-page-background': AffineTheme['colors']['pageBackground'];
   '--affine-popover-background': AffineTheme['colors']['popoverBackground'];
@@ -84,6 +91,7 @@ export interface AffineThemeCSSVariables {
   '--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];
   '--affine-selected-color': AffineTheme['colors']['selectedColor'];
   '--affine-border-color': AffineTheme['colors']['borderColor'];
+  '--affine-disable-color': AffineTheme['colors']['disableColor'];
 
   '--affine-modal-shadow': AffineTheme['shadow']['modal'];
   '--affine-popover-shadow': AffineTheme['shadow']['popover'];

packages/app/src/ui/popover/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import Grow from '@mui/material/Grow';
+import ClickAwayListener from '@mui/base/ClickAwayListener';
 
 import { styled } from '@/styles';
 
@@ -41,24 +42,24 @@ export const Popover = ({
 }: PropsWithChildren<PopoverProps>) => {
   const [show, setShow] = useState(false);
   return (
-    <StyledPopoverContainer
+    <ClickAwayListener
-      onClick={() => {
+      onClickAway={() => {
-        setShow(!show);
-      }}
-      onMouseEnter={() => {
-        setShow(true);
-      }}
-      onMouseLeave={() => {
         setShow(false);
       }}
-      style={style}
     >
-      {children}
+      <StyledPopoverContainer
-      <Grow in={show}>
+        onClick={() => {
-        <StyledPopoverWrapper>
+          setShow(!show);
-          <StyledPopover>{popoverContent}</StyledPopover>
+        }}
-        </StyledPopoverWrapper>
+        style={style}
-      </Grow>
+      >
-    </StyledPopoverContainer>
+        {children}
+        <Grow in={show}>
+          <StyledPopoverWrapper>
+            <StyledPopover>{popoverContent}</StyledPopover>
+          </StyledPopoverWrapper>
+        </Grow>
+      </StyledPopoverContainer>
+    </ClickAwayListener>
   );
 };