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/core/src/pages/open-app.css.ts

@@ -1,19 +1,17 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   height: '100vh',
   width: '100vw',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  fontSize: 'var(--affine-font-base)',
+  fontSize: cssVar('fontBase'),
   position: 'relative',
 });
-
 export const affineLogo = style({
   color: 'inherit',
 });
-
 export const topNav = style({
   position: 'absolute',
   top: 0,
@@ -24,34 +22,29 @@ export const topNav = style({
   justifyContent: 'space-between',
   padding: '16px 120px',
 });
-
 export const topNavLinks = style({
   display: 'flex',
   columnGap: 4,
 });
-
 export const topNavLink = style({
-  color: 'var(--affine-text-primary-color)',
-  fontSize: 'var(--affine-font-sm)',
+  color: cssVar('textPrimaryColor'),
+  fontSize: cssVar('fontSm'),
   fontWeight: 500,
   textDecoration: 'none',
   padding: '4px 18px',
 });
-
 export const tryAgainLink = style({
-  color: 'var(--affine-link-color)',
+  color: cssVar('linkColor'),
   fontWeight: 500,
   textDecoration: 'none',
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
 });
-
 export const centerContent = style({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   marginTop: 40,
 });
-
 export const prompt = style({
   marginTop: 20,
   marginBottom: 12,

packages/frontend/core/src/pages/upgrade-success.css.ts

@@ -1,15 +1,15 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 export const leftContentText = style({
-  fontSize: 'var(--affine-font-base)',
+  fontSize: cssVar('fontBase'),
   fontWeight: 400,
   lineHeight: '1.6',
   maxWidth: '548px',
 });
-
 export const mail = style({
-  color: 'var(--affine-link-color)',
+  color: cssVar('linkColor'),
   textDecoration: 'none',
   ':visited': {
-    color: 'var(--affine-link-color)',
+    color: cssVar('linkColor'),
   },
 });

packages/frontend/core/src/pages/workspace/all-page/all-page.css.ts

@@ -1,19 +1,17 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   height: '100%',
   width: '100%',
   display: 'flex',
   flexFlow: 'column',
-  background: 'var(--affine-background-primary-color)',
+  background: cssVar('backgroundPrimaryColor'),
 });
-
 export const scrollContainer = style({
   flex: 1,
   width: '100%',
   paddingBottom: '32px',
 });
-
 export const headerCreateNewButton = style({
   transition: 'opacity 0.1s ease-in-out',
 });
@@ -24,12 +22,10 @@ export const headerCreateNewCollectionIconButton = style({
   height: '28px',
   borderRadius: '8px',
 });
-
 export const headerCreateNewButtonHidden = style({
   opacity: 0,
   pointerEvents: 'none',
 });
-
 export const headerRightWindows = style({
   display: 'flex',
   alignItems: 'center',

packages/frontend/core/src/pages/workspace/collection.css.ts

@@ -1,8 +1,8 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const placeholderButton = style({
   padding: '8px 18px',
-  border: '1px solid var(--affine-border-color)',
+  border: `1px solid ${cssVar('borderColor')}`,
   borderRadius: 8,
   display: 'flex',
   alignItems: 'center',
@@ -12,7 +12,7 @@ export const placeholderButton = style({
   fontSize: 15,
   lineHeight: '24px',
   ':hover': {
-    backgroundColor: 'var(--affine-hover-color)',
+    backgroundColor: cssVar('hoverColor'),
   },
 });
 export const button = style({
@@ -20,6 +20,6 @@ export const button = style({
   borderRadius: 4,
   cursor: 'pointer',
   ':hover': {
-    backgroundColor: 'var(--affine-hover-color)',
+    backgroundColor: cssVar('hoverColor'),
   },
 });

packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.css.ts

@@ -1,4 +1,4 @@
-import type { ComplexStyleRule } from '@vanilla-extract/css';
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
 export const header = style({
@@ -7,11 +7,14 @@ export const header = style({
   width: '100%',
   alignItems: 'center',
   flexShrink: 0,
-  background: 'var(--affine-background-primary-color)',
-  borderBottom: '1px solid var(--affine-border-color)',
+  background: cssVar('backgroundPrimaryColor'),
+  borderBottom: `1px solid ${cssVar('borderColor')}`,
   selectors: {
     '&[data-sidebar-floating="false"]': {
-      WebkitAppRegion: 'drag',
+      ['WebkitAppRegion' as string]: 'drag',
+    },
+    '&:has([data-popper-placement])': {
+      ['WebkitAppRegion' as string]: 'no-drag',
     },
   },
   '@media': {
@@ -19,11 +22,7 @@ export const header = style({
       display: 'none',
     },
   },
-  ':has([data-popper-placement])': {
-    WebkitAppRegion: 'no-drag',
-  },
-} as ComplexStyleRule);
-
+});
 export const mainHeader = style([
   header,
   {
@@ -31,7 +30,6 @@ export const mainHeader = style([
     gap: 12,
   },
 ]);
-
 export const sidebarHeader = style([
   header,
   {
@@ -39,18 +37,15 @@ export const sidebarHeader = style([
     gap: '12px',
   },
 ]);
-
 export const mainHeaderRight = style({
   display: 'flex',
   alignItems: 'center',
   gap: '8px',
 });
-
 export const spacer = style({
   flexGrow: 1,
   minWidth: 12,
 });
-
 export const standaloneExtensionSwitcherWrapper = style({
   display: 'flex',
   alignItems: 'center',
@@ -59,7 +54,6 @@ export const standaloneExtensionSwitcherWrapper = style({
   height: '52px',
   position: 'relative',
 });
-
 export const journalWeekPicker = style({
   minWidth: 100,
   flexGrow: 1,

packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts

@@ -1,12 +1,11 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'flex',
   height: '100%',
   overflow: 'hidden',
   width: '100%',
 });
-
 export const mainContainer = style({
   display: 'flex',
   flex: 1,
@@ -15,14 +14,13 @@ export const mainContainer = style({
   flexDirection: 'column',
   minWidth: 0,
   overflow: 'hidden',
-  background: 'var(--affine-background-primary-color)',
+  background: cssVar('backgroundPrimaryColor'),
   selectors: {
     [`${root}[data-client-border=true] &`]: {
       borderRadius: '4px',
     },
   },
 });
-
 export const editorContainer = style({
   position: 'relative',
   display: 'flex',
@@ -31,7 +29,6 @@ export const editorContainer = style({
   overflow: 'hidden',
   zIndex: 0,
 });
-
 export const sidebarContainer = style({
   display: 'flex',
   flexShrink: 0,
@@ -41,14 +38,13 @@ export const sidebarContainer = style({
       paddingLeft: 9,
     },
     [`${root}[data-client-border=false] &`]: {
-      borderLeft: '1px solid var(--affine-border-color)',
+      borderLeft: `1px solid ${cssVar('borderColor')}`,
     },
   },
 });
-
 export const sidebarContainerInner = style({
   display: 'flex',
-  background: 'var(--affine-background-primary-color)',
+  background: cssVar('backgroundPrimaryColor'),
   flexDirection: 'column',
   overflow: 'hidden',
   height: '100%',

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/editor-sidebar.css.ts

@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'flex',
   flexDirection: 'column',

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.css.ts

@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'flex',
   height: '100%',

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/extensions.css.ts

@@ -1,7 +1,6 @@
+import { cssVar } from '@toeverything/theme';
 import { createVar, style } from '@vanilla-extract/css';
-
 export const activeIdx = createVar();
-
 export const switchRoot = style({
   vars: {
     [activeIdx]: '0',
@@ -13,30 +12,27 @@ export const switchRoot = style({
   borderRadius: '12px',
   padding: '4px',
   position: 'relative',
-  background: 'var(--affine-background-secondary-color)',
-
+  background: cssVar('backgroundSecondaryColor'),
   '::after': {
     content: '""',
     display: 'block',
     width: '24px',
     height: '24px',
-    background: 'var(--affine-background-primary-color)',
-    boxShadow: 'var(--affine-shadow-1)',
+    background: cssVar('backgroundPrimaryColor'),
+    boxShadow: cssVar('shadow1'),
     borderRadius: '8px',
     position: 'absolute',
     transform: `translateX(calc(${activeIdx} * 32px))`,
     transition: 'all .15s',
   },
 });
-
 export const button = style({
   width: '24px',
   height: '24px',
   borderRadius: '8px',
-  color: 'var(--affine-icon-color)',
+  color: cssVar('iconColor'),
   position: 'relative',
   zIndex: 1,
-
   selectors: {
     '&[data-active=true]': {
       pointerEvents: 'none',

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.css.ts

@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'flex',
   height: '100%',

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.css.ts

@@ -1,12 +1,11 @@
+import { cssVar } from '@toeverything/theme';
 import { globalStyle, style } from '@vanilla-extract/css';
-
 const interactive = style({
   position: 'relative',
   cursor: 'pointer',
-
   selectors: {
     '&:hover': {
-      backgroundColor: 'var(--affine-hover-color)',
+      backgroundColor: cssVar('hoverColor'),
     },
     '&::before': {
       content: '""',
@@ -14,7 +13,7 @@ const interactive = style({
       inset: 0,
       opacity: 0,
       borderRadius: 'inherit',
-      boxShadow: '0 0 0 3px var(--affine-primary-color)',
+      boxShadow: `0 0 0 3px ${cssVar('primaryColor')}`,
       pointerEvents: 'none',
     },
     '&::after': {
@@ -22,22 +21,20 @@ const interactive = style({
       position: 'absolute',
       inset: 0,
       borderRadius: 'inherit',
-      boxShadow: '0 0 0 0px var(--affine-primary-color)',
+      boxShadow: `0 0 0 0px ${cssVar('primaryColor')}`,
       pointerEvents: 'none',
     },
     '&:focus-visible::before': {
       opacity: 0.2,
     },
     '&:focus-visible::after': {
-      boxShadow: '0 0 0 1px var(--affine-primary-color)',
+      boxShadow: `0 0 0 1px ${cssVar('primaryColor')}`,
     },
   },
 });
-
 export const calendar = style({
   padding: '16px',
 });
-
 export const journalPanel = style({
   width: '100%',
   height: '100%',
@@ -45,7 +42,6 @@ export const journalPanel = style({
   flexDirection: 'column',
   alignItems: 'stretch',
 });
-
 export const dailyCount = style({
   height: 0,
   flexGrow: 1,
@@ -53,7 +49,6 @@ export const dailyCount = style({
   flexDirection: 'column',
   gap: 8,
 });
-
 export const dailyCountHeader = style({
   display: 'flex',
   alignItems: 'center',
@@ -61,7 +56,6 @@ export const dailyCountHeader = style({
   padding: '0 16px',
   gap: 8,
 });
-
 export const dailyCountNav = style([
   interactive,
   {
@@ -76,18 +70,16 @@ export const dailyCountNav = style([
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    color: 'var(--affine-text-secondary-color)',
+    color: cssVar('textSecondaryColor'),
     transition: 'all .3s',
-
     selectors: {
       '&[aria-selected="true"]': {
-        backgroundColor: 'var(--affine-background-tertiary-color)',
-        color: 'var(--affine-text-primary-color)',
+        backgroundColor: cssVar('backgroundTertiaryColor'),
+        color: cssVar('textPrimaryColor'),
       },
     },
   },
 ]);
-
 export const dailyCountContainer = style({
   height: 0,
   flexGrow: 1,
@@ -115,10 +107,9 @@ export const dailyCountEmpty = style({
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-
   lineHeight: '24px',
   fontSize: 15,
-  color: 'var(--affine-text-secondary-color)',
+  color: cssVar('textSecondaryColor'),
   textAlign: 'center',
   padding: '0 70px',
   fontWeight: 400,
@@ -135,10 +126,9 @@ export const pageItem = style([
     padding: '0 4px',
     gap: 8,
     height: 30,
-
     selectors: {
       '&[aria-selected="true"]': {
-        backgroundColor: 'var(--affine-hover-color)',
+        backgroundColor: cssVar('hoverColor'),
       },
     },
   },
@@ -146,7 +136,7 @@ export const pageItem = style([
 export const pageItemIcon = style({
   width: 20,
   height: 20,
-  color: 'var(--affine-icon-color)',
+  color: cssVar('iconColor'),
 });
 export const pageItemLabel = style({
   width: 0,
@@ -155,13 +145,13 @@ export const pageItemLabel = style({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   fontWeight: 500,
-  fontSize: 'var(--affine-font-size-sm)',
-  color: 'var(--affine-text-primary-color)',
+  fontSize: cssVar('fontSm'),
+  color: cssVar('textPrimaryColor'),
   textAlign: 'left',
   selectors: {
     '[aria-selected="true"] &': {
       // TODO: wait for design
-      color: 'var(--affine-primary-color)',
+      color: cssVar('primaryColor'),
     },
   },
 });
@@ -179,11 +169,11 @@ export const journalConflictWrapper = style({
 export const journalConflictMoreTrigger = style([
   interactive,
   {
-    color: 'var(--affine-text-secondary-color)',
+    color: cssVar('textSecondaryColor'),
     height: 30,
     borderRadius: 4,
     padding: '0px 8px',
-    fontSize: 'var(--affine-font-size-sm)',
+    fontSize: cssVar('fontSm'),
     display: 'flex',
     alignItems: 'center',
   },
@@ -195,8 +185,8 @@ globalStyle(
   `.${journalPanel}[data-is-journal="false"] .react-datepicker__day[aria-selected="true"]`,
   {
     backgroundColor: 'transparent',
-    color: 'var(--affine-text-primary-color)',
+    color: cssVar('textPrimaryColor'),
     fontWeight: 500,
-    border: '1px solid var(--affine-primary-color)',
+    border: `1px solid ${cssVar('primaryColor')}`,
   }
 );

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.css.ts

@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'flex',
   height: '100%',

packages/frontend/core/src/pages/workspace/page-list-empty.css.ts

@@ -1,24 +1,22 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const pageListEmptyStyle = style({
   height: 'calc(100% - 52px)',
 });
-
 export const emptyDescButton = style({
   cursor: 'pointer',
-  color: 'var(--affine-text-secondary-color)',
-  background: 'var(--affine-background-code-block)',
-  border: '1px solid var(--affine-border-color)',
+  color: cssVar('textSecondaryColor'),
+  background: cssVar('backgroundCodeBlock'),
+  border: `1px solid ${cssVar('borderColor')}`,
   borderRadius: '4px',
   padding: '0 6px',
   boxSizing: 'border-box',
   selectors: {
     '&:hover': {
-      background: 'var(--affine-hover-color)',
+      background: cssVar('hoverColor'),
     },
   },
 });
-
 export const emptyDescKbd = style([
   emptyDescButton,
   {

packages/frontend/core/src/pages/workspace/trash-page.css.ts

@@ -1,7 +1,6 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export { root } from './all-page/all-page.css';
-
 export const trashTitle = style({
   display: 'flex',
   alignItems: 'center',
@@ -9,8 +8,7 @@ export const trashTitle = style({
   padding: '0 8px',
   fontWeight: 600,
 });
-
 export const trashIcon = style({
-  color: 'var(--affine-icon-color)',
-  fontSize: 'var(--affine-font-h-5)',
+  color: cssVar('iconColor'),
+  fontSize: cssVar('fontH5'),
 });