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/onboarding-page.css.ts

@@ -1,7 +1,7 @@
+import { cssVar } from '@toeverything/theme';
 import { globalStyle, style } from '@vanilla-extract/css';
-
 export const layout = style({
-  backgroundColor: 'var(--affine-background-primary-color)',
+  backgroundColor: cssVar('backgroundPrimaryColor'),
   height: '100vh',
   display: 'flex',
   flexDirection: 'column',
@@ -14,11 +14,9 @@ export const layout = style({
     },
   },
 });
-
 export const header = style({
   paddingTop: '24px',
   paddingRight: '24px',
-
   position: 'sticky',
   top: 0,
   display: 'flex',
@@ -37,23 +35,20 @@ export const footer = style({
   padding: '20px',
   position: 'sticky',
   bottom: 0,
-  backgroundColor: 'var(--affine-background-primary-color)',
+  backgroundColor: cssVar('backgroundPrimaryColor'),
 });
-
 export const scrollableContainer = style({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
   padding: '80px 200px 160px',
-
   '@media': {
     'screen and (max-width: 1024px)': {
       padding: '0px 36px 80px',
     },
   },
 });
-
 export const onboardingContainer = style({
   maxWidth: '600px',
   '@media': {
@@ -63,7 +58,6 @@ export const onboardingContainer = style({
     },
   },
 });
-
 export const content = style({
   display: 'flex',
   flexDirection: 'column',
@@ -71,16 +65,13 @@ export const content = style({
   gap: '36px',
   minHeight: '450px',
 });
-
 export const question = style({
-  color: 'var(--affine-text-color)',
   fontFamily: 'Inter',
-  fontSize: 'var(--affine-font-h-1)',
+  fontSize: cssVar('fontH1'),
   fontStyle: 'normal',
   fontWeight: 600,
   lineHeight: '36px',
 });
-
 export const optionsWrapper = style({
   display: 'flex',
   flexDirection: 'column',
@@ -88,7 +79,6 @@ export const optionsWrapper = style({
   gap: '16px',
   flexGrow: 1,
 });
-
 export const buttonWrapper = style({
   display: 'flex',
   flexDirection: 'row',
@@ -96,23 +86,19 @@ export const buttonWrapper = style({
   gap: '24px',
   flexShrink: 0,
 });
-
 export const checkBox = style({
   alignItems: 'center',
   fontSize: '24px',
 });
-
 globalStyle(`${checkBox} svg`, {
-  color: 'var(--affine-brand-color)',
+  color: cssVar('brandColor'),
   flexShrink: 0,
   marginRight: '8px',
 });
-
 export const label = style({
-  fontSize: 'var(--affine-font-base)',
+  fontSize: cssVar('fontBase'),
   fontWeight: 500,
 });
-
 export const input = style({
   width: '520px',
   '@media': {
@@ -121,16 +107,13 @@ export const input = style({
     },
   },
 });
-
 export const button = style({
   fontWeight: 600,
-  fontSize: 'var(--affine-font-base)',
+  fontSize: cssVar('fontBase'),
 });
-
 export const openAFFiNEButton = style({
   alignSelf: 'flex-start',
 });
-
 export const disableButton = style({
   position: 'absolute',
   display: 'none',
@@ -139,40 +122,36 @@ export const disableButton = style({
 export const windowsAppButton = style({
   marginRight: '24px',
 });
-
 export const thankContainer = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '24px',
 });
-
 export const thankTitle = style({
-  fontSize: 'var(--affine-font-title)',
+  fontSize: cssVar('fontTitle'),
   fontWeight: '700',
   lineHeight: '44px',
 });
-
 export const thankText = style({
-  fontSize: 'var(--affine-font-h-6)',
+  fontSize: cssVar('fontH6'),
   height: '300px',
   fontWeight: '600',
   lineHeight: '26px',
 });
-
 export const linkGroup = style({
   display: 'flex',
-  fontSize: 'var(--affine-font-xs)',
+  fontSize: cssVar('fontXs'),
   height: '16px',
   gap: '6px',
   width: '100%',
   justifyContent: 'flex-end',
-  backgroundColor: 'var(--affine-background-color)',
+  backgroundColor: cssVar('backgroundPrimaryColor'),
 });
 export const link = style({
-  color: 'var(--affine-text-secondary-color)',
+  color: cssVar('textSecondaryColor'),
   selectors: {
     '&:visited': {
-      color: 'var(--affine-text-secondary-color)',
+      color: cssVar('textSecondaryColor'),
     },
   },
 });