chore: update shadow and color (#2171)

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