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/auth-components/password-input/style.css.ts

@@ -1,28 +1,27 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const tag = style({
   padding: '0 15px',
   height: 20,
   lineHeight: '20px',
   borderRadius: 10,
-  fontSize: 'var(--affine-font-xs)',
-
+  fontSize: cssVar('fontXs'),
   selectors: {
     '&.weak': {
-      backgroundColor: 'var(--affine-tag-red)',
-      color: 'var(--affine-error-color)',
+      backgroundColor: cssVar('tagRed'),
+      color: cssVar('errorColor'),
     },
     '&.medium': {
-      backgroundColor: 'var(--affine-tag-orange)',
-      color: 'var(--affine-warning-color)',
+      backgroundColor: cssVar('tagOrange'),
+      color: cssVar('warningColor'),
     },
     '&.strong': {
-      backgroundColor: 'var(--affine-tag-green)',
-      color: 'var(--affine-success-color)',
+      backgroundColor: cssVar('tagGreen'),
+      color: cssVar('successColor'),
     },
     '&.maximum': {
-      backgroundColor: 'var(--affine-tag-red)',
-      color: 'var(--affine-error-color)',
+      backgroundColor: cssVar('tagRed'),
+      color: cssVar('errorColor'),
     },
   },
 });