From dcf7e83eec74912c1d143e302470de4e5783071d Mon Sep 17 00:00:00 2001 From: JimmFly Date: Fri, 28 Apr 2023 01:57:25 +0800 Subject: [PATCH] chore: update shadow and color (#2171) --- .../editor-mode-switch/style.ts | 7 ++--- apps/web/src/components/pure/footer/styles.ts | 26 ------------------- .../pure/workspace-list-modal/styles.ts | 9 ++++--- .../src/components/workspace-card/index.tsx | 1 - .../src/components/workspace-card/styles.ts | 10 +++---- packages/component/src/ui/menu/styles.ts | 2 +- .../component/src/ui/modal/ModalWrapper.tsx | 3 ++- packages/component/src/ui/toast/toast.ts | 2 +- .../src/ui/tooltip/QuickSearch-tips.tsx | 7 +++-- packages/component/src/ui/tooltip/Tooltip.tsx | 2 +- packages/theme/src/index.ts | 26 ++++++++++++------- 11 files changed, 40 insertions(+), 55 deletions(-) diff --git a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts index b4c4f0aa59..ad724e688d 100644 --- a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts +++ b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts @@ -9,7 +9,7 @@ export const StyledEditorModeSwitch = styled('div')<{ height: '32px', background: showAlone ? 'transparent' - : 'var(--affine-background-primary-color)', + : 'var(--affine-background-secondary-color)', borderRadius: '12px', ...displayFlex('space-between', 'center'), padding: '0 8px', @@ -21,7 +21,7 @@ export const StyledEditorModeSwitch = styled('div')<{ width: '24px', height: '24px', background: 'var(--affine-background-primary-color)', - boxShadow: 'var(--affine-tooltip-shadow)', + boxShadow: 'var(--affine-shadow)', borderRadius: '8px', zIndex: 1, position: 'absolute', @@ -34,11 +34,12 @@ export const StyledEditorModeSwitch = styled('div')<{ export const StyledSwitchItem = styled('button')<{ active?: boolean; hide?: boolean; -}>(({ theme, active = false, hide = false }) => { +}>(({ active = false, hide = false }) => { return { width: '24px', height: '24px', borderRadius: '8px', + boxShadow: active ? 'var(--affine-shadow)' : 'none', color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)', display: hide ? 'none' : 'inline-flex', alignItems: 'center', diff --git a/apps/web/src/components/pure/footer/styles.ts b/apps/web/src/components/pure/footer/styles.ts index 222d649547..1b37891f29 100644 --- a/apps/web/src/components/pure/footer/styles.ts +++ b/apps/web/src/components/pure/footer/styles.ts @@ -47,32 +47,6 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => { }; }); -export const StyledCard = styled('div')<{ - active?: boolean; -}>(({ theme, active }) => { - const borderColor = active ? 'var(--affine-primary-color)' : 'transparent'; - return { - width: '310px', - height: '124px', - cursor: 'pointer', - padding: '16px', - boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)', - borderRadius: '12px', - border: `1px solid ${borderColor}`, - ...displayFlex('flex-start', 'flex-start'), - marginBottom: '24px', - transition: 'background .2s', - background: 'var(--affine-background-primary-color)', - ':hover': { - background: 'var(--affine-hover-color)', - '.add-icon': { - borderColor: 'var(--affine-primary-color)', - color: 'var(--affine-primary-color)', - }, - }, - }; -}); - export const StyledFooter = styled('div')({ height: '84px', padding: '0 40px', diff --git a/apps/web/src/components/pure/workspace-list-modal/styles.ts b/apps/web/src/components/pure/workspace-list-modal/styles.ts index dd1ff2aac7..048d83bb3d 100644 --- a/apps/web/src/components/pure/workspace-list-modal/styles.ts +++ b/apps/web/src/components/pure/workspace-list-modal/styles.ts @@ -47,9 +47,10 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => { height: '124px', cursor: 'pointer', padding: '16px', - boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)', + boxShadow: 'var(--affine-shadow)', borderRadius: '12px', transition: 'all .1s', + background: 'var(--affine-white-80)', ...displayFlex('flex-start', 'flex-start'), color: 'var(--affine-text-secondary-color)', @@ -57,7 +58,7 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => { background: 'var(--affine-hover-color)', color: 'var(--affine-text-primary-color)', '.add-icon': { - borderColor: 'var(--affine-primary-color)', + borderColor: 'var(--affine-white-color)', color: 'var(--affine-primary-color)', }, }, @@ -103,11 +104,13 @@ export const StyleWorkspaceAdd = styled('div')(() => { width: '58px', height: '58px', borderRadius: '100%', - background: '#f4f5fa', + background: 'var(--affine-white-80)', border: '1.5px dashed #f4f5fa', transition: 'background .2s', fontSize: '24px', ...displayFlex('center', 'center'), + borderColor: 'var(--affine-white-color)', + color: 'var(--affine-primary-color)', }; }); export const StyledModalHeader = styled('div')(() => { diff --git a/packages/component/src/components/workspace-card/index.tsx b/packages/component/src/components/workspace-card/index.tsx index be22f801fc..33fcc3bd4c 100644 --- a/packages/component/src/components/workspace-card/index.tsx +++ b/packages/component/src/components/workspace-card/index.tsx @@ -123,7 +123,6 @@ export const WorkspaceCard: FC = ({ { e.stopPropagation(); onSettingClick(workspace); diff --git a/packages/component/src/components/workspace-card/styles.ts b/packages/component/src/components/workspace-card/styles.ts index 25a296057f..e636af349e 100644 --- a/packages/component/src/components/workspace-card/styles.ts +++ b/packages/component/src/components/workspace-card/styles.ts @@ -42,13 +42,13 @@ export const StyledCard = styled('div')<{ height: '124px', cursor: 'pointer', padding: '16px', - boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)', + boxShadow: 'var(--affine-shadow)', borderRadius: '12px', border: `1px solid ${borderColor}`, ...displayFlex('flex-start', 'flex-start'), marginBottom: '24px', transition: 'background .2s', - background: 'var(--affine-background-primary-color)', + background: 'var(--affine-white-80)', position: 'relative', ':hover': { background: 'var(--affine-hover-color)', @@ -77,18 +77,18 @@ export const StyledModalHeader = styled('div')(() => { }; }); -export const StyledSettingLink = styled(IconButton)(({ theme }) => { +export const StyledSettingLink = styled(IconButton)(() => { return { position: 'absolute', right: '6px', bottom: '6px', opacity: 0, borderRadius: '4px', - color: 'var(--affine-background-primary-color)', + color: 'var(--affine-primary-color)', pointerEvents: 'none', transition: 'all .15s', ':hover': { - background: 'var(--affine-background-primary-color)', + background: 'var(--affine-hover-color)', }, }; }); diff --git a/packages/component/src/ui/menu/styles.ts b/packages/component/src/ui/menu/styles.ts index 28839b4ac3..cb71047f30 100644 --- a/packages/component/src/ui/menu/styles.ts +++ b/packages/component/src/ui/menu/styles.ts @@ -14,7 +14,7 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)<{ padding: '8px 4px', fontSize: '14px', backgroundColor: 'var(--affine-white)', - boxShadow: 'var(--affine-popover-shadow)', + boxShadow: 'var(--affine-menu-shadow)', }; }); diff --git a/packages/component/src/ui/modal/ModalWrapper.tsx b/packages/component/src/ui/modal/ModalWrapper.tsx index 316920e96d..8b6961dcdd 100644 --- a/packages/component/src/ui/modal/ModalWrapper.tsx +++ b/packages/component/src/ui/modal/ModalWrapper.tsx @@ -11,7 +11,8 @@ export const ModalWrapper = styled('div')<{ width, height, minHeight, - backgroundColor: 'var(--affine-white)', + backgroundColor: 'var(--affine-background-secondary-color)', + boxShadow: 'var(--affine-popover-shadow)', borderRadius: '16px', position: 'relative', maxHeight: 'calc(100vh - 32px)', diff --git a/packages/component/src/ui/toast/toast.ts b/packages/component/src/ui/toast/toast.ts index 4c56a3f872..20d4a629f5 100644 --- a/packages/component/src/ui/toast/toast.ts +++ b/packages/component/src/ui/toast/toast.ts @@ -77,7 +77,7 @@ export const toast = ( margin: 10px 0 0 0; color: var(--affine-white); background: var(--affine-tooltip); - box-shadow: var(--affine-tooltip-shadow); + box-shadow: var(--affine-float-button-shadow); border-radius: 10px; transition: all 230ms cubic-bezier(0.21, 1.02, 0.73, 1); opacity: 0; diff --git a/packages/component/src/ui/tooltip/QuickSearch-tips.tsx b/packages/component/src/ui/tooltip/QuickSearch-tips.tsx index 7e76211ad7..03f34f0b42 100644 --- a/packages/component/src/ui/tooltip/QuickSearch-tips.tsx +++ b/packages/component/src/ui/tooltip/QuickSearch-tips.tsx @@ -3,13 +3,12 @@ import type { TooltipProps } from '@mui/material'; import { css, displayFlex, styled } from '../../styles'; import { Popper, type PopperProps } from '../popper'; import StyledPopperContainer from '../shared/Container'; -const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => { +const StyledTooltip = styled(StyledPopperContainer)(() => { return { width: '390px', minHeight: '92px', - boxShadow: 'var(--affine-tooltip-shadow)', padding: '12px', - backgroundColor: 'var(--affine-background-tertiary-color)', + backgroundColor: 'var(--affine-tertiary-color)', transform: 'all 0.15s', color: 'var(--affine-text-emphasis-color)', ...displayFlex('center', 'center'), @@ -20,7 +19,7 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => { }; }); -const StyledCircleContainer = styled('div')(({ theme }) => { +const StyledCircleContainer = styled('div')(() => { return css` position: relative; content: ''; diff --git a/packages/component/src/ui/tooltip/Tooltip.tsx b/packages/component/src/ui/tooltip/Tooltip.tsx index e10980af30..7eb3108844 100644 --- a/packages/component/src/ui/tooltip/Tooltip.tsx +++ b/packages/component/src/ui/tooltip/Tooltip.tsx @@ -6,7 +6,7 @@ import StyledPopperContainer from '../shared/Container'; const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => { return { maxWidth: '320px', - boxShadow: 'var(--affine-popover-shadow)', + boxShadow: 'var(--affine-float-button-shadow)', padding: '4px 12px', backgroundColor: 'var(--affine-tooltip)', color: 'var(--affine-white)', diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index f01ef61d09..97f4e036cf 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -28,12 +28,6 @@ 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 baseTheme = { - // shadow - popoverShadow: - '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)', - modalShadow: '0px 4px 24px #161616', - tooltipShadow: '0px 0px 4px rgba(0, 0, 0, 0.14)', - // font fontFamily: `Avenir Next, Poppins, ${basicFontFamily}`, fontNumberFamily: `Roboto Mono, ${basicFontFamily}`, @@ -146,6 +140,13 @@ export const lightTheme = { paletteShapeBlack: 'rgb(0, 0, 0)', paletteShapeGrey: 'rgb(194, 194, 194)', tooltip: '#424149', + menuShadow: + '0px 0px 12px rgba(66, 65, 73, 0.1), inset 0px 0px 0px 0.5px rgba(227, 227, 228, 1)', + shadow: '0px 0px 4px rgba(66, 65, 73, 0.1)', + popoverShadow: + '0px 0px 24px rgba(0, 0, 0, 0.2), 0px 0px 4px rgba(0, 0, 0, 0.6), inset 0px 0px 0px 1px rgba(227, 226, 228, 1)', + floatButtonShadow: + '0px 1px 16px rgba(0, 0, 0, 0.1), 0px 2px 3px rgba(0, 0, 0, 0.1)', }; export const darkTheme = { @@ -153,8 +154,8 @@ export const darkTheme = { themeMode: 'dark', - brandColor: 'rgb(84, 56, 255)', - primaryColor: 'rgba(106, 86, 229, 1)', + brandColor: 'rgba(156, 140, 255, 1)', + primaryColor: 'rgba(156, 140, 255, 1)', secondaryColor: 'rgb(144, 150, 245)', tertiaryColor: 'rgb(30, 30, 30)', hoverColor: 'rgba(255, 255, 255, 0.1)', @@ -170,7 +171,7 @@ export const darkTheme = { warningColor: 'rgb(255, 123, 77)', errorColor: 'rgb(212, 140, 130)', processingColor: 'rgb(195, 215, 255)', - textEmphasisColor: 'rgb(208, 205, 220)', + textEmphasisColor: 'rgba(156, 140, 255, 1)', textPrimaryColor: 'rgb(234, 234, 234)', textSecondaryColor: 'rgb(156, 156, 160)', textDisableColor: 'rgb(119, 117, 125)', @@ -233,6 +234,13 @@ export const darkTheme = { paletteShapeBlack: 'rgb(0, 0, 0)', paletteShapeGrey: 'rgb(194, 194, 194)', tooltip: '#EAEAEA', + menuShadow: + '0px 0px 12px rgba(0, 0, 0, 1), inset 0px 0px 0px 0.5px rgba(46, 46, 46, 1)', + shadow: '0px 0px 4px rgba(20, 20, 20, 1)', + popoverShadow: + '0px 0px 26px rgba(0, 0, 0, 0.8), 0px 0px 10px rgba(0, 0, 0, 1), inset 0px 0px 0px 1px rgba(46, 46, 46, 1)', + floatButtonShadow: + '0px 1px 16px rgba(0, 0, 0, 1), 0px 2px 3px rgba(0, 0, 0, 1)', } satisfies Omit; export const lightCssVariables = Object.entries(lightTheme).reduce(