chore: update shadow and color (#2171)

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