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

@@ -1,11 +1,10 @@
+import { cssVar } from '@toeverything/theme';
 import { createVar, style } from '@vanilla-extract/css';
-
 export const panelWidthVar = createVar('panel-width');
 export const resizeHandleOffsetVar = createVar('resize-handle-offset');
 export const resizeHandleVerticalPadding = createVar(
   'resize-handle-vertical-padding'
 );
-
 export const root = style({
   vars: {
     [panelWidthVar]: '256px',
@@ -38,13 +37,11 @@ export const root = style({
     },
   },
 });
-
 export const panelContent = style({
   position: 'relative',
   height: '100%',
   overflow: 'auto',
 });
-
 export const resizeHandleContainer = style({
   position: 'absolute',
   right: resizeHandleOffsetVar,
@@ -82,13 +79,12 @@ export const resizeHandleContainer = style({
     },
   },
 });
-
 export const resizerInner = style({
   position: 'absolute',
   height: '100%',
   width: '2px',
   borderRadius: '2px',
-  backgroundColor: 'var(--affine-primary-color)',
+  backgroundColor: cssVar('primaryColor'),
   transition: 'all 0.2s ease-in-out',
   transform: 'translateX(0.5px)',
   selectors: {