fix(component): correct notification action hover style (#8303)

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

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

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: {