From 52e2f3854f791313689455a8b40965e1b4878649 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 25 Oct 2022 16:26:31 +0800 Subject: [PATCH] feat: modify styles --- packages/app/src/components/Header/styles.ts | 6 +- .../src/components/contact-modal/index.tsx | 6 +- .../app/src/components/contact-modal/style.ts | 28 ++- .../src/components/edgeless-toolbar/index.tsx | 14 +- .../src/components/edgeless-toolbar/style.ts | 4 +- .../components/editor-mode-switch/index.tsx | 21 ++- .../components/editor-mode-switch/style.ts | 19 +- .../src/components/shortcuts-modal/style.ts | 2 + packages/app/src/pages/_app.tsx | 12 +- packages/app/src/styles/index.ts | 2 +- packages/app/src/styles/theme.ts | 172 ++++++++++-------- packages/app/src/styles/themeProvider.tsx | 10 +- packages/app/src/styles/types.ts | 8 + packages/app/src/ui/popover/index.tsx | 33 ++-- 14 files changed, 204 insertions(+), 133 deletions(-) diff --git a/packages/app/src/components/Header/styles.ts b/packages/app/src/components/Header/styles.ts index b69e0d4dae..a4e4e8ee1e 100644 --- a/packages/app/src/components/Header/styles.ts +++ b/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', diff --git a/packages/app/src/components/contact-modal/index.tsx b/packages/app/src/components/contact-modal/index.tsx index 0b45ec18ba..0db2ef4fe5 100644 --- a/packages/app/src/components/contact-modal/index.tsx +++ b/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) => { Alpha - { onClose(); }} > - + diff --git a/packages/app/src/components/contact-modal/style.ts b/packages/app/src/components/contact-modal/style.ts index e1bb82d2fe..4b67fc98d6 100644 --- a/packages/app/src/components/contact-modal/style.ts +++ b/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', - height: '30px', - borderRadius: '6px', + width: '60px', + height: '60px', 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, }, }; }); diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx index cf9eb7dda5..2865c27721 100644 --- a/packages/app/src/components/edgeless-toolbar/index.tsx +++ b/packages/app/src/components/edgeless-toolbar/index.tsx @@ -28,32 +28,32 @@ const toolbarList1 = [ { flavor: 'text', icon: , - toolTip: 'Text(coming soon)', + toolTip: 'Text (coming soon)', disable: true, }, { flavor: 'shape', icon: , - toolTip: 'Shape(coming soon)', + toolTip: 'Shape (coming soon)', disable: true, }, { flavor: 'sticky', icon: , - toolTip: 'Sticky(coming soon)', + toolTip: 'Sticky (coming soon)', disable: true, }, { flavor: 'pen', icon: , - toolTip: 'Pen(coming soon)', + toolTip: 'Pen (coming soon)', disable: true, }, { flavor: 'connector', icon: , - toolTip: 'Connector(coming soon)', + toolTip: 'Connector (coming soon)', disable: true, }, ]; @@ -88,7 +88,7 @@ const UndoRedo = () => { return ( - + { @@ -98,7 +98,7 @@ const UndoRedo = () => { - + { diff --git a/packages/app/src/components/edgeless-toolbar/style.ts b/packages/app/src/components/edgeless-toolbar/style.ts index 2cab9efc6f..e8f0e26ef3 100644 --- a/packages/app/src/components/edgeless-toolbar/style.ts +++ b/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', diff --git a/packages/app/src/components/editor-mode-switch/index.tsx b/packages/app/src/components/editor-mode-switch/index.tsx index 94bc5c5204..5154dbacb5 100644 --- a/packages/app/src/components/editor-mode-switch/index.tsx +++ b/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 = ( + + {cloneElement(propsIcon, { + active, + })} + + ); return ( - - {cloneElement(icon, { - active, - })} - - - {label} + {isLeft ? icon : null} + + {label} + + {isLeft ? null : icon} ); }; diff --git a/packages/app/src/components/editor-mode-switch/style.ts b/packages/app/src/components/editor-mode-switch/style.ts index 5c7620092f..82c455c244 100644 --- a/packages/app/src/components/editor-mode-switch/style.ts +++ b/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, }; }); diff --git a/packages/app/src/components/shortcuts-modal/style.ts b/packages/app/src/components/shortcuts-modal/style.ts index c9bf33e301..a38e9da25d 100644 --- a/packages/app/src/components/shortcuts-modal/style.ts +++ b/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, }, }; }); diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx index 7b009515ce..f1ff7254e1 100644 --- a/packages/app/src/pages/_app.tsx +++ b/packages/app/src/pages/_app.tsx @@ -17,13 +17,13 @@ function MyApp({ Component, pageProps }: AppProps) { return ( <> - - - + + + - - - + + + ); } diff --git a/packages/app/src/styles/index.ts b/packages/app/src/styles/index.ts index 7c6781815e..d65281b881 100644 --- a/packages/app/src/styles/index.ts +++ b/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'; diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index 66f1fde90a..885ddfce87 100644 --- a/packages/app/src/styles/theme.ts +++ b/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 = { - mode: 'light', - colors: { - primaryColor: '#6880FF', +export const getLightTheme = ( + editorMode: EditorContainer['mode'] +): AffineTheme => { + return { + mode: 'light', + editorMode, + colors: { + primaryColor: '#6880FF', - pageBackground: '#fff', - hoverBackground: '#F1F3FF', - popoverBackground: '#fff', - codeBackground: '#f2f5f9', + pageBackground: '#fff', + hoverBackground: '#F1F3FF', + popoverBackground: '#fff', + codeBackground: '#f2f5f9', - textColor: '#3A4C5C', - edgelessTextColor: '#3A4C5C', - iconColor: '#9096A5', - linkColor: '#6880FF', - linkColor2: '#6880FF', - linkVisitedColor: '#ABB8FE', - popoverColor: '#4C6275', - codeColor: '#517ea6', - quoteColor: '#4C6275', - placeHolderColor: '#C7C7C7', - selectedColor: 'rgba(104, 128, 255, 0.1)', - borderColor: '#D0D7E3', - }, - font: { - xs: '12px', - sm: '16px', - base: '18px', - family: `Avenir Next, ${basicFontFamily}`, - family2: `Space Mono, ${basicFontFamily}`, - lineHeightBase: '26px', - }, - zIndex: { - modal: 1000, - popover: 100, - }, - shadow: { - popover: - '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: - '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', - }, - radius: { - popover: '10px', - }, + textColor: '#3A4C5C', + edgelessTextColor: '#3A4C5C', + iconColor: '#9096A5', + linkColor: '#6880FF', + linkColor2: '#6880FF', + linkVisitedColor: '#ABB8FE', + popoverColor: '#4C6275', + codeColor: '#517ea6', + quoteColor: '#4C6275', + placeHolderColor: '#C7C7C7', + selectedColor: 'rgba(104, 128, 255, 0.1)', + borderColor: '#D0D7E3', + disableColor: '#C0C0C0', + }, + font: { + xs: '12px', + sm: '16px', + base: '18px', + family: `Avenir Next, ${basicFontFamily}`, + family2: `Space Mono, ${basicFontFamily}`, + lineHeightBase: '26px', + }, + zIndex: { + modal: 1000, + popover: 100, + }, + shadow: { + popover: + '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: + '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', + }, + radius: { + popover: '10px', + }, + }; }; -export const darkTheme: AffineTheme = { - ...lightTheme, - mode: 'dark', - colors: { - primaryColor: '#6880FF', +export const getDarkTheme = ( + editorMode: EditorContainer['mode'] +): AffineTheme => { + const lightTheme = getLightTheme(editorMode); - pageBackground: '#2c2c2c', - hoverBackground: '#3C3C42', - popoverBackground: '#1F2021', - codeBackground: '#505662', + return { + ...lightTheme, + mode: 'dark', + colors: { + primaryColor: '#6880FF', - textColor: '#fff', - edgelessTextColor: '#3A4C5C', - iconColor: '#9096A5', - linkColor: '#7D91FF', - linkColor2: '#6880FF', - linkVisitedColor: '#505FAB', - popoverColor: '#C6CBD9', - codeColor: '#BDDBFD', - quoteColor: '#C6CBD9', - placeHolderColor: '#C7C7C7', - selectedColor: 'rgba(240, 242, 255, 0.8)', - borderColor: '#4D4C53', - }, - 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)', - }, + pageBackground: '#2c2c2c', + hoverBackground: '#3C3C42', + popoverBackground: '#1F2021', + codeBackground: + editorMode === 'edgeless' + ? lightTheme.colors.codeBackground + : '#505662', + + textColor: '#fff', + edgelessTextColor: '#3A4C5C', + iconColor: '#9096A5', + linkColor: '#7D91FF', + linkColor2: '#6880FF', + linkVisitedColor: '#505FAB', + popoverColor: '#C6CBD9', + codeColor: + editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD', + quoteColor: '#C6CBD9', + 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, diff --git a/packages/app/src/styles/themeProvider.tsx b/packages/app/src/styles/themeProvider.tsx index 097e0d5c72..806a52ffe8 100644 --- a/packages/app/src/styles/themeProvider.tsx +++ b/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({ mode: 'light', changeMode: () => {}, - theme: lightTheme, + theme: getLightTheme('page'), }); export const ThemeProvider = ({ @@ -26,8 +27,9 @@ export const ThemeProvider = ({ }: PropsWithChildren) => { const [theme, setTheme] = useState(defaultTheme); const [mode, setMode] = useState('auto'); - - const themeStyle = theme === 'light' ? lightTheme : darkTheme; + const { mode: editorMode } = useEditor(); + 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 diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts index c37fc5eecf..41f5a2362f 100644 --- a/packages/app/src/styles/types.ts +++ b/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']; diff --git a/packages/app/src/ui/popover/index.tsx b/packages/app/src/ui/popover/index.tsx index 0d0f790984..29100d5b3d 100644 --- a/packages/app/src/ui/popover/index.tsx +++ b/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) => { const [show, setShow] = useState(false); return ( - { - setShow(!show); - }} - onMouseEnter={() => { - setShow(true); - }} - onMouseLeave={() => { + { setShow(false); }} - style={style} > - {children} - - - {popoverContent} - - - + { + setShow(!show); + }} + style={style} + > + {children} + + + {popoverContent} + + + + ); };