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/property-presets/date/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const dateCellStyle = style({
+export const dateCellStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
@@ -16,7 +16,7 @@ export const dateCellStyle = style({
   height: 'var(--data-view-cell-text-line-height)',
 });
 
-export const dateValueContainerStyle = style({
+export const dateValueContainerStyle = css({
   padding: '12px',
   backgroundColor: 'var(--layer-background-primary)',
   borderRadius: '12px',
@@ -26,7 +26,7 @@ export const dateValueContainerStyle = style({
   height: '46px',
 });
 
-export const datePickerContainerStyle = style({
+export const datePickerContainerStyle = css({
   padding: '12px',
   backgroundColor: 'var(--layer-background-primary)',
   borderRadius: '12px',

blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts

@@ -17,7 +17,7 @@ import {
   dateCellStyle,
   datePickerContainerStyle,
   dateValueContainerStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 import { datePropertyModelConfig } from './define.js';
 
 export class DateCell extends BaseCellRenderer<number, number> {

blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const multiSelectStyle = style({
+export const multiSelectStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',

blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts

@@ -9,7 +9,7 @@ import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { stopPropagation } from '../../core/utils/event.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
 import type { SelectPropertyData } from '../select/define.js';
-import { multiSelectStyle } from './cell-renderer.css.js';
+import { multiSelectStyle } from './cell-renderer-css.js';
 import { multiSelectPropertyModelConfig } from './define.js';
 
 export class MultiSelectCell extends BaseCellRenderer<

blocksuite/affine/data-view/src/property-presets/number/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const numberStyle = style({
+export const numberStyle = css({
   overflow: 'hidden',
   display: 'flex',
   alignItems: 'center',
@@ -18,7 +18,7 @@ export const numberStyle = style({
   wordBreak: 'break-all',
 });
 
-export const numberInputStyle = style({
+export const numberInputStyle = css({
   display: 'flex',
   alignItems: 'center',
   width: '100%',

blocksuite/affine/data-view/src/property-presets/number/cell-renderer.ts

@@ -6,7 +6,7 @@ import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { stopPropagation } from '../../core/utils/event.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
-import { numberInputStyle, numberStyle } from './cell-renderer.css.js';
+import { numberInputStyle, numberStyle } from './cell-renderer-css.js';
 import { numberPropertyModelConfig } from './define.js';
 import type { NumberPropertyDataType } from './types.js';
 import {

blocksuite/affine/data-view/src/property-presets/progress/cell-renderer-css.ts

@@ -1,37 +1,37 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const progressCellStyle = style({
+export const progressCellStyle = css({
   display: 'block',
   width: '100%',
   padding: '0 4px',
   userSelect: 'none',
 });
 
-export const progressContainerStyle = style({
+export const progressContainerStyle = css({
   display: 'flex',
   alignItems: 'center',
   height: 'var(--data-view-cell-text-line-height)',
   gap: '4px',
 });
 
-export const progressBarStyle = style({
+export const progressBarStyle = css({
   position: 'relative',
   width: '100%',
 });
 
-export const progressBgStyle = style({
+export const progressBgStyle = css({
   overflow: 'hidden',
   width: '100%',
   height: '10px',
   borderRadius: '22px',
 });
 
-export const progressFgStyle = style({
+export const progressFgStyle = css({
   height: '100%',
 });
 
-export const progressDragHandleStyle = style({
+export const progressDragHandleStyle = css({
   position: 'absolute',
   top: '0',
   left: '0',
@@ -45,7 +45,7 @@ export const progressDragHandleStyle = style({
   transition: 'opacity 0.2s ease-in-out',
 });
 
-export const progressNumberStyle = style({
+export const progressNumberStyle = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',

blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.ts

@@ -14,7 +14,7 @@ import {
   progressDragHandleStyle,
   progressFgStyle,
   progressNumberStyle,
-} from './cell-renderer.css.js';
+} from './cell-renderer-css.js';
 import { progressPropertyModelConfig } from './define.js';
 
 const progressColors = {

blocksuite/affine/data-view/src/property-presets/select/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const selectStyle = style({
+export const selectStyle = css({
   overflow: 'hidden',
   display: 'flex',
   alignItems: 'center',

blocksuite/affine/data-view/src/property-presets/select/cell-renderer.ts

@@ -7,7 +7,7 @@ import type { SelectTag } from '../../core/index.js';
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
-import { selectStyle } from './cell-renderer.css.js';
+import { selectStyle } from './cell-renderer-css.js';
 import {
   type SelectPropertyData,
   selectPropertyModelConfig,

blocksuite/affine/data-view/src/property-presets/text/cell-renderer-css.ts

@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
 import { baseTheme } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
 
-export const textStyle = style({
+export const textStyle = css({
   display: 'flex',
   alignItems: 'center',
   height: '100%',
@@ -19,7 +19,7 @@ export const textStyle = style({
   whiteSpace: 'nowrap',
 });
 
-export const textInputStyle = style({
+export const textInputStyle = css({
   display: 'flex',
   alignItems: 'center',
   height: '100%',

blocksuite/affine/data-view/src/property-presets/text/cell-renderer.ts

@@ -4,7 +4,7 @@ import { query } from 'lit/decorators.js';
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
-import { textInputStyle, textStyle } from './cell-renderer.css.js';
+import { textInputStyle, textStyle } from './cell-renderer-css.js';
 import { textPropertyModelConfig } from './define.js';
 
 export class TextCell extends BaseCellRenderer<string, string> {