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/add-button-css.ts

@@ -0,0 +1,99 @@
+import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme';
+import { css } from '@emotion/css';
+
+export const addColumnButtonStyle = css({
+  cursor: 'col-resize',
+  backgroundColor: cssVarV2.layer.background.hoverOverlay,
+  fontSize: '16px',
+  color: cssVarV2.icon.secondary,
+  display: 'flex',
+  width: '16px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+  top: '0',
+  left: 'calc(100% + 2px)',
+  height: '100%',
+  transition:
+    'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+  borderRadius: '2px',
+  opacity: 0,
+  ':hover': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
+  },
+  '&.active': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
+  },
+});
+
+export const addRowButtonStyle = css({
+  cursor: 'row-resize',
+  backgroundColor: cssVarV2.layer.background.hoverOverlay,
+  fontSize: '16px',
+  color: cssVarV2.icon.secondary,
+  display: 'flex',
+  height: '16px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'absolute',
+  top: 'calc(100% + 2px)',
+  left: '0',
+  width: '100%',
+  transition:
+    'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+  borderRadius: '2px',
+  opacity: 0,
+  ':hover': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
+  },
+  '&.active': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
+  },
+});
+
+export const addRowColumnButtonStyle = css({
+  cursor: 'nwse-resize',
+  backgroundColor: cssVarV2.layer.background.hoverOverlay,
+  fontSize: '16px',
+  color: cssVarV2.icon.secondary,
+  display: 'flex',
+  width: '16px',
+  height: '16px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+  top: 'calc(100% + 2px)',
+  left: 'calc(100% + 2px)',
+  borderRadius: '2px',
+  opacity: 0,
+  transition:
+    'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+  ':hover': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
+  },
+  '&.active': {
+    backgroundColor: cssVarV2.table.indicator.drag,
+    color: cssVarV2.icon.primary,
+    opacity: 1,
+  },
+});
+
+export const cellCountTipsStyle = css({
+  position: 'absolute',
+  backgroundColor: cssVarV2.tooltips.background,
+  borderRadius: '4px',
+  padding: '4px',
+  boxShadow: cssVar('buttonShadow'),
+  color: cssVarV2.tooltips.foreground,
+  whiteSpace: 'nowrap',
+});