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

@@ -1,20 +1,17 @@
+import { cssVar } from '@toeverything/theme';
 import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
 import { globalStyle } from '@vanilla-extract/css';
-
 globalStyle('body', {
-  color: 'var(--affine-text-primary-color)',
-  fontFamily: 'var(--affine-font-family)',
-  fontSize: 'var(--affine-font-base)',
+  color: cssVar('textPrimaryColor'),
+  fontFamily: cssVar('fontFamily'),
+  fontSize: cssVar('fontBase'),
 });
-
 globalStyle('html', {
   vars: lightCssVariables,
 });
-
 globalStyle('html[data-theme="dark"]', {
   vars: darkCssVariables,
 });
-
 if (process.env.NODE_ENV === 'development') {
   globalStyle('.undefined', {
     border: '5px solid red !important',