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/table/src/table-cell-css.ts

@@ -0,0 +1,154 @@
+import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme';
+import { css } from '@emotion/css';
+
+export const cellContainerStyle = css({
+  position: 'relative',
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: cssVarV2.table.border,
+  borderCollapse: 'collapse',
+  isolation: 'auto',
+  textAlign: 'start',
+  verticalAlign: 'top',
+});
+
+export const columnOptionsCellStyle = css({
+  position: 'absolute',
+  height: '0',
+  top: '0',
+  left: '0',
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const columnOptionsStyle = css({
+  cursor: 'pointer',
+  zIndex: 2,
+  width: '28px',
+  height: '16px',
+  backgroundColor: cssVarV2.table.headerBackground.default,
+  borderRadius: '8px',
+  boxShadow: cssVar('buttonShadow'),
+  opacity: 0,
+  transition: 'opacity 0.2s ease-in-out',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '--three-pointer-icon-color': cssVarV2.icon.secondary,
+  ':hover': {
+    opacity: 1,
+  },
+  '&.active': {
+    opacity: 1,
+    backgroundColor: cssVarV2.table.indicator.activated,
+    '--three-pointer-icon-color': cssVarV2.table.indicator.pointerActive,
+  },
+});
+
+export const rowOptionsCellStyle = css({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '0',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const rowOptionsStyle = css({
+  cursor: 'pointer',
+  zIndex: 2,
+  width: '16px',
+  height: '28px',
+  backgroundColor: cssVarV2.table.headerBackground.default,
+  borderRadius: '8px',
+  boxShadow: cssVar('buttonShadow'),
+  opacity: 0,
+  transition: 'opacity 0.2s ease-in-out',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '--three-pointer-icon-color': cssVarV2.icon.secondary,
+  ':hover': {
+    opacity: 1,
+  },
+  '&.active': {
+    opacity: 1,
+    backgroundColor: cssVarV2.table.indicator.activated,
+    '--three-pointer-icon-color': cssVarV2.table.indicator.pointerActive,
+  },
+});
+
+export const threePointerIconStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '2px',
+});
+
+export const threePointerIconDotStyle = css({
+  width: '3px',
+  height: '3px',
+  backgroundColor: 'var(--three-pointer-icon-color)',
+  borderRadius: '50%',
+});
+
+export const indicatorStyle = css({
+  position: 'absolute',
+  backgroundColor: cssVarV2.table.indicator.activated,
+  zIndex: 2,
+  transition: 'opacity 0.2s ease-in-out',
+  pointerEvents: 'none',
+});
+
+export const columnIndicatorStyle = css([
+  indicatorStyle,
+  {
+    top: '-1px',
+    height: 'calc(100% + 2px)',
+    width: '5px',
+  },
+]);
+
+export const columnRightIndicatorStyle = css([
+  columnIndicatorStyle,
+  {
+    cursor: 'ew-resize',
+    right: '-3px',
+    pointerEvents: 'auto',
+  },
+]);
+
+export const columnLeftIndicatorStyle = css([
+  columnIndicatorStyle,
+  {
+    left: '-2px',
+  },
+]);
+
+export const rowIndicatorStyle = css([
+  indicatorStyle,
+  {
+    left: '-1px',
+    width: 'calc(100% + 2px)',
+    height: '5px',
+  },
+]);
+
+export const rowBottomIndicatorStyle = css([
+  rowIndicatorStyle,
+  {
+    bottom: '-3px',
+  },
+]);
+
+export const rowTopIndicatorStyle = css([
+  rowIndicatorStyle,
+  {
+    top: '-2px',
+  },
+]);