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

@@ -1,10 +1,10 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const browserWarningStyle = style({
-  backgroundColor: 'var(--affine-background-warning-color)',
-  color: 'var(--affine-warning-color)',
+  backgroundColor: cssVar('backgroundWarningColor'),
+  color: cssVar('warningColor'),
   height: '36px',
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -13,7 +13,7 @@ export const browserWarningStyle = style({
 export const closeButtonStyle = style({
   width: '36px',
   height: '36px',
-  color: 'var(--affine-icon-color)',
+  color: cssVar('iconColor'),
   cursor: 'pointer',
   display: 'flex',
   justifyContent: 'flex-end',
@@ -28,10 +28,10 @@ export const closeIconStyle = style({
   zIndex: 1,
 });
 export const tipsContainer = style({
-  backgroundColor: 'var(--affine-background-error-color)',
-  color: 'var(--affine-error-color)',
+  backgroundColor: cssVar('backgroundErrorColor'),
+  color: cssVar('errorColor'),
   width: '100%',
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   fontWeight: '700',
   display: 'flex',
   justifyContent: 'space-between',
@@ -46,13 +46,11 @@ export const tipsContainer = style({
     },
   },
 });
-
 export const tipsMessage = style({
-  color: 'var(--affine-error-color)',
+  color: cssVar('errorColor'),
   flexGrow: 1,
   flexShrink: 1,
 });
-
 export const tipsRightItem = style({
   display: 'flex',
   flexShrink: 0,

packages/frontend/component/src/components/affine-other-page-layout/index.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',
   flexDirection: 'column',
-  fontSize: 'var(--affine-font-base)',
+  fontSize: cssVar('fontBase'),
   position: 'relative',
-  background: 'var(--affine-background-primary-color)',
+  background: cssVar('backgroundPrimaryColor'),
 });
-
 export const affineLogo = style({
   color: 'inherit',
 });
-
 export const topNav = style({
   top: 0,
   left: 0,
@@ -28,43 +26,38 @@ export const topNav = style({
     },
   },
 });
-
 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 iconButton = style({
   fontSize: '24px',
   pointerEvents: 'auto',
   selectors: {
     '&.plain': {
-      color: 'var(--affine-text-primary-color)',
+      color: cssVar('textPrimaryColor'),
     },
   },
 });
-
 export const menu = style({
   width: '100vw',
   height: '100vh',
   padding: '0',
-  background: 'var(--affine-background-primary-color)',
+  background: cssVar('backgroundPrimaryColor'),
   borderRadius: '0',
   border: 'none',
   boxShadow: 'none',
 });
-
 export const menuItem = style({
-  color: 'var(--affine-text-primary-color)',
-  fontSize: 'var(--affine-font-sm)',
+  color: cssVar('textPrimaryColor'),
+  fontSize: cssVar('fontSm'),
   fontWeight: 500,
   textDecoration: 'none',
   padding: '12px 20px',
@@ -80,7 +73,7 @@ export const menuItem = style({
       display: 'block',
       width: 'calc(100% - 40px)',
       height: '0.5px',
-      background: 'var(--affine-black-10)',
+      background: cssVar('black10'),
     },
     '&:not(:last-of-type)': {
       marginBottom: '0',

packages/frontend/component/src/components/app-sidebar/add-page-button/index.css.ts

@@ -1,12 +1,12 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'inline-flex',
-  background: 'var(--affine-white-30)',
+  background: cssVar('white30'),
   alignItems: 'center',
   borderRadius: '8px',
-  border: '1px solid var(--affine-black-10)',
-  fontSize: 'var(--affine-font-sm)',
+  border: `1px solid ${cssVar('black10')}`,
+  fontSize: cssVar('fontSm'),
   width: '100%',
   position: 'relative',
   height: '52px',
@@ -16,17 +16,15 @@ export const root = style({
   transition: 'background 0.2s ease',
   selectors: {
     '&:active': {
-      background: 'var(--affine-white-40)',
+      background: cssVar('white50'),
     },
   },
 });
-
 export const icon = style({
   marginRight: '18px',
-  color: 'var(--affine-icon-color)',
+  color: cssVar('iconColor'),
   fontSize: '24px',
 });
-
 export const spacer = style({
   flex: 1,
 });

packages/frontend/component/src/components/app-sidebar/app-download-button/index.css.ts

@@ -1,3 +1,4 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 export {
   closeIcon,
@@ -7,16 +8,14 @@ export {
   particles,
   root,
 } from '../app-updater-button/index.css';
-
 export const rootPadding = style({
   padding: '0 24px',
 });
-
 export const label = style({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
   height: '100%',
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   whiteSpace: 'nowrap',
 });

packages/frontend/component/src/components/app-sidebar/app-updater-button/index.css.ts

@@ -1,12 +1,12 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'inline-flex',
-  background: 'var(--affine-white-30)',
+  background: cssVar('white30'),
   alignItems: 'center',
   borderRadius: '8px',
-  border: '1px solid var(--affine-black-10)',
-  fontSize: 'var(--affine-font-sm)',
+  border: `1px solid ${cssVar('black10')}`,
+  fontSize: cssVar('fontSm'),
   width: '100%',
   height: '52px',
   userSelect: 'none',
@@ -16,7 +16,7 @@ export const root = style({
   transition: 'all 0.3s ease',
   selectors: {
     '&:hover': {
-      background: 'var(--affine-white-60)',
+      background: cssVar('white60'),
     },
     '&[data-disabled="true"]': {
       pointerEvents: 'none',
@@ -28,7 +28,7 @@ export const root = style({
       right: '-2px',
       width: '8px',
       height: '8px',
-      backgroundColor: 'var(--affine-primary-color)',
+      backgroundColor: cssVar('primaryColor'),
       borderRadius: '50%',
       zIndex: 1,
       transition: 'opacity 0.3s',
@@ -41,13 +41,11 @@ export const root = style({
     '--svg-dot-animation': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 122 116'%3E%3Cpath id='b' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M17.9256 115C17.434 111.774 13.1701 104.086 13.4282 95.6465C13.6862 87.207 18.6628 76.0721 17.9256 64.3628C17.1883 52.6535 8.7772 35.9512 9.00452 25.3907C9.23185 14.8302 16.2114 5.06512 17.9256 1'/%3E%3Cpath id='d' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M84.1628 115C85.2376 112.055 94.5618 98.8394 93.9975 91.1338C93.4332 83.4281 82.5505 73.2615 84.1628 62.5704C85.775 51.8793 96.4803 35.4248 95.9832 25.7826C95.4861 16.1404 87.9113 4.71163 84.1628 1'/%3E%3Cpath id='f' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M37.0913 115C37.9604 111.921 44.4347 99.4545 45.3816 92.9773C48.9305 68.7011 35.7877 73.9552 37.0913 62.7781C38.3949 51.6011 47.3889 36.9895 46.9869 26.9091C46.585 16.8286 40.1222 4.88034 37.0913 1'/%3E%3Cpath id='h' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M112.443 115C111.698 112.235 108.25 106.542 107.715 93.7582C107.241 82.4286 107.229 83.9543 112.443 66.1429C116.085 44.0408 100.661 42.5908 101.006 33.539C101.35 24.4871 109.843 4.48439 112.443 1'/%3E%3Cg%3E%3Ccircle r='1.5' fill='rgba(30, 150, 235, 0.3)'%3E%3CanimateMotion dur='10s' repeatCount='indefinite'%3E%3Cmpath href='%23b' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='1' fill='rgba(30, 150, 235, 0.3)' fill-opacity='1' shape-rendering='crispEdges'%3E%3CanimateMotion dur='8s' repeatCount='indefinite'%3E%3Cmpath href='%23d' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='.5' fill='rgba(30, 150, 235, 0.3)' fill-opacity='1' shape-rendering='crispEdges'%3E%3CanimateMotion dur='4s' repeatCount='indefinite'%3E%3Cmpath href='%23f' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='.8' fill='rgba(30, 150, 235, 0.3)' fill-opacity='1' shape-rendering='crispEdges'%3E%3CanimateMotion dur='6s' repeatCount='indefinite'%3E%3Cmpath href='%23h' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")`,
   },
 });
-
 export const icon = style({
   marginRight: '18px',
-  color: 'var(--affine-icon-color)',
+  color: cssVar('iconColor'),
   fontSize: '24px',
 });
-
 export const closeIcon = style({
   position: 'absolute',
   top: '4px',
@@ -57,9 +55,9 @@ export const closeIcon = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  boxShadow: 'var(--affine-shadow-1)',
-  color: 'var(--affine-text-secondary-color)',
-  backgroundColor: 'var(--affine-background-primary-color)',
+  boxShadow: cssVar('shadow1'),
+  color: cssVar('textSecondaryColor'),
+  backgroundColor: cssVar('backgroundPrimaryColor'),
   fontSize: '14px',
   cursor: 'pointer',
   transition: '0.1s',
@@ -77,17 +75,15 @@ export const closeIcon = style({
     },
   },
 });
-
 export const installLabel = style({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
   flex: 1,
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   whiteSpace: 'nowrap',
   justifyContent: 'space-between',
 });
-
 export const installLabelNormal = style([
   installLabel,
   {
@@ -98,7 +94,6 @@ export const installLabelNormal = style([
     },
   },
 ]);
-
 export const installLabelHover = style([
   installLabel,
   {
@@ -111,7 +106,6 @@ export const installLabelHover = style([
     },
   },
 ]);
-
 export const updateAvailableWrapper = style({
   display: 'flex',
   flexDirection: 'column',
@@ -120,11 +114,10 @@ export const updateAvailableWrapper = style({
   height: '100%',
   padding: '8px 0',
 });
-
 export const versionLabel = style({
   padding: '0 6px',
-  color: 'var(--affine-text-secondary-color)',
-  background: 'var(--affine-background-primary-color)',
+  color: cssVar('textSecondaryColor'),
+  background: cssVar('backgroundPrimaryColor'),
   fontSize: '10px',
   lineHeight: '18px',
   borderRadius: '4px',
@@ -132,13 +125,12 @@ export const versionLabel = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });
-
 export const whatsNewLabel = style({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
   height: '100%',
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   whiteSpace: 'nowrap',
 });
 export const ellipsisTextOverflow = style({
@@ -146,25 +138,22 @@ export const ellipsisTextOverflow = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });
-
 export const progress = style({
   position: 'relative',
   width: '100%',
   height: '4px',
   borderRadius: '12px',
-  background: 'var(--affine-black-10)',
+  background: cssVar('black10'),
 });
-
 export const progressInner = style({
   position: 'absolute',
   top: 0,
   left: 0,
   height: '100%',
   borderRadius: '12px',
-  background: 'var(--affine-primary-color)',
+  background: cssVar('primaryColor'),
   transition: '0.1s',
 });
-
 export const particles = style({
   background: `var(--svg-dot-animation), var(--svg-dot-animation)`,
   backgroundRepeat: 'no-repeat, repeat',
@@ -197,7 +186,6 @@ export const particles = style({
     },
   },
 });
-
 export const halo = style({
   overflow: 'hidden',
   position: 'absolute',

packages/frontend/component/src/components/app-sidebar/category-divider/index.css.ts

@@ -1,7 +1,7 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
-  fontSize: 'var(--affine-font-xs)',
+  fontSize: cssVar('fontXs'),
   minHeight: '16px',
   width: 'calc(100% + 6px)',
   userSelect: 'none',
@@ -16,7 +16,6 @@ export const root = style({
     },
   },
 });
-
 export const label = style({
-  color: 'var(--affine-black-30)',
+  color: cssVar('black30'),
 });

packages/frontend/component/src/components/app-sidebar/fallback.css.ts

@@ -1,10 +1,8 @@
 import { style } from '@vanilla-extract/css';
-
 export const fallbackStyle = style({
   margin: '12px 16px',
   height: '100%',
 });
-
 export const fallbackHeaderStyle = style({
   height: '56px',
   width: '100%',

packages/frontend/component/src/components/app-sidebar/index.css.ts

@@ -1,12 +1,10 @@
-import type { ComplexStyleRule } from '@vanilla-extract/css';
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const floatingMaxWidth = 768;
-
 export const navWrapperStyle = style({
   zIndex: 3,
   paddingBottom: '8px',
-  backgroundColor: 'var(--affine-background-primary-color)',
+  backgroundColor: cssVar('backgroundPrimaryColor'),
   '@media': {
     print: {
       display: 'none',
@@ -15,23 +13,20 @@ export const navWrapperStyle = style({
   },
   selectors: {
     '&[data-has-border=true]': {
-      borderRight: '1px solid var(--affine-border-color)',
+      borderRight: `1px solid ${cssVar('borderColor')}`,
     },
   },
 });
-
 export const navHeaderButton = style({
   width: '32px',
   height: '32px',
   flexShrink: 0,
 });
-
 export const navHeaderNavigationButtons = style({
   display: 'flex',
   alignItems: 'center',
   columnGap: '32px',
 });
-
 export const navStyle = style({
   position: 'relative',
   width: '100%',
@@ -39,7 +34,6 @@ export const navStyle = style({
   display: 'flex',
   flexDirection: 'column',
 });
-
 export const navHeaderStyle = style({
   flex: '0 0 auto',
   height: '52px',
@@ -47,14 +41,13 @@ export const navHeaderStyle = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  WebkitAppRegion: 'drag',
+  ['WebkitAppRegion' as string]: 'drag',
   selectors: {
     '&[data-is-macos-electron="true"]': {
       paddingLeft: '90px',
     },
   },
-} as ComplexStyleRule);
-
+});
 export const navBodyStyle = style({
   flex: '1 1 auto',
   height: 'calc(100% - 52px)',
@@ -62,7 +55,6 @@ export const navBodyStyle = style({
   flexDirection: 'column',
   rowGap: '4px',
 });
-
 export const sidebarFloatMaskStyle = style({
   transition: 'opacity .15s',
   opacity: 0,
@@ -72,7 +64,7 @@ export const sidebarFloatMaskStyle = style({
   left: 0,
   right: '100%',
   bottom: 0,
-  background: 'var(--affine-background-modal-color)',
+  background: cssVar('backgroundModalColor'),
   selectors: {
     '&[data-open="true"][data-is-floating="true"]': {
       opacity: 1,

packages/frontend/component/src/components/app-sidebar/menu-item/index.css.ts

@@ -1,10 +1,9 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const linkItemRoot = style({
   color: 'inherit',
   display: 'contents',
 });
-
 export const root = style({
   display: 'inline-flex',
   alignItems: 'center',
@@ -16,19 +15,19 @@ export const root = style({
   userSelect: 'none',
   cursor: 'pointer',
   padding: '0 12px',
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   marginTop: '4px',
   position: 'relative',
   selectors: {
     '&:hover': {
-      background: 'var(--affine-hover-color)',
+      background: cssVar('hoverColor'),
     },
     '&[data-active="true"]': {
-      background: 'var(--affine-hover-color)',
+      background: cssVar('hoverColor'),
     },
     '&[data-disabled="true"]': {
       cursor: 'default',
-      color: 'var(--affine-text-secondary-color)',
+      color: cssVar('textSecondaryColor'),
       pointerEvents: 'none',
     },
     // this is not visible in dark mode
@@ -53,14 +52,12 @@ export const root = style({
     },
   },
 });
-
 export const content = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   flex: 1,
 });
-
 export const postfix = style({
   right: '4px',
   position: 'absolute',
@@ -75,12 +72,10 @@ export const postfix = style({
     },
   },
 });
-
 export const icon = style({
-  color: 'var(--affine-icon-color)',
+  color: cssVar('iconColor'),
   fontSize: '20px',
 });
-
 export const collapsedIconContainer = style({
   width: '16px',
   height: '16px',
@@ -99,11 +94,10 @@ export const collapsedIconContainer = style({
       pointerEvents: 'none',
     },
     '&:hover': {
-      background: 'var(--affine-hover-color)',
+      background: cssVar('hoverColor'),
     },
   },
 });
-
 export const iconsContainer = style({
   display: 'flex',
   alignItems: 'center',
@@ -116,7 +110,6 @@ export const iconsContainer = style({
     },
   },
 });
-
 export const collapsedIcon = style({
   transition: 'transform 0.2s ease-in-out',
   selectors: {
@@ -125,7 +118,6 @@ export const collapsedIcon = style({
     },
   },
 });
-
 export const spacer = style({
   flex: 1,
 });

packages/frontend/component/src/components/app-sidebar/quick-search-input/index.css.ts

@@ -1,12 +1,12 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'inline-flex',
-  background: 'var(--affine-white-10)',
+  background: cssVar('white10'),
   alignItems: 'center',
   borderRadius: '8px',
-  border: '1px solid var(--affine-black-10)',
-  fontSize: 'var(--affine-font-sm)',
+  border: `1px solid ${cssVar('black10')}`,
+  fontSize: cssVar('fontSm'),
   width: '100%',
   height: '36px',
   userSelect: 'none',
@@ -15,18 +15,15 @@ export const root = style({
   margin: '20px 0',
   position: 'relative',
 });
-
 export const icon = style({
   marginRight: '8px',
-  color: 'var(--affine-icon-color)',
+  color: cssVar('iconColor'),
   fontSize: '20px',
 });
-
 export const spacer = style({
   flex: 1,
 });
-
 export const shortcutHint = style({
-  color: 'var(--affine-black-30)',
-  fontSize: 'var(--affine-font-base)',
+  color: cssVar('black30'),
+  fontSize: cssVar('fontBase'),
 });

packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.css.ts

@@ -1,11 +1,10 @@
+import { cssVar } from '@toeverything/theme';
 import { globalStyle, style } from '@vanilla-extract/css';
-
 export const baseContainer = style({
   padding: '4px 16px',
   display: 'flex',
   flexFlow: 'column nowrap',
 });
-
 export const scrollableContainerRoot = style({
   flex: '1 1 auto',
   overflowY: 'hidden',
@@ -13,7 +12,6 @@ export const scrollableContainerRoot = style({
     '--scrollbar-width': '10px',
   },
 });
-
 export const scrollTopBorder = style({
   position: 'absolute',
   top: 0,
@@ -22,24 +20,21 @@ export const scrollTopBorder = style({
   height: '1px',
   transition: 'opacity .3s .2s',
   opacity: 0,
-  background: 'var(--affine-black-10)',
+  background: cssVar('black10'),
   selectors: {
     '&[data-has-scroll-top="true"]': {
       opacity: 1,
     },
   },
 });
-
 export const scrollableViewport = style({
   height: '100%',
   marginTop: '4px',
 });
-
 globalStyle(`${scrollableViewport} > div`, {
   maxWidth: '100%',
   display: 'block !important',
 });
-
 export const scrollableContainer = style([
   baseContainer,
   {
@@ -47,7 +42,6 @@ export const scrollableContainer = style([
     padding: '4px 8px',
   },
 ]);
-
 export const scrollbar = style({
   display: 'flex',
   flexDirection: 'column',
@@ -64,10 +58,9 @@ export const scrollbar = style({
     },
   },
 });
-
 export const scrollbarThumb = style({
   position: 'relative',
-  background: 'var(--affine-black-30)',
+  background: cssVar('black30'),
   borderRadius: '4px',
   overflow: 'hidden',
   selectors: {

packages/frontend/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts

@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-
 export const sidebarSwitch = style({
   opacity: 0,
   display: 'none !important',

packages/frontend/component/src/components/app-sidebar/spolight/index.css.ts

@@ -1,10 +1,8 @@
 import { createVar, style } from '@vanilla-extract/css';
-
 export const spotlightX = createVar();
 export const spotlightY = createVar();
 export const spotlightOpacity = createVar();
 export const spotlightSize = createVar();
-
 export const spotlight = style({
   vars: {
     [spotlightX]: '0px',

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'),
     },
   },
 });

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'),
     },
   },
 });

packages/frontend/component/src/components/auth-components/share.css.ts

@@ -1,17 +1,15 @@
+import { cssVar } from '@toeverything/theme';
 import { globalStyle, keyframes, style } from '@vanilla-extract/css';
-
 export const modalHeaderWrapper = style({});
-
 globalStyle(`${modalHeaderWrapper} .logo`, {
-  fontSize: 'var(--affine-font-h-3)',
+  fontSize: cssVar('fontH3'),
   fontWeight: 600,
-  color: 'var(--affine-blue)',
+  color: cssVar('blue'),
   marginRight: '6px',
   verticalAlign: 'middle',
 });
-
 globalStyle(`${modalHeaderWrapper} > p:first-of-type`, {
-  fontSize: 'var(--affine-font-h-5)',
+  fontSize: cssVar('fontH5'),
   fontWeight: 600,
   marginBottom: '4px',
   lineHeight: '28px',
@@ -19,11 +17,10 @@ globalStyle(`${modalHeaderWrapper} > p:first-of-type`, {
   alignItems: 'center',
 });
 globalStyle(`${modalHeaderWrapper} > p:last-of-type`, {
-  fontSize: 'var(--affine-font-h-4)',
+  fontSize: cssVar('fontH4'),
   fontWeight: 600,
   lineHeight: '28px',
 });
-
 export const authInputWrapper = style({
   paddingBottom: '30px',
   position: 'relative',
@@ -33,34 +30,39 @@ export const authInputWrapper = style({
     },
   },
 });
-
 globalStyle(`${authInputWrapper} label`, {
   display: 'block',
   color: 'var(--light-text-color-text-secondary-color, #8E8D91)',
   marginBottom: '4px',
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   fontWeight: 600,
   lineHeight: '22px',
 });
 export const formHint = style({
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   position: 'absolute',
   bottom: '4px',
   left: 0,
   lineHeight: '22px',
   selectors: {
     '&.error': {
-      color: 'var(--affine-error-color)',
+      color: cssVar('errorColor'),
     },
     '&.warning': {
-      color: 'var(--affine-warning-color)',
+      color: cssVar('warningColor'),
     },
   },
 });
 const rotate = keyframes({
-  '0%': { transform: 'rotate(0deg)' },
-  '50%': { transform: 'rotate(180deg)' },
-  '100%': { transform: 'rotate(360deg)' },
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '50%': {
+    transform: 'rotate(180deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
 });
 export const loading = style({
   width: '15px',
@@ -68,7 +70,7 @@ export const loading = style({
   position: 'relative',
   borderRadius: '50%',
   overflow: 'hidden',
-  backgroundColor: 'var(--affine-border-color)',
+  backgroundColor: cssVar('borderColor'),
   selectors: {
     '&::after': {
       content: '""',
@@ -88,7 +90,7 @@ export const loading = style({
       content: '""',
       width: '20px',
       height: '20px',
-      backgroundColor: 'var(--affine-blue)',
+      backgroundColor: cssVar('blue'),
       position: 'absolute',
       left: '50%',
       bottom: '50%',
@@ -98,16 +100,14 @@ export const loading = style({
     },
   },
 });
-
 export const authContent = style({
-  fontSize: 'var(--affine-font-base)',
-  lineHeight: 'var(--affine-font-h-3)',
+  fontSize: cssVar('fontBase'),
+  lineHeight: cssVar('fontH3'),
   marginTop: '30px',
 });
 globalStyle(`${authContent} a`, {
-  color: 'var(--affine-link-color)',
+  color: cssVar('linkColor'),
 });
-
 export const authCodeContainer = style({
   paddingBottom: '40px',
   position: 'relative',
@@ -117,10 +117,9 @@ export const authCodeWrapper = style({
   justifyContent: 'space-between',
   alignItems: 'center',
 });
-
 export const authCodeErrorMessage = style({
-  color: 'var(--affine-error-color)',
-  fontSize: 'var(--affine-font-sm)',
+  color: cssVar('errorColor'),
+  fontSize: cssVar('fontSm'),
   textAlign: 'center',
   lineHeight: '1.5',
   position: 'absolute',
@@ -129,7 +128,6 @@ export const authCodeErrorMessage = style({
   bottom: 5,
   margin: 'auto',
 });
-
 export const resendButtonWrapper = style({
   height: 32,
   display: 'flex',
@@ -137,20 +135,18 @@ export const resendButtonWrapper = style({
   alignItems: 'center',
   marginTop: 30,
 });
-
 globalStyle(`${resendButtonWrapper} .resend-code-hint`, {
   fontWeight: 600,
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   marginRight: 8,
 });
-
 export const authPageContainer = style({
   height: '100vh',
   width: '100vw',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  fontSize: 'var(--affine-font-base)',
+  fontSize: cssVar('fontBase'),
   '@media': {
     'screen and (max-width: 1024px)': {
       flexDirection: 'column',
@@ -171,25 +167,21 @@ globalStyle(`${authPageContainer} .wrapper`, {
 globalStyle(`${authPageContainer} .content`, {
   maxWidth: '700px',
 });
-
 globalStyle(`${authPageContainer} .title`, {
-  fontSize: 'var(--affine-font-title)',
+  fontSize: cssVar('fontTitle'),
   fontWeight: 600,
   marginBottom: '28px',
 });
-
 globalStyle(`${authPageContainer} .subtitle`, {
   marginBottom: '28px',
 });
 globalStyle(`${authPageContainer} a`, {
-  color: 'var(--affine-link-color)',
+  color: cssVar('linkColor'),
 });
-
 export const signInPageContainer = style({
   width: '400px',
   margin: '205px auto 0',
 });
-
 export const input = style({
   width: '330px',
   '@media': {

packages/frontend/component/src/components/card/block-card/styles.css.ts

@@ -1,44 +1,41 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const blockCard = style({
   display: 'flex',
   gap: '12px',
   padding: '8px 12px',
-  color: 'var(--affine-text-primary-color)',
-  backgroundColor: 'var(--affine-white-80)',
+  color: cssVar('textPrimaryColor'),
+  backgroundColor: cssVar('white80'),
   borderRadius: '8px',
   userSelect: 'none',
   cursor: 'pointer',
   textAlign: 'start',
-  boxShadow: 'var(--affine-shadow-1)',
+  boxShadow: cssVar('shadow1'),
   selectors: {
     '&:hover': {
-      backgroundColor: 'var(--affine-hover-color)',
+      backgroundColor: cssVar('hoverColor'),
     },
     '&[aria-disabled]': {
-      color: 'var(--affine-text-disable-color)',
+      color: cssVar('textDisableColor'),
     },
     '&[aria-disabled]:hover': {
-      backgroundColor: 'var(--affine-white-80)',
+      backgroundColor: cssVar('white80'),
       cursor: 'not-allowed',
     },
     // TODO active styles
   },
 });
-
 export const blockCardAround = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
 });
-
 export const blockCardContent = style({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
 });
-
 export const blockCardDesc = style({
-  color: 'var(--affine-text-secondary-color)',
-  fontSize: 'var(--affine-font-xs)',
+  color: cssVar('textSecondaryColor'),
+  fontSize: cssVar('fontXs'),
 });

packages/frontend/component/src/components/global-loading/index.css.ts

@@ -1,5 +1,5 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const globalLoadingWrapperStyle = style({
   position: 'fixed',
   top: 0,
@@ -7,13 +7,13 @@ export const globalLoadingWrapperStyle = style({
   bottom: 0,
   right: '100%',
   zIndex: 5,
-  backgroundColor: 'var(--affine-background-modal-color)',
+  backgroundColor: cssVar('backgroundModalColor'),
   opacity: 0,
   transition: 'opacity .3s',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  color: 'var(--affine-processing-color)',
+  color: cssVar('processingColor'),
   '@media': {
     print: {
       display: 'none',

packages/frontend/component/src/components/import-page/index.css.ts

@@ -1,5 +1,5 @@
+import { cssVar } from '@toeverything/theme';
 import { globalStyle, style } from '@vanilla-extract/css';
-
 export const importPageContainerStyle = style({
   position: 'relative',
   display: 'flex',
@@ -8,11 +8,10 @@ export const importPageContainerStyle = style({
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: '12px',
-  boxShadow: 'var(--affine-popover-shadow)',
-  background: 'var(--affine-background-overlay-panel-color)',
+  boxShadow: cssVar('popoverShadow'),
+  background: cssVar('backgroundOverlayPanelColor'),
   overflow: 'hidden',
 });
-
 export const importPageBodyStyle = style({
   display: 'flex',
   padding: '32px 40px 20px 40px',
@@ -20,7 +19,6 @@ export const importPageBodyStyle = style({
   gap: '20px',
   alignSelf: 'stretch',
 });
-
 export const importPageButtonContainerStyle = style({
   display: 'grid',
   gridTemplateColumns: '1fr 1fr',
@@ -30,16 +28,14 @@ export const importPageButtonContainerStyle = style({
   gap: '20px',
   alignSelf: 'stretch',
 });
-
 globalStyle(`${importPageBodyStyle} .title`, {
-  fontSize: 'var(--affine-font-h-6)',
+  fontSize: cssVar('fontH6'),
   fontWeight: 600,
 });
-
 globalStyle(`${importPageBodyStyle} a`, {
   whiteSpace: 'nowrap',
   wordBreak: 'break-word',
-  color: 'var(--affine-link-color)',
+  color: cssVar('linkColor'),
   textDecoration: 'none',
   cursor: 'pointer',
 });

packages/frontend/component/src/components/not-found-page/styles.css.ts

@@ -1,8 +1,8 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const notFoundPageContainer = style({
-  fontSize: 'var(--affine-font-base)',
-  color: 'var(--affine-text-primary-color)',
+  fontSize: cssVar('fontBase'),
+  color: cssVar('textPrimaryColor'),
   height: '100vh',
   display: 'flex',
   alignItems: 'center',
@@ -10,7 +10,6 @@ export const notFoundPageContainer = style({
   width: '100vw',
   padding: '0 20px',
 });
-
 export const wrapper = style({
   display: 'flex',
   alignItems: 'center',
@@ -18,5 +17,5 @@ export const wrapper = style({
   margin: '24px auto 0',
 });
 export const largeButtonEffect = style({
-  boxShadow: 'var(--affine-large-button-effect) !important',
+  boxShadow: `${cssVar('largeButtonEffect')} !important`,
 });

packages/frontend/component/src/components/notification-center/index.css.ts

@@ -1,9 +1,8 @@
+import { cssVar } from '@toeverything/theme';
 // Credits to sonner
 // License on the MIT
 // https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/styles.css
-
 import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
-
 export const notificationCenterViewportStyle = style({
   position: 'fixed',
   height: '500px',
@@ -29,7 +28,6 @@ globalStyle(`${notificationMultimediaStyle} > *`, {
   objectFit: 'cover',
   cursor: 'unset',
 });
-
 export const notificationStyle = style({
   position: 'absolute',
   borderRadius: '8px',
@@ -114,7 +112,7 @@ export const notificationIconStyle = style({
   fontSize: '24px',
   marginLeft: '18px',
   marginRight: '8px',
-  color: 'var(--affine-processing-color)',
+  color: cssVar('processingColor'),
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -127,9 +125,9 @@ export const hasMediaStyle = style({
   paddingBottom: '16px',
   width: '380px',
   borderRadius: '8px',
-  boxShadow: 'var(--affine-shadow-1)',
-  border: '1px solid var(--affine-border-color)',
-  background: 'var(--affine-white)',
+  boxShadow: cssVar('shadow1'),
+  border: `1px solid ${cssVar('borderColor')}`,
+  background: cssVar('white'),
   transition: 'all 0.3s',
 });
 export const notificationContentStyle = style({
@@ -140,9 +138,9 @@ export const notificationContentStyle = style({
   paddingBottom: '16px',
   width: '380px',
   borderRadius: '8px',
-  boxShadow: 'var(--affine-shadow-1)',
-  border: '1px solid var(--affine-black-10)',
-  background: 'var(--affine-white)',
+  boxShadow: cssVar('shadow1'),
+  border: `1px solid ${cssVar('black10')}`,
+  background: cssVar('white'),
   transition: 'all 0.3s',
 });
 export const notificationTitleContactStyle = style({
@@ -150,7 +148,7 @@ export const notificationTitleContactStyle = style({
   width: '200px',
   overflow: 'wrap',
   lineHeight: '24px',
-  fontSize: 'var(--affine-font-base)',
+  fontSize: cssVar('fontBase'),
 });
 export const notificationTitleStyle = style({
   display: 'flex',
@@ -159,14 +157,14 @@ export const notificationTitleStyle = style({
   justifyContent: 'flex-start',
 });
 export const notificationDescriptionStyle = style({
-  fontSize: 'var(--affine-font-sm)',
-  color: 'var(--affine-text-secondary-color)',
+  fontSize: cssVar('fontSm'),
+  color: cssVar('textSecondaryColor'),
   marginBottom: '4px',
   lineHeight: '22px',
 });
 export const notificationTimeStyle = style({
-  fontSize: 'var(--affine-font-sm)',
-  color: 'var(--affine-text-secondary-color)',
+  fontSize: cssVar('fontSm'),
+  color: cssVar('textSecondaryColor'),
   marginBottom: '4px',
 });
 export const closeButtonStyle = style({
@@ -192,20 +190,20 @@ export const closeButtonWithMediaStyle = style({
   alignItems: 'center',
   cursor: 'pointer',
   borderRadius: '4px',
-  color: 'var(--affine-pure-black)',
+  color: cssVar('pureBlack'),
   ':hover': {
-    background: 'var(--affine-hover-color)',
+    background: cssVar('hoverColor'),
   },
 });
 export const closeButtonColorStyle = style({
-  color: 'var(--affine-text-primary-color)',
+  color: cssVar('textPrimaryColor'),
 });
 export const undoButtonStyle = style({
-  fontSize: 'var(--affine-font-sm)',
-  background: 'var(--affine-hover-color)',
+  fontSize: cssVar('fontSm'),
+  background: cssVar('hoverColor'),
   padding: '3px 6px',
   borderRadius: '4px',
-  color: 'var(--affine-processing-color)',
+  color: cssVar('processingColor'),
   cursor: 'pointer',
 });
 export const undoButtonWithMediaStyle = style({
@@ -213,13 +211,13 @@ export const undoButtonWithMediaStyle = style({
   marginRight: '16px',
 });
 export const messageStyle = style({
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   width: '200px',
   marginLeft: '50px',
   lineHeight: '18px',
 });
 export const progressBarStyle = style({
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   width: '100%',
   height: '10px',
   marginTop: '10px',
@@ -228,42 +226,42 @@ export const progressBarStyle = style({
   marginBottom: '16px',
 });
 export const darkSuccessStyle = style({
-  background: 'var(--affine-success-color)',
+  background: cssVar('successColor'),
   borderRadius: '8px',
 });
 export const darkInfoStyle = style({
-  background: 'var(--affine-processing-color)',
+  background: cssVar('processingColor'),
   borderRadius: '8px',
 });
 export const darkErrorStyle = style({
-  background: 'var(--affine-error-color)',
+  background: cssVar('errorColor'),
   borderRadius: '8px',
 });
 export const darkWarningStyle = style({
-  background: 'var(--affine-warning-color)',
+  background: cssVar('warningColor'),
   borderRadius: '8px',
 });
 export const lightSuccessStyle = style({
-  background: 'var(--affine-background-success-color)',
+  background: cssVar('backgroundSuccessColor'),
   borderRadius: '8px',
 });
 export const lightInfoStyle = style({
-  background: 'var(--affine-background-processing-color)',
+  background: cssVar('backgroundProcessingColor'),
   borderRadius: '8px',
 });
 export const lightErrorStyle = style({
-  background: 'var(--affine-background-error-color)',
+  background: cssVar('backgroundErrorColor'),
   borderRadius: '8px',
 });
 export const lightWarningStyle = style({
-  background: 'var(--affine-background-warning-color)',
+  background: cssVar('backgroundWarningColor'),
   borderRadius: '8px',
 });
 export const darkColorStyle = style({
-  color: 'var(--affine-pure-white)',
+  color: cssVar('pureWhite'),
 });
 export const lightInfoIconStyle = style({
-  color: 'var(--affine-icon-color)',
+  color: cssVar('iconColor'),
 });
 export const defaultCollapseStyle = styleVariants({
   secondary: {

packages/frontend/component/src/components/page-detail-skeleton/index.css.ts

@@ -1,20 +1,17 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
-
 export const pageDetailSkeletonStyle = style({
   padding: '0 20px',
 });
-
 export const pageDetailSkeletonTitleStyle = style({
   height: '52px',
   width: '100%',
 });
-
 export const blockSuiteEditorStyle = style({
-  maxWidth: 'var(--affine-editor-width)',
+  maxWidth: cssVar('editorWidth'),
   margin: '0 2rem',
   padding: '0 24px',
 });
-
 export const blockSuiteEditorHeaderStyle = style({
   marginTop: '40px',
   marginBottom: '40px',

packages/frontend/component/src/components/resize-panel/resize-panel.css.ts

@@ -1,11 +1,10 @@
+import { cssVar } from '@toeverything/theme';
 import { createVar, style } from '@vanilla-extract/css';
-
 export const panelWidthVar = createVar('panel-width');
 export const resizeHandleOffsetVar = createVar('resize-handle-offset');
 export const resizeHandleVerticalPadding = createVar(
   'resize-handle-vertical-padding'
 );
-
 export const root = style({
   vars: {
     [panelWidthVar]: '256px',
@@ -38,13 +37,11 @@ export const root = style({
     },
   },
 });
-
 export const panelContent = style({
   position: 'relative',
   height: '100%',
   overflow: 'auto',
 });
-
 export const resizeHandleContainer = style({
   position: 'absolute',
   right: resizeHandleOffsetVar,
@@ -82,13 +79,12 @@ export const resizeHandleContainer = style({
     },
   },
 });
-
 export const resizerInner = style({
   position: 'absolute',
   height: '100%',
   width: '2px',
   borderRadius: '2px',
-  backgroundColor: 'var(--affine-primary-color)',
+  backgroundColor: cssVar('primaryColor'),
   transition: 'all 0.2s ease-in-out',
   transform: 'translateX(0.5px)',
   selectors: {

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',
 });

packages/frontend/component/src/components/tour-modal/index.css.ts

@@ -1,11 +1,11 @@
+import { cssVar } from '@toeverything/theme';
 import { keyframes, style } from '@vanilla-extract/css';
-
 export const modalStyle = style({
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  backgroundColor: 'var(--affine-background-secondary-color)',
+  backgroundColor: cssVar('backgroundSecondaryColor'),
   borderRadius: '16px',
   overflow: 'hidden',
 });
@@ -19,7 +19,7 @@ export const titleContainerStyle = style({
   overflow: 'hidden',
 });
 export const titleStyle = style({
-  fontSize: 'var(--affine-font-h6)',
+  fontSize: cssVar('fontH6'),
   fontWeight: '600',
   marginTop: '12px',
   position: 'absolute',
@@ -77,7 +77,6 @@ export const slideToLeftStyle = style({
 export const slideToRightStyle = style({
   animation: `${slideToRight} 0.3s ease-in-out forwards`,
 });
-
 export const containerStyle = style({
   width: '100%',
   display: 'flex',
@@ -105,7 +104,7 @@ export const videoStyle = style({
   position: 'absolute',
   objectFit: 'fill',
   height: '300px',
-  border: '1px solid var(--affine-border-color)',
+  border: `1px solid ${cssVar('borderColor')}`,
   transition: 'opacity 0.5s ease-in-out',
 });
 const fadeIn = keyframes({
@@ -120,7 +119,6 @@ export const videoActiveStyle = style({
   animation: `${fadeIn} 0.5s ease-in-out forwards`,
   opacity: 0,
 });
-
 export const arrowStyle = style({
   wordBreak: 'break-all',
   wordWrap: 'break-word',
@@ -142,12 +140,11 @@ export const descriptionContainerStyle = style({
   position: 'relative',
   overflow: 'hidden',
 });
-
 export const descriptionStyle = style({
   marginTop: '15px',
   width: '100%',
   display: 'flex',
-  fontSize: 'var(--affine-font-sm)',
+  fontSize: cssVar('fontSm'),
   lineHeight: '18px',
   position: 'absolute',
 });
@@ -169,7 +166,7 @@ export const tabStyle = style({
     left: '0',
     width: '100%',
     height: '2px',
-    background: 'var(--affine-text-primary-color)',
+    background: cssVar('textPrimaryColor'),
     transition: 'all 0.15s ease-in-out',
     opacity: 0.2,
     cursor: 'pointer',
@@ -191,5 +188,5 @@ export const tabContainerStyle = style({
 });
 export const buttonDisableStyle = style({
   cursor: 'not-allowed',
-  color: 'var(--affine-text-disable-color)',
+  color: cssVar('textDisableColor'),
 });

packages/frontend/component/src/components/workspace-list/index.css.ts

@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-
 export const workspaceItemStyle = style({
   '@media': {
     'screen and (max-width: 720px)': {

packages/frontend/component/src/components/workspace/index.css.ts

@@ -1,7 +1,6 @@
+import { cssVar } from '@toeverything/theme';
 import { lightCssVariables } from '@toeverything/theme';
-import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { globalStyle, style } from '@vanilla-extract/css';
-
 export const appStyle = style({
   width: '100%',
   position: 'relative',
@@ -9,7 +8,7 @@ export const appStyle = style({
   display: 'flex',
   flexGrow: '1',
   flexDirection: 'row',
-  backgroundColor: 'var(--affine-background-primary-color)',
+  backgroundColor: cssVar('backgroundPrimaryColor'),
   selectors: {
     '&[data-is-resizing="true"]': {
       cursor: 'col-resize',
@@ -21,7 +20,7 @@ export const appStyle = style({
       content: '""',
       position: 'absolute',
       inset: 0,
-      opacity: 'var(--affine-noise-opacity, 0)',
+      opacity: `var(--affine-noise-opacity, 0)`,
       backgroundRepeat: 'repeat',
       backgroundSize: '3%',
       // todo: figure out how to use vanilla-extract webpack plugin to inject img url
@@ -29,32 +28,29 @@ export const appStyle = style({
     },
   },
 });
-
 globalStyle(`html[data-theme="light"] ${appStyle}`, {
   vars: {
     '--affine-noise-opacity': '0.35',
   },
 });
-
 globalStyle(`html[data-theme="dark"] ${appStyle}`, {
   vars: {
     '--affine-noise-opacity': '1',
   },
-
   '@media': {
     print: {
       vars: lightCssVariables,
     },
   },
 });
-
 export const mainContainerStyle = style({
   position: 'relative',
-  zIndex: 0, // it will create stacking context to limit layer of child elements and be lower than after auto zIndex
+  zIndex: 0,
+  // it will create stacking context to limit layer of child elements and be lower than after auto zIndex
   width: 0,
   flex: 1,
   maxWidth: '100%',
-  backgroundColor: 'var(--affine-background-primary-color)',
+  backgroundColor: cssVar('backgroundPrimaryColor'),
   selectors: {
     '&[data-show-padding="true"]': {
       margin: '8px',
@@ -80,19 +76,18 @@ export const mainContainerStyle = style({
       width: '100%',
       top: '-8px',
       left: 0,
-      WebkitAppRegion: 'drag',
+      ['WebkitAppRegion' as string]: 'drag',
     },
     '&[data-transparent=true]': {
       backgroundColor: 'transparent',
     },
   },
-} as ComplexStyleRule);
-
+});
 export const toolStyle = style({
   position: 'absolute',
   right: '30px',
   bottom: '30px',
-  zIndex: 'var(--affine-z-index-popover)',
+  zIndex: cssVar('zIndexPopover'),
   display: 'flex',
   flexDirection: 'column',
   gap: '12px',