diff --git a/apps/web/src/components/pure/shortcuts-modal/style.ts b/apps/web/src/components/pure/shortcuts-modal/style.ts
index 26ea7bad8c..e73ac3c282 100644
--- a/apps/web/src/components/pure/shortcuts-modal/style.ts
+++ b/apps/web/src/components/pure/shortcuts-modal/style.ts
@@ -5,7 +5,7 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
   height: '74vh',
   paddingBottom: '28px',
   backgroundColor: 'var(--affine-white)',
-  boxShadow: 'var(--affine-text-popover-shadow)',
+  boxShadow: 'var(--affine-popover-shadow)',
   borderRadius: `var(--affine-popover-radius) 0 var(--affine-popover-radius) var(--affine-popover-radius)`,
   overflow: 'auto',
   boxRadius: '10px',
diff --git a/packages/component/src/ui/menu/styles.ts b/packages/component/src/ui/menu/styles.ts
index 9bc6b97228..28839b4ac3 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-text-popover-shadow)',
+    boxShadow: 'var(--affine-popover-shadow)',
   };
 });
 
diff --git a/packages/component/src/ui/tooltip/Tooltip.tsx b/packages/component/src/ui/tooltip/Tooltip.tsx
index fc6ac746ed..e10980af30 100644
--- a/packages/component/src/ui/tooltip/Tooltip.tsx
+++ b/packages/component/src/ui/tooltip/Tooltip.tsx
@@ -6,10 +6,10 @@ import StyledPopperContainer from '../shared/Container';
 const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     maxWidth: '320px',
-    boxShadow: 'var(--affine-text-popover-shadow)',
+    boxShadow: 'var(--affine-popover-shadow)',
     padding: '4px 12px',
     backgroundColor: 'var(--affine-tooltip)',
-    color: '#fff',
+    color: 'var(--affine-white)',
     fontSize: 'var(--affine-font-sm)',
   };
 });