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/ui/editable/inline-edit.css.ts

@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-
 export const inlineEditWrapper = style({
   position: 'relative',
   borderRadius: 4,
@@ -11,13 +10,10 @@ export const inlineEditWrapper = style({
 export const inlineEdit = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-
   whiteSpace: 'pre',
   wordWrap: 'break-word',
-
   // to avoid shrinking when <input /> show up
   border: '1px solid transparent',
-
   selectors: {
     [`.${inlineEditWrapper}[data-editing="true"] &`]: {
       opacity: 0,
@@ -25,18 +21,15 @@ export const inlineEdit = style({
     },
   },
 });
-
 export const inlineEditInput = style({
   position: 'absolute',
   width: '100%',
   height: '100%',
   left: 0,
   top: 0,
-
   opacity: 0,
   visibility: 'hidden',
   pointerEvents: 'none',
-
   selectors: {
     [`.${inlineEditWrapper}[data-editing="true"] &`]: {
       opacity: 1,
@@ -45,7 +38,6 @@ export const inlineEditInput = style({
     },
   },
 });
-
 export const placeholder = style({
   opacity: 0.8,
 });