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

@@ -1,5 +1,5 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const labelStyle = style({
   display: 'flex',
   alignItems: 'center',
@@ -14,11 +14,11 @@ export const switchStyle = style({
   position: 'relative',
   width: '46px',
   height: '26px',
-  background: 'var(--affine-toggle-disable-background-color)',
+  background: cssVar('toggleDisableBackgroundColor'),
   borderRadius: '37px',
   transition: '200ms all',
-  border: '1px solid var(--affine-black-10)',
-  boxShadow: 'var(--affine-toggle-circle-shadow)',
+  border: `1px solid ${cssVar('black10')}`,
+  boxShadow: cssVar('toggleCircleShadow'),
   selectors: {
     '&:before': {
       transition: 'all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51)',
@@ -28,17 +28,17 @@ export const switchStyle = style({
       height: '20px',
       borderRadius: '50%',
       top: '50%',
-      border: '1px solid var(--affine-black-10)',
-      background: 'var(--affine-toggle-circle-background-color)',
+      border: `1px solid ${cssVar('black10')}`,
+      background: cssVar('toggleCircleBackgroundColor'),
       transform: 'translate(1px, -50%)',
     },
   },
 });
 export const switchCheckedStyle = style({
-  background: 'var(--affine-primary-color)',
+  background: cssVar('primaryColor'),
   selectors: {
     '&:before': {
-      borderColor: 'var(--affine-pure-black-10)',
+      borderColor: cssVar('pureBlack10'),
       transform: 'translate(21px,-50%)',
     },
   },