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/lottie/styles.css.ts

@@ -1,5 +1,4 @@
 import { globalStyle, style } from '@vanilla-extract/css';
-
 export const root = style({
   width: '1em',
   height: '1em',
@@ -7,13 +6,10 @@ export const root = style({
   alignItems: 'center',
   justifyContent: 'center',
 });
-
 const magicColor = `rgb(119,117,125)`;
-
 globalStyle(`${root} path[stroke="${magicColor}"]`, {
   stroke: 'currentColor',
 });
-
 globalStyle(`${root} path[fill="${magicColor}"]`, {
   fill: 'currentColor',
 });