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

@@ -1,24 +1,19 @@
 import { globalStyle, style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'inline-flex',
   alignItems: 'center',
   position: 'relative',
 });
-
 globalStyle(`${root}:hover svg`, {
   opacity: 0.8,
 });
-
 globalStyle(`${root}:active svg`, {
   opacity: 0.9,
 });
-
 export const disabled = style({
   opacity: 0.5,
   pointerEvents: 'none',
 });
-
 export const input = style({
   opacity: 0,
   position: 'absolute',
@@ -27,7 +22,6 @@ export const input = style({
   inset: 0,
   top: '50%',
   transform: 'translateY(-50%)',
-
   cursor: 'pointer',
   fontSize: 'inherit',
 });