chore: update shadow and color (#2171)

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',

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',

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')(() => {

packages/component/src/components/workspace-card/index.tsx

@@ -123,7 +123,6 @@ export const WorkspaceCard: FC<WorkspaceCardProps> = ({
       </StyleWorkspaceInfo>
       <StyledSettingLink
         className="setting-entry"
-        hoverBackground="#fff"
         onClick={e => {
           e.stopPropagation();
           onSettingClick(workspace);

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)',
     },
   };
 });

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)',
   };
 });
 

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)',

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;

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: '';

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)',

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)',
+  brandColor: 'rgba(156, 140, 255, 1)',
-  primaryColor: 'rgba(106, 86, 229, 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<AffineTheme, 'editorMode'>;
 
 export const lightCssVariables = Object.entries(lightTheme).reduce(