fix(core): replace most --affine with cssVar (#5728)

using a [babel plugin](https://gist.github.com/pengx17/49e24ae8a5a609bdaff122ee8c679d1c) to transform all var(--affine-xxx) to cssVar

Some issues:
- tried ast-grep but it seems to be not easy to add imports conditionally
- current work does not work well with ts with types because babel will strip them out

packages/frontend/component/src/components/card/block-card/styles.css.ts

@@ -1,44 +1,41 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const blockCard = style({
   display: 'flex',
   gap: '12px',
   padding: '8px 12px',
-  color: 'var(--affine-text-primary-color)',
-  backgroundColor: 'var(--affine-white-80)',
+  color: cssVar('textPrimaryColor'),
+  backgroundColor: cssVar('white80'),
   borderRadius: '8px',
   userSelect: 'none',
   cursor: 'pointer',
   textAlign: 'start',
-  boxShadow: 'var(--affine-shadow-1)',
+  boxShadow: cssVar('shadow1'),
   selectors: {
     '&:hover': {
-      backgroundColor: 'var(--affine-hover-color)',
+      backgroundColor: cssVar('hoverColor'),
     },
     '&[aria-disabled]': {
-      color: 'var(--affine-text-disable-color)',
+      color: cssVar('textDisableColor'),
     },
     '&[aria-disabled]:hover': {
-      backgroundColor: 'var(--affine-white-80)',
+      backgroundColor: cssVar('white80'),
       cursor: 'not-allowed',
     },
     // TODO active styles
   },
 });
-
 export const blockCardAround = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
 });
-
 export const blockCardContent = style({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
 });
-
 export const blockCardDesc = style({
-  color: 'var(--affine-text-secondary-color)',
-  fontSize: 'var(--affine-font-xs)',
+  color: cssVar('textSecondaryColor'),
+  fontSize: cssVar('fontXs'),
 });