From cd6a930939e536c3dbdbab3f0b4ffcb187d79243 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 25 Oct 2022 11:51:59 +0800 Subject: [PATCH 1/3] feat: modify styles & ui components --- packages/app/src/components/Header/index.tsx | 2 +- .../src/components/edgeless-toolbar/index.tsx | 2 +- packages/app/src/components/faq/index.tsx | 2 +- .../app/src/components/tooltip/Container.tsx | 29 --------- .../app/src/components/tooltip/Tooltip.tsx | 65 ------------------- .../app/src/components/tooltip/interface.ts | 9 --- packages/app/src/styles/theme.ts | 9 +++ packages/app/src/styles/types.ts | 12 +++- .../src/{components => ui}/popover/index.tsx | 0 .../popper/PopoverArrow.tsx | 0 .../src/{components => ui}/popper/Popper.tsx | 0 .../src/{components => ui}/popper/index.ts | 0 .../{components => ui}/popper/interface.ts | 0 packages/app/src/ui/shared/Container.tsx | 53 +++++++++++++++ packages/app/src/ui/tooltip/Tooltip.tsx | 32 +++++++++ .../src/{components => ui}/tooltip/index.tsx | 0 16 files changed, 107 insertions(+), 108 deletions(-) delete mode 100644 packages/app/src/components/tooltip/Container.tsx delete mode 100644 packages/app/src/components/tooltip/Tooltip.tsx delete mode 100644 packages/app/src/components/tooltip/interface.ts rename packages/app/src/{components => ui}/popover/index.tsx (100%) rename packages/app/src/{components => ui}/popper/PopoverArrow.tsx (100%) rename packages/app/src/{components => ui}/popper/Popper.tsx (100%) rename packages/app/src/{components => ui}/popper/index.ts (100%) rename packages/app/src/{components => ui}/popper/interface.ts (100%) create mode 100644 packages/app/src/ui/shared/Container.tsx create mode 100644 packages/app/src/ui/tooltip/Tooltip.tsx rename packages/app/src/{components => ui}/tooltip/index.tsx (100%) diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx index fb4df965db..59412e54cd 100644 --- a/packages/app/src/components/Header/index.tsx +++ b/packages/app/src/components/Header/index.tsx @@ -9,7 +9,7 @@ import { StyledMoreMenuItem, IconButton, } from './styles'; -import { Popover } from '@/components/popover'; +import { Popover } from '@/ui/popover'; import { useEditor } from '@/components/editor-provider'; import EditorModeSwitch from '@/components/editor-mode-switch'; import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons'; diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx index 61eed107c5..cf9eb7dda5 100644 --- a/packages/app/src/components/edgeless-toolbar/index.tsx +++ b/packages/app/src/components/edgeless-toolbar/index.tsx @@ -14,7 +14,7 @@ import { UndoIcon, RedoIcon, } from './icons'; -import { Tooltip } from '@/components/tooltip'; +import { Tooltip } from '@/ui/tooltip'; import Slide from '@mui/material/Slide'; import { useEditor } from '@/components/editor-provider'; diff --git a/packages/app/src/components/faq/index.tsx b/packages/app/src/components/faq/index.tsx index 96dddc4b45..e33a35f730 100644 --- a/packages/app/src/components/faq/index.tsx +++ b/packages/app/src/components/faq/index.tsx @@ -7,7 +7,7 @@ import { } from './style'; import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './icons'; import Grow from '@mui/material/Grow'; -import { Tooltip } from '../tooltip'; +import { Tooltip } from '@/ui/tooltip'; import { useEditor } from '@/components/editor-provider'; import { useModal } from '@/components/global-modal-provider'; import { useTheme } from '@/styles'; diff --git a/packages/app/src/components/tooltip/Container.tsx b/packages/app/src/components/tooltip/Container.tsx deleted file mode 100644 index 9f1f19aeed..0000000000 --- a/packages/app/src/components/tooltip/Container.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { styled } from '@/styles'; -import type { ReactNode, CSSProperties } from 'react'; -import type { PopoverDirection } from './interface'; -export interface PopoverContainerProps { - children?: ReactNode; - /** - * The pop-up window points to. The pop-up window has three rounded corners, one is a right angle, and the right angle is the direction of the pop-up window. - */ - direction: PopoverDirection; - style?: CSSProperties; -} -const border_radius_map: Record = { - none: '10px', - 'left-top': '0 10px 10px 10px', - 'left-bottom': '10px 10px 10px 0', - 'right-top': '10px 0 10px 10px', - 'right-bottom': '10px 10px 0 10px', -}; - -export const PopoverContainer = styled('div')< - Pick ->(({ direction, style }) => { - const borderRadius = - border_radius_map[direction] || border_radius_map['left-top']; - return { - borderRadius: borderRadius, - ...style, - }; -}); diff --git a/packages/app/src/components/tooltip/Tooltip.tsx b/packages/app/src/components/tooltip/Tooltip.tsx deleted file mode 100644 index 6fabed3f6d..0000000000 --- a/packages/app/src/components/tooltip/Tooltip.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { type CSSProperties, type PropsWithChildren } from 'react'; -import { PopoverContainer } from './Container'; -import { Popper, type PopperProps } from '../popper'; -import { useTheme } from '@/styles'; -import type { PopperPlacementType, TooltipProps } from '@mui/material'; -import type { PopoverDirection } from './interface'; -export const placementToContainerDirection: Record< - PopperPlacementType, - PopoverDirection -> = { - top: 'none', - 'top-start': 'left-bottom', - 'top-end': 'right-bottom', - right: 'none', - 'right-start': 'left-top', - 'right-end': 'left-bottom', - bottom: 'none', - 'bottom-start': 'left-top', - 'bottom-end': 'right-top', - left: 'none', - 'left-start': 'right-top', - 'left-end': 'right-bottom', - auto: 'none', - 'auto-start': 'none', - 'auto-end': 'none', -}; - -const useTooltipStyle = (): CSSProperties => { - const { theme, mode } = useTheme(); - return { - boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.14)', - padding: '4px 12px', - backgroundColor: - mode === 'dark' - ? theme.colors.popoverBackground - : theme.colors.primaryColor, - color: '#fff', - fontSize: theme.font.xs, - }; -}; - -export const Tooltip = ( - props: PropsWithChildren> -) => { - const { content, placement = 'top-start' } = props; - const style = useTooltipStyle(); - // If there is no content, hide forever - const visibleProp = content ? {} : { visible: false }; - return ( - - {content} - - } - /> - ); -}; diff --git a/packages/app/src/components/tooltip/interface.ts b/packages/app/src/components/tooltip/interface.ts deleted file mode 100644 index 73e08c5ade..0000000000 --- a/packages/app/src/components/tooltip/interface.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type TooltipProps = { - showArrow?: boolean; -}; -export type PopoverDirection = - | 'none' - | 'left-top' - | 'left-bottom' - | 'right-top' - | 'right-bottom'; diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index 2539466320..66f1fde90a 100644 --- a/packages/app/src/styles/theme.ts +++ b/packages/app/src/styles/theme.ts @@ -5,6 +5,7 @@ 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', @@ -43,14 +44,19 @@ export const lightTheme: AffineTheme = { '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', @@ -77,6 +83,7 @@ export const darkTheme: AffineTheme = { '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)', }, }; @@ -108,6 +115,7 @@ export const globalThemeVariables: ( '--affine-modal-shadow': theme.shadow.modal, '--affine-popover-shadow': theme.shadow.popover, + '--affine-tooltip-shadow': theme.shadow.tooltip, '--affine-font-xs': theme.font.xs, // tiny '--affine-font-sm': theme.font.sm, // small @@ -121,5 +129,6 @@ export const globalThemeVariables: ( '--affine-font-family2': theme.font.family2, '--affine-paragraph-space': theme.space.paragraph, + '--affine-popover-radius': theme.radius.popover, }; }; diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts index c8f33a0fd2..c37fc5eecf 100644 --- a/packages/app/src/styles/types.ts +++ b/packages/app/src/styles/types.ts @@ -12,6 +12,7 @@ export type ThemeProviderValue = { }; export interface AffineTheme { + mode: Theme; colors: { primaryColor: string; @@ -53,10 +54,14 @@ export interface AffineTheme { shadow: { modal: string; popover: string; + tooltip: string; }; space: { paragraph: string; }; + radius: { + popover: string; + }; } export interface AffineThemeCSSVariables { @@ -80,8 +85,9 @@ export interface AffineThemeCSSVariables { '--affine-selected-color': AffineTheme['colors']['selectedColor']; '--affine-border-color': AffineTheme['colors']['borderColor']; - '--affine-modal-shadow': AffineTheme['shadow']['popover']; - '--affine-popover-shadow': AffineTheme['shadow']['modal']; + '--affine-modal-shadow': AffineTheme['shadow']['modal']; + '--affine-popover-shadow': AffineTheme['shadow']['popover']; + '--affine-tooltip-shadow': AffineTheme['shadow']['tooltip']; '--affine-font-xs': AffineTheme['font']['xs']; // tiny '--affine-font-sm': AffineTheme['font']['sm']; // small @@ -95,6 +101,8 @@ export interface AffineThemeCSSVariables { '--affine-font-family2': AffineTheme['font']['family2']; '--affine-paragraph-space': AffineTheme['space']['paragraph']; + + '--affine-popover-radius': AffineTheme['radius']['popover']; } declare module '@emotion/react' { diff --git a/packages/app/src/components/popover/index.tsx b/packages/app/src/ui/popover/index.tsx similarity index 100% rename from packages/app/src/components/popover/index.tsx rename to packages/app/src/ui/popover/index.tsx diff --git a/packages/app/src/components/popper/PopoverArrow.tsx b/packages/app/src/ui/popper/PopoverArrow.tsx similarity index 100% rename from packages/app/src/components/popper/PopoverArrow.tsx rename to packages/app/src/ui/popper/PopoverArrow.tsx diff --git a/packages/app/src/components/popper/Popper.tsx b/packages/app/src/ui/popper/Popper.tsx similarity index 100% rename from packages/app/src/components/popper/Popper.tsx rename to packages/app/src/ui/popper/Popper.tsx diff --git a/packages/app/src/components/popper/index.ts b/packages/app/src/ui/popper/index.ts similarity index 100% rename from packages/app/src/components/popper/index.ts rename to packages/app/src/ui/popper/index.ts diff --git a/packages/app/src/components/popper/interface.ts b/packages/app/src/ui/popper/interface.ts similarity index 100% rename from packages/app/src/components/popper/interface.ts rename to packages/app/src/ui/popper/interface.ts diff --git a/packages/app/src/ui/shared/Container.tsx b/packages/app/src/ui/shared/Container.tsx new file mode 100644 index 0000000000..37a4cbc804 --- /dev/null +++ b/packages/app/src/ui/shared/Container.tsx @@ -0,0 +1,53 @@ +import { styled } from '@/styles'; +import { PopperPlacementType } from '@mui/material'; + +export type PopperDirection = + | 'none' + | 'left-top' + | 'left-bottom' + | 'right-top' + | 'right-bottom'; + +const getBorderRadius = (direction: PopperDirection, radius = '0') => { + const map: Record = { + none: `${radius}`, + 'left-top': `0 ${radius} ${radius} ${radius}`, + 'left-bottom': `${radius} ${radius} ${radius} 0`, + 'right-top': `${radius} 0 ${radius} ${radius}`, + 'right-bottom': `${radius} ${radius} 0 ${radius}`, + }; + return map[direction]; +}; + +export const placementToContainerDirection: Record< + PopperPlacementType, + PopperDirection +> = { + top: 'none', + 'top-start': 'left-bottom', + 'top-end': 'right-bottom', + right: 'none', + 'right-start': 'left-top', + 'right-end': 'left-bottom', + bottom: 'none', + 'bottom-start': 'left-top', + 'bottom-end': 'right-top', + left: 'none', + 'left-start': 'right-top', + 'left-end': 'right-bottom', + auto: 'none', + 'auto-start': 'none', + 'auto-end': 'none', +}; + +export const StyledPopperContainer = styled('div')<{ + placement?: PopperPlacementType; +}>(({ theme, placement = 'top' }) => { + const direction = placementToContainerDirection[placement]; + const borderRadius = getBorderRadius(direction, theme.radius.popover); + return { + borderRadius, + }; +}); + +export default StyledPopperContainer; diff --git a/packages/app/src/ui/tooltip/Tooltip.tsx b/packages/app/src/ui/tooltip/Tooltip.tsx new file mode 100644 index 0000000000..0bf92323ef --- /dev/null +++ b/packages/app/src/ui/tooltip/Tooltip.tsx @@ -0,0 +1,32 @@ +import { type PropsWithChildren } from 'react'; +import StyledPopperContainer from '../shared/Container'; +import { Popper, type PopperProps } from '../popper'; +import { styled } from '@/styles'; +import type { TooltipProps } from '@mui/material'; + +const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => { + return { + boxShadow: theme.shadow.tooltip, + padding: '4px 12px', + backgroundColor: + theme.mode === 'dark' + ? theme.colors.popoverBackground + : theme.colors.primaryColor, + color: '#fff', + fontSize: theme.font.xs, + }; +}); + +export const Tooltip = ( + props: PropsWithChildren> +) => { + const { content, placement = 'top-start' } = props; + // If there is no content, hide forever + return content ? ( + {content}} + /> + ) : null; +}; diff --git a/packages/app/src/components/tooltip/index.tsx b/packages/app/src/ui/tooltip/index.tsx similarity index 100% rename from packages/app/src/components/tooltip/index.tsx rename to packages/app/src/ui/tooltip/index.tsx From 52e2f3854f791313689455a8b40965e1b4878649 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 25 Oct 2022 16:26:31 +0800 Subject: [PATCH 2/3] 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} + + + + ); }; From 8a0a294fc99f88bbdd2bb62ae07609624c7a2220 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 25 Oct 2022 17:41:13 +0800 Subject: [PATCH 3/3] feat: update link --- packages/app/src/components/contact-modal/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/app/src/components/contact-modal/index.tsx b/packages/app/src/components/contact-modal/index.tsx index 0db2ef4fe5..912aca6886 100644 --- a/packages/app/src/components/contact-modal/index.tsx +++ b/packages/app/src/components/contact-modal/index.tsx @@ -129,7 +129,13 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {

- How is AFFiNE Alpha different？ + + How is AFFiNE Alpha different？ +

Copyright © 2022 Toeverything