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/setting-components/share.css.ts

@@ -1,26 +1,23 @@
+import { cssVar } from '@toeverything/theme';
 import { globalStyle, style } from '@vanilla-extract/css';
-
 export const settingHeader = style({
-  borderBottom: '1px solid var(--affine-border-color)',
+  borderBottom: `1px solid ${cssVar('borderColor')}`,
   paddingBottom: '24px',
   marginBottom: '24px',
 });
-
 globalStyle(`${settingHeader} .title`, {
-  fontSize: 'var(--affine-font-base)',
+  fontSize: cssVar('fontBase'),
   fontWeight: 600,
   lineHeight: '24px',
   marginBottom: '4px',
 });
-
 globalStyle(`${settingHeader} .subtitle`, {
-  fontSize: 'var(--affine-font-xs)',
+  fontSize: cssVar('fontXs'),
   lineHeight: '16px',
-  color: 'var(--affine-text-secondary-color)',
+  color: cssVar('textSecondaryColor'),
 });
-
 export const wrapper = style({
-  borderBottom: '1px solid var(--affine-border-color)',
+  borderBottom: `1px solid ${cssVar('borderColor')}`,
   paddingBottom: '24px',
   marginBottom: '24px',
   selectors: {
@@ -31,18 +28,16 @@ export const wrapper = style({
     },
   },
 });
-
 globalStyle(`${wrapper} .title`, {
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   fontWeight: 600,
   lineHeight: '18px',
-  color: 'var(--affine-text-secondary-color)',
+  color: cssVar('textSecondaryColor'),
   marginBottom: '16px',
 });
-
 export const settingRow = style({
   marginBottom: '25px',
-  color: 'var(--affine-text-primary-color)',
+  color: cssVar('textPrimaryColor'),
   borderRadius: '8px',
   selectors: {
     '&.two-col': {
@@ -67,7 +62,6 @@ export const settingRow = style({
     },
   },
 });
-
 globalStyle(`${settingRow} .left-col`, {
   flex: 1,
   maxWidth: '100%',
@@ -78,12 +72,12 @@ globalStyle(`${settingRow}.two-col .left-col`, {
 });
 globalStyle(`${settingRow} .name`, {
   marginBottom: '2px',
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   fontWeight: 600,
 });
 globalStyle(`${settingRow} .desc`, {
-  fontSize: 'var(--affine-font-xs)',
-  color: 'var(--affine-text-secondary-color)',
+  fontSize: cssVar('fontXs'),
+  color: cssVar('textSecondaryColor'),
 });
 globalStyle(`${settingRow} .right-col`, {
   display: 'flex',
@@ -91,21 +85,18 @@ globalStyle(`${settingRow} .right-col`, {
   paddingLeft: '15px',
   flexShrink: 0,
 });
-
 export const storageProgressContainer = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
 });
-
 export const storageProgressWrapper = style({
   flexGrow: 1,
   marginRight: '20px',
 });
-
 globalStyle(`${storageProgressWrapper} .storage-progress-desc`, {
-  fontSize: 'var(--affine-font-xs)',
-  color: 'var(--affine-text-secondary-color)',
+  fontSize: cssVar('fontXs'),
+  color: cssVar('textSecondaryColor'),
   height: '20px',
   display: 'flex',
   justifyContent: 'space-between',
@@ -115,19 +106,18 @@ globalStyle(`${storageProgressWrapper} .storage-progress-desc`, {
 globalStyle(`${storageProgressWrapper} .storage-progress-bar-wrapper`, {
   height: '8px',
   borderRadius: '4px',
-  backgroundColor: 'var(--affine-black-10)',
+  backgroundColor: cssVar('black10'),
   overflow: 'hidden',
 });
 export const storageProgressBar = style({
   height: '100%',
-  backgroundColor: 'var(--affine-processing-color)',
+  backgroundColor: cssVar('processingColor'),
   selectors: {
     '&.danger': {
-      backgroundColor: 'var(--affine-error-color)',
+      backgroundColor: cssVar('errorColor'),
     },
   },
 });
-
 export const storageButton = style({
   padding: '4px 12px',
 });