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/data-view/src/core/common/dv-css.ts

@@ -0,0 +1,72 @@
+import { css } from '@emotion/css';
+import { cssVarV2 } from '@toeverything/theme/v2';
+
+export const dataViewVars = {
+  cellTextSize: '--affine-data-view-cell-text-size',
+  cellTextLineHeight: '--affine-data-view-cell-text-line-height',
+};
+
+export const dataViewRoot = css({
+  fontFamily: 'var(--affine-font-family)',
+  [dataViewVars.cellTextSize]: '14px',
+  [dataViewVars.cellTextLineHeight]: '22px',
+});
+
+export const withDataViewCssVariable = css({
+  fontFamily: 'var(--affine-font-family)',
+  [dataViewVars.cellTextSize]: '14px',
+  [dataViewVars.cellTextLineHeight]: '22px',
+});
+
+export const p2 = css({
+  padding: '2px',
+});
+export const p4 = css({
+  padding: '4px',
+});
+export const p8 = css({
+  padding: '8px',
+});
+
+export const hover = css({
+  '&:hover, &.active': {
+    backgroundColor: 'var(--affine-hover-color)',
+    cursor: 'pointer',
+  },
+});
+
+export const icon16 = css({
+  fontSize: '16px',
+  color: cssVarV2.icon.primary,
+});
+export const icon20 = css({
+  fontSize: '20px',
+  color: cssVarV2.icon.primary,
+});
+
+export const border = css({
+  border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
+});
+export const round4 = css({
+  borderRadius: '4px',
+});
+export const round8 = css({
+  borderRadius: '8px',
+});
+export const color2 = css({
+  color: 'var(--affine-text-secondary-color)',
+});
+export const shadow2 = css({
+  boxShadow: 'var(--affine-shadow-2)',
+});
+
+export const dividerH = css({
+  height: '1px',
+  backgroundColor: 'var(--affine-divider-color)',
+  margin: '8px 0',
+});
+export const dividerV = css({
+  width: '1px',
+  backgroundColor: 'var(--affine-divider-color)',
+  margin: '0 8px',
+});

blocksuite/affine/data-view/src/core/common/dv.css.ts

@@ -1,85 +0,0 @@
-import { cssVarV2 } from '@toeverything/theme/v2';
-import { createVar, style } from '@vanilla-extract/css';
-
-export const dataViewVars = {
-  cellTextSize: createVar(),
-  cellTextLineHeight: createVar(),
-};
-
-export const dataViewRoot = style({
-  vars: {
-    [dataViewVars.cellTextSize]: '14px',
-    [dataViewVars.cellTextLineHeight]: '22px',
-  },
-});
-
-export const withDataViewCssVariable = style({
-  vars: {
-    [dataViewVars.cellTextSize]: '14px',
-    [dataViewVars.cellTextLineHeight]: '22px',
-  },
-  fontFamily: 'var(--affine-font-family)',
-});
-
-export const p2 = style({
-  padding: '2px',
-});
-
-export const p4 = style({
-  padding: '4px',
-});
-
-export const p8 = style({
-  padding: '8px',
-});
-
-export const hover = style({
-  selectors: {
-    '&:hover, &.active': {
-      backgroundColor: 'var(--affine-hover-color)',
-      cursor: 'pointer',
-    },
-  },
-});
-
-export const icon16 = style({
-  fontSize: '16px',
-  color: cssVarV2.icon.primary,
-});
-
-export const icon20 = style({
-  fontSize: '20px',
-  color: cssVarV2.icon.primary,
-});
-
-export const border = style({
-  border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
-});
-
-export const round4 = style({
-  borderRadius: '4px',
-});
-
-export const round8 = style({
-  borderRadius: '8px',
-});
-
-export const color2 = style({
-  color: 'var(--affine-text-secondary-color)',
-});
-
-export const shadow2 = style({
-  boxShadow: 'var(--affine-shadow-2)',
-});
-
-export const dividerH = style({
-  height: '1px',
-  backgroundColor: 'var(--affine-divider-color)',
-  margin: '8px 0',
-});
-
-export const dividerV = style({
-  width: '1px',
-  backgroundColor: 'var(--affine-divider-color)',
-  margin: '0 8px',
-});

blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts

@@ -53,7 +53,7 @@ import {
   tagSelectInputContainerStyle,
   tagSelectInputStyle,
   tagTextStyle,
-} from './styles.css.js';
+} from './styles-css.js';
 
 type RenderOption = {
   value: string;

blocksuite/affine/data-view/src/core/component/tags/styles-css.ts

@@ -1,8 +1,8 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { style } from '@vanilla-extract/css';
 
-export const tagSelectContainerStyle = style({
+export const tagSelectContainerStyle = css({
   position: 'absolute',
   zIndex: 2,
   color: cssVarV2('text/primary'),
@@ -16,14 +16,12 @@ export const tagSelectContainerStyle = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '4px',
-  '@media': {
-    print: {
-      display: 'none',
-    },
+  '@media print': {
+    display: 'none',
   },
 });
 
-export const tagSelectInputContainerStyle = style({
+export const tagSelectInputContainerStyle = css({
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
@@ -31,7 +29,7 @@ export const tagSelectInputContainerStyle = style({
   padding: '4px',
 });
 
-export const tagSelectInputStyle = style({
+export const tagSelectInputStyle = css({
   flex: '1 1 0',
   border: 'none',
   fontFamily: baseTheme.fontSansFamily,
@@ -45,7 +43,7 @@ export const tagSelectInputStyle = style({
   },
 });
 
-export const selectOptionsTipsStyle = style({
+export const selectOptionsTipsStyle = css({
   padding: '4px',
   color: cssVarV2('text/secondary'),
   fontSize: '14px',
@@ -54,7 +52,7 @@ export const selectOptionsTipsStyle = style({
   userSelect: 'none',
 });
 
-export const selectOptionsContainerStyle = style({
+export const selectOptionsContainerStyle = css({
   maxHeight: '400px',
   overflowY: 'auto',
   userSelect: 'none',
@@ -63,7 +61,7 @@ export const selectOptionsContainerStyle = style({
   gap: '4px',
 });
 
-export const selectOptionStyle = style({
+export const selectOptionStyle = css({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -72,11 +70,11 @@ export const selectOptionStyle = style({
   cursor: 'pointer',
 });
 
-export const selectedStyle = style({
+export const selectedStyle = css({
   background: cssVarV2('layer/background/hoverOverlay'),
 });
 
-export const tagContainerStyle = style({
+export const tagContainerStyle = css({
   display: 'flex',
   alignItems: 'center',
   padding: '0 8px',
@@ -89,26 +87,26 @@ export const tagContainerStyle = style({
   userSelect: 'none',
 });
 
-export const tagTextStyle = style({
+export const tagTextStyle = css({
   fontSize: '14px',
   lineHeight: '22px',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });
 
-export const tagDeleteIconStyle = style({
+export const tagDeleteIconStyle = css({
   display: 'flex',
   alignItems: 'center',
   color: cssVarV2('chip/label/text'),
 });
 
-export const selectOptionContentStyle = style({
+export const selectOptionContentStyle = css({
   display: 'flex',
   alignItems: 'center',
   overflow: 'hidden',
 });
 
-export const selectOptionIconStyle = style({
+export const selectOptionIconStyle = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -121,14 +119,12 @@ export const selectOptionIconStyle = style({
   ':hover': {
     background: cssVarV2('layer/background/hoverOverlay'),
   },
-  selectors: {
-    [`${selectedStyle} &`]: {
-      visibility: 'visible',
-    },
+  [`.${selectedStyle} &`]: {
+    visibility: 'visible',
   },
 });
 
-export const selectOptionDragHandlerStyle = style({
+export const selectOptionDragHandlerStyle = css({
   width: '4px',
   height: '12px',
   borderRadius: '1px',
@@ -138,7 +134,7 @@ export const selectOptionDragHandlerStyle = style({
   flexShrink: 0,
 });
 
-export const selectOptionNewIconStyle = style({
+export const selectOptionNewIconStyle = css({
   fontSize: '14px',
   lineHeight: '22px',
   color: cssVarV2('text/primary'),