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

@@ -1,5 +1,5 @@
+import { cssVar } from '@toeverything/theme';
 import { globalStyle, style } from '@vanilla-extract/css';
-
 export const scrollableContainerRoot = style({
   width: '100%',
   vars: {
@@ -7,7 +7,6 @@ export const scrollableContainerRoot = style({
   },
   height: '100%',
 });
-
 export const scrollTopBorder = style({
   position: 'absolute',
   top: 0,
@@ -16,27 +15,23 @@ export const scrollTopBorder = style({
   height: '1px',
   transition: 'opacity .3s .2s',
   opacity: 0,
-  background: 'var(--affine-border-color)',
+  background: cssVar('borderColor'),
   selectors: {
     '&[data-has-scroll-top="true"]': {
       opacity: 1,
     },
   },
 });
-
 export const scrollableViewport = style({
   height: '100%',
   width: '100%',
 });
-
 globalStyle(`${scrollableViewport} > div`, {
   display: 'contents !important',
 });
-
 export const scrollableContainer = style({
   height: '100%',
 });
-
 export const scrollbar = style({
   display: 'flex',
   flexDirection: 'column',
@@ -47,9 +42,9 @@ export const scrollbar = style({
   opacity: 1,
   transition: 'width .15s',
   ':hover': {
-    background: 'var(--affine-background-secondary-color)',
+    background: cssVar('backgroundSecondaryColor'),
     width: 'calc(var(--scrollbar-width) + 3px)',
-    borderLeft: '1px solid var(--affine-border-color)',
+    borderLeft: `1px solid ${cssVar('borderColor')}`,
   },
   selectors: {
     '&[data-state="hidden"]': {
@@ -62,15 +57,14 @@ export const TableScrollbar = style({
   height: 'calc(100% - 120px)',
   borderRadius: '4px',
 });
-
 export const scrollbarThumb = style({
   position: 'relative',
-  background: 'var(--affine-divider-color)',
+  background: cssVar('dividerColor'),
   width: '50%',
   overflow: 'hidden',
   borderRadius: '4px',
   ':hover': {
-    background: 'var(--affine-icon-color)',
+    background: cssVar('iconColor'),
   },
   selectors: {
     '&::before': {