diff --git a/packages/frontend/component/.storybook/preview.css.ts b/packages/frontend/component/.storybook/preview.css.ts
index f83da41982..bec45b3923 100644
--- a/packages/frontend/component/.storybook/preview.css.ts
+++ b/packages/frontend/component/.storybook/preview.css.ts
@@ -1,4 +1,3 @@
-import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
 import { globalStyle } from '@vanilla-extract/css';
 
 globalStyle('*', {
@@ -14,14 +13,6 @@ globalStyle('body', {
   backgroundColor: 'var(--affine-background-primary-color)',
 });
 
-globalStyle('html', {
-  vars: lightCssVariables,
-});
-
-globalStyle('html[data-theme="dark"]', {
-  vars: darkCssVariables,
-});
-
 globalStyle('.docs-story', {
   backgroundColor: 'var(--affine-background-primary-color)',
 });
diff --git a/packages/frontend/component/.storybook/preview.tsx b/packages/frontend/component/.storybook/preview.tsx
index 6ba9a4ff42..e39b285acc 100644
--- a/packages/frontend/component/.storybook/preview.tsx
+++ b/packages/frontend/component/.storybook/preview.tsx
@@ -1,5 +1,5 @@
 import './polyfill';
-import '../src/theme/global.css';
+import '../src/theme';
 import './preview.css';
 import { ThemeProvider } from 'next-themes';
 import type { ComponentType } from 'react';
diff --git a/packages/frontend/component/src/ui/notification/styles.css.ts b/packages/frontend/component/src/ui/notification/styles.css.ts
index 812ccffec2..412b5776a2 100644
--- a/packages/frontend/component/src/ui/notification/styles.css.ts
+++ b/packages/frontend/component/src/ui/notification/styles.css.ts
@@ -61,17 +61,6 @@ export const actionButton = style({
   position: 'relative',
   background: 'transparent',
   border: 'none',
-  '::before': {
-    content: '""',
-    position: 'absolute',
-    inset: 0,
-    borderRadius: 'inherit',
-    backgroundColor: cssVar('black'),
-    opacity: 0.04,
-  },
-  ':hover': {
-    boxShadow: 'none !important',
-  },
 });
 export const closeButton = style({
   selectors: {