refactor(editor): replace @vanilla-extract/css with @emotion/css (#12195)

close: BS-3446

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Refactor**
  - Migrated all styling from vanilla-extract to Emotion for improved CSS-in-JS consistency across database, table, and data view components.
  - Updated import paths for style modules to reflect the new Emotion-based file naming.
  - Removed unused or redundant style exports and updated selector syntax where necessary.

- **Chores**
  - Updated dependencies: removed vanilla-extract and added Emotion in relevant package files.

- **Style**
  - No visual changes to existing components; all style definitions remain consistent with previous designs.

- **New Features**
  - Introduced new reusable CSS classes for data view and table components using Emotion.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/database/src/properties/link/cell-renderer-css.ts

@@ -1,15 +1,15 @@
 import { cssVarV2 } from '@blocksuite/affine-shared/theme';
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const linkCellStyle = style({
+export const linkCellStyle = css({
   width: '100%',
   height: '100%',
   userSelect: 'none',
   position: 'relative',
 });
 
-export const linkContainerStyle = style({
+export const linkContainerStyle = css({
   display: 'flex',
   position: 'relative',
   alignItems: 'center',
@@ -21,7 +21,8 @@ export const linkContainerStyle = style({
   lineHeight: 'var(--data-view-cell-text-line-height)',
   wordBreak: 'break-all',
 });
-export const linkIconContainerStyle = style({
+
+export const linkIconContainerStyle = css({
   position: 'absolute',
   right: '8px',
   top: '8px',
@@ -34,7 +35,8 @@ export const linkIconContainerStyle = style({
   overflow: 'hidden',
   zIndex: 1,
 });
-export const linkIconStyle = style({
+
+export const linkIconStyle = css({
   width: '100%',
   height: '100%',
   display: 'flex',
@@ -48,15 +50,13 @@ export const linkIconStyle = style({
   },
 });
 
-export const showLinkIconStyle = style({
-  selectors: {
-    [`${linkCellStyle}:hover &`]: {
-      visibility: 'visible',
-    },
+export const showLinkIconStyle = css({
+  [`.${linkCellStyle}:hover &`]: {
+    visibility: 'visible',
   },
 });
 
-export const linkedDocStyle = style({
+export const linkedDocStyle = css({
   textDecoration: 'underline',
   textDecorationColor: 'var(--affine-divider-color)',
   transition: 'text-decoration-color 0.2s ease-out',
@@ -66,7 +66,7 @@ export const linkedDocStyle = style({
   },
 });
 
-export const linkEditingStyle = style({
+export const linkEditingStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
@@ -74,7 +74,7 @@ export const linkEditingStyle = style({
   border: 'none',
   fontFamily: baseTheme.fontSansFamily,
   color: 'var(--affine-text-primary-color)',
-  fontWeight: '400',
+  fontWeight: 400,
   backgroundColor: 'transparent',
   fontSize: 'var(--data-view-cell-text-size)',
   lineHeight: 'var(--data-view-cell-text-line-height)',
@@ -84,7 +84,7 @@ export const linkEditingStyle = style({
   },
 });
 
-export const inlineLinkNodeStyle = style({
+export const inlineLinkNodeStyle = css({
   wordBreak: 'break-all',
   color: 'var(--affine-link-color)',
   fill: 'var(--affine-link-color)',
@@ -94,6 +94,6 @@ export const inlineLinkNodeStyle = style({
   textDecoration: 'none',
 });
 
-export const normalTextStyle = style({
+export const normalTextStyle = css({
   wordBreak: 'break-all',
 });

blocksuite/affine/blocks/database/src/properties/link/cell-renderer.ts

@@ -26,7 +26,7 @@ import {
   linkIconStyle,
   normalTextStyle,
   showLinkIconStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 import { linkPropertyModelConfig } from './define.js';
 
 export class LinkCell extends BaseCellRenderer<string, string> {

blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer-css.ts

@@ -1,13 +1,13 @@
-import { style } from '@vanilla-extract/css';
+import { css } from '@emotion/css';
 
-export const richTextCellStyle = style({
+export const richTextCellStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
   userSelect: 'none',
 });
 
-export const richTextContainerStyle = style({
+export const richTextContainerStyle = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',

blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.ts

@@ -29,7 +29,7 @@ import type { DatabaseBlockComponent } from '../../database-block.js';
 import {
   richTextCellStyle,
   richTextContainerStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 import { richTextPropertyModelConfig } from './define.js';
 
 function toggleStyle(

blocksuite/affine/blocks/database/src/properties/title/cell-renderer-css.ts

@@ -1,12 +1,12 @@
 import { cssVarV2 } from '@blocksuite/affine-shared/theme';
-import { style } from '@vanilla-extract/css';
+import { css } from '@emotion/css';
 
-export const titleCellStyle = style({
+export const titleCellStyle = css({
   width: '100%',
   display: 'flex',
 });
 
-export const titleRichTextStyle = style({
+export const titleRichTextStyle = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -18,7 +18,7 @@ export const titleRichTextStyle = style({
   lineHeight: 'var(--data-view-cell-text-line-height)',
 });
 
-export const headerAreaIconStyle = style({
+export const headerAreaIconStyle = css({
   height: 'max-content',
   display: 'flex',
   alignItems: 'center',

blocksuite/affine/blocks/database/src/properties/title/text.ts

@@ -24,7 +24,7 @@ import {
   headerAreaIconStyle,
   titleCellStyle,
   titleRichTextStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 
 export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
   activity = true;