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/affine-other-page-layout/index.css.ts

@@ -1,19 +1,17 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   height: '100vh',
   width: '100vw',
   display: 'flex',
   flexDirection: 'column',
-  fontSize: 'var(--affine-font-base)',
+  fontSize: cssVar('fontBase'),
   position: 'relative',
-  background: 'var(--affine-background-primary-color)',
+  background: cssVar('backgroundPrimaryColor'),
 });
-
 export const affineLogo = style({
   color: 'inherit',
 });
-
 export const topNav = style({
   top: 0,
   left: 0,
@@ -28,43 +26,38 @@ export const topNav = style({
     },
   },
 });
-
 export const topNavLinks = style({
   display: 'flex',
   columnGap: 4,
 });
-
 export const topNavLink = style({
-  color: 'var(--affine-text-primary-color)',
-  fontSize: 'var(--affine-font-sm)',
+  color: cssVar('textPrimaryColor'),
+  fontSize: cssVar('fontSm'),
   fontWeight: 500,
   textDecoration: 'none',
   padding: '4px 18px',
 });
-
 export const iconButton = style({
   fontSize: '24px',
   pointerEvents: 'auto',
   selectors: {
     '&.plain': {
-      color: 'var(--affine-text-primary-color)',
+      color: cssVar('textPrimaryColor'),
     },
   },
 });
-
 export const menu = style({
   width: '100vw',
   height: '100vh',
   padding: '0',
-  background: 'var(--affine-background-primary-color)',
+  background: cssVar('backgroundPrimaryColor'),
   borderRadius: '0',
   border: 'none',
   boxShadow: 'none',
 });
-
 export const menuItem = style({
-  color: 'var(--affine-text-primary-color)',
-  fontSize: 'var(--affine-font-sm)',
+  color: cssVar('textPrimaryColor'),
+  fontSize: cssVar('fontSm'),
   fontWeight: 500,
   textDecoration: 'none',
   padding: '12px 20px',
@@ -80,7 +73,7 @@ export const menuItem = style({
       display: 'block',
       width: 'calc(100% - 40px)',
       height: '0.5px',
-      background: 'var(--affine-black-10)',
+      background: cssVar('black10'),
     },
     '&:not(:last-of-type)': {
       marginBottom: '0',