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/global-loading/index.css.ts

@@ -1,5 +1,5 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const globalLoadingWrapperStyle = style({
   position: 'fixed',
   top: 0,
@@ -7,13 +7,13 @@ export const globalLoadingWrapperStyle = style({
   bottom: 0,
   right: '100%',
   zIndex: 5,
-  backgroundColor: 'var(--affine-background-modal-color)',
+  backgroundColor: cssVar('backgroundModalColor'),
   opacity: 0,
   transition: 'opacity .3s',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  color: 'var(--affine-processing-color)',
+  color: cssVar('processingColor'),
   '@media': {
     print: {
       display: 'none',