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/not-found-page/styles.css.ts

@@ -1,8 +1,8 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const notFoundPageContainer = style({
-  fontSize: 'var(--affine-font-base)',
-  color: 'var(--affine-text-primary-color)',
+  fontSize: cssVar('fontBase'),
+  color: cssVar('textPrimaryColor'),
   height: '100vh',
   display: 'flex',
   alignItems: 'center',
@@ -10,7 +10,6 @@ export const notFoundPageContainer = style({
   width: '100vw',
   padding: '0 20px',
 });
-
 export const wrapper = style({
   display: 'flex',
   alignItems: 'center',
@@ -18,5 +17,5 @@ export const wrapper = style({
   margin: '24px auto 0',
 });
 export const largeButtonEffect = style({
-  boxShadow: 'var(--affine-large-button-effect) !important',
+  boxShadow: `${cssVar('largeButtonEffect')} !important`,
 });