feat: upgrate to new theme (#2027)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/components/affine/pinboard/styles.ts

@@ -20,7 +20,7 @@ export const StyledCollapsedButton = styled('button')<{
     top: '0',
     bottom: '0',
     margin: 'auto',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     opacity: '.6',
     transition: 'opacity .15s ease-in-out',
     display: show ? 'flex' : 'none',
@@ -57,13 +57,13 @@ export const StyledPinboard = styled('div')<{
       padding: disableCollapse ? '0 5px' : '0 2px 0 16px',
       position: 'relative',
       color: disable
-        ? theme.colors.disableColor
+        ? 'var(--affine-text-disable-color)'
         : active
-        ? theme.colors.primaryColor
+        ? 'var(--affine-primary-color)'
-        : theme.colors.textColor,
+        : 'var(--affine-text-primary-color)',
       cursor: disable ? 'not-allowed' : 'pointer',
-      background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
+      background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '',
-      fontSize: theme.font.base,
+      fontSize: 'var(--affine-font-base)',
       userSelect: 'none',
       ...(textWrap
         ? {
@@ -85,11 +85,13 @@ export const StyledPinboard = styled('div')<{
         fontSize: '20px',
         marginRight: '8px',
         flexShrink: '0',
-        color: active ? theme.colors.primaryColor : theme.colors.iconColor,
+        color: active
+          ? 'var(--affine-primary-color)'
+          : 'var(--affine-icon-color)',
       },
 
       ':hover': {
-        backgroundColor: disable ? '' : theme.colors.hoverBackground,
+        backgroundColor: disable ? '' : 'var(--affine-hover-color)',
       },
     };
   }
@@ -110,9 +112,9 @@ export const StyledSearchContainer = styled('div')(({ theme }) => {
     width: 'calc(100% - 24px)',
     margin: '0 auto',
     ...displayFlex('flex-start', 'center'),
-    borderBottom: `1px solid ${theme.colors.borderColor}`,
+    borderBottom: '1px solid var(--affine-border-color)',
     label: {
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
       fontSize: '20px',
       height: '20px',
     },
@@ -126,7 +128,7 @@ export const StyledMenuContent = styled('div')(() => {
 });
 export const StyledMenuSubTitle = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.secondaryTextColor,
+    color: 'var(--affine-text-secondary-color)',
     lineHeight: '36px',
     padding: '0 12px',
   };
@@ -136,12 +138,12 @@ export const StyledMenuFooter = styled('div')(({ theme }) => {
   return {
     width: 'calc(100% - 24px)',
     margin: '0 auto',
-    borderTop: `1px solid ${theme.colors.borderColor}`,
+    borderTop: '1px solid var(--affine-border-color)',
     padding: '6px 0',
 
     p: {
       paddingLeft: '44px',
-      color: theme.colors.secondaryTextColor,
+      color: 'var(--affine-text-secondary-color)',
       fontSize: '14px',
     },
   };

apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts

@@ -15,7 +15,7 @@ export const Content = styled('div')({
 
 export const ContentTitle = styled('h1')(({ theme }) => {
   return {
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
     lineHeight: '28px',
     fontWeight: 600,
   };
@@ -26,7 +26,7 @@ export const StyleTips = styled('div')(({ theme }) => {
     userSelect: 'none',
     margin: '20px 0',
     a: {
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-background-primary-color)',
     },
   };
 });
@@ -36,7 +36,7 @@ export const StyleButton = styled(Button)(({ theme }) => {
     textAlign: 'center',
     margin: '20px 0',
     borderRadius: '8px',
-    backgroundColor: theme.colors.primaryColor,
+    backgroundColor: 'var(--affine-background-primary-color)',
     span: {
       margin: '0',
     },

apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx

@@ -154,7 +154,7 @@ const Members = styled('div')(({ theme }) => {
   return {
     position: 'absolute',
     width: '100%',
-    background: theme.colors.pageBackground,
+    background: 'var(--affine-background-primary-color)',
     textAlign: 'left',
     zIndex: 1,
     borderRadius: '0px 10px 10px 10px',
@@ -162,7 +162,7 @@ const Members = styled('div')(({ theme }) => {
     padding: '8px 12px',
     input: {
       '&::placeholder': {
-        color: theme.colors.placeHolderColor,
+        color: 'var(--affine-placeholder-color)',
       },
     },
   };
@@ -170,8 +170,8 @@ const Members = styled('div')(({ theme }) => {
 
 // const NoFind = styled('div')(({ theme }) => {
 //   return {
-//     color: theme.colors.iconColor,
+//     color: 'var(--affine-icon-color)',
-//     fontSize: theme.font.sm,
+//     fontSize: 'var(--affine-font-sm)',
 //     lineHeight: '40px',
 //     userSelect: 'none',
 //     width: '100%',
@@ -180,8 +180,8 @@ const Members = styled('div')(({ theme }) => {
 
 const Member = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
     lineHeight: '40px',
     userSelect: 'none',
     display: 'flex',
@@ -193,7 +193,7 @@ const MemberIcon = styled('div')(({ theme }) => {
     width: '40px',
     height: '40px',
     borderRadius: '50%',
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
     background: '#F5F5F5',
     textAlign: 'center',
     lineHeight: '45px',

apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts

@@ -66,7 +66,7 @@ export const StyledMemberName = styled('div')(({ theme }) => {
     fontWeight: '400',
     fontSize: '18px',
     lineHeight: '26px',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
   };
 });
 
@@ -75,7 +75,7 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
     fontWeight: '400',
     fontSize: '16px',
     lineHeight: '22px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
   };
 });
 

apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts

@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
     position: 'relative',
     padding: '0px',
     width: '560px',
-    background: theme.colors.popoverBackground,
+    background: 'var(--affine-white)',
     borderRadius: '12px',
     // height: '312px',
   };
@@ -42,7 +42,7 @@ export const StyledInputContent = styled('div')(({ theme }) => {
     flexDirection: 'row',
     justifyContent: 'center',
     margin: '24px 0',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
   };
 });
 

apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts

@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
     position: 'relative',
     padding: '0px',
     width: '460px',
-    background: theme.colors.popoverBackground,
+    background: 'var(--affine-white)',
     borderRadius: '12px',
   };
 });

apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts

@@ -3,9 +3,9 @@ import { Input } from '@affine/component';
 
 export const StyledInput = styled(Input)(({ theme }) => {
   return {
-    border: `1px solid ${theme.colors.borderColor}`,
+    border: '1px solid var(--affine-border-color)',
     borderRadius: '10px',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
   };
 });
 
@@ -14,7 +14,7 @@ export const StyledWorkspaceInfo = styled('div')(({ theme }) => {
     ...displayFlex('flex-start', 'center'),
     fontSize: '20px',
     span: {
-      fontSize: theme.font.base,
+      fontSize: 'var(--affine-font-base)',
       marginLeft: '15px',
     },
   };
@@ -49,7 +49,7 @@ export const StyledAvatar = styled('div')(
 
 export const StyledEditButton = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
     cursor: 'pointer',
     marginLeft: '36px',
   };

apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx

@@ -12,7 +12,7 @@ import type { PanelProps } from '../../index';
 export const StyledWorkspaceName = styled('span')(({ theme }) => {
   return {
     fontWeight: '400',
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
   };
 });
 

apps/web/src/components/affine/workspace-setting-detail/style.ts

@@ -32,10 +32,12 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
         display: 'flex',
         margin: '0 48px 0 0',
         height: '34px',
-        color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
+        color: isActive
+          ? 'var(--affine-primary-color)'
+          : 'var(--affine-text-primary-color)',
         fontWeight: '500',
-        fontSize: theme.font.h6,
+        fontSize: 'var(--affine-font-h6)',
-        lineHeight: theme.font.lineHeight,
+        lineHeight: 'var(--affine-line-height)',
         cursor: 'pointer',
         transition: 'all 0.15s ease',
       };
@@ -46,7 +48,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
 export const StyledSettingKey = styled('div')(({ theme }) => {
   return {
     width: '140px',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     fontWeight: 500,
     marginRight: '56px',
     flexShrink: 0,
@@ -61,14 +63,14 @@ export const StyledRow = styled(FlexWrapper)(() => {
 export const StyledWorkspaceName = styled('span')(({ theme }) => {
   return {
     fontWeight: '400',
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
   };
 });
 
 export const StyledIndicator = styled('div')(({ theme }) => {
   return {
     height: '2px',
-    background: theme.colors.primaryColor,
+    background: 'var(--affine-primary-color)',
     position: 'absolute',
     left: '0',
     bottom: '0',
@@ -90,8 +92,8 @@ export const StyledTabButtonWrapper = styled('div')(() => {
 //       height: '86px',
 //       border: '1px solid',
 //       borderColor: active
-//         ? theme.colors.primaryColor
+//         ? 'var(--affine-primary-color)'
-//         : theme.colors.borderColor,
+//         : 'var(--affine-border-color)',
 //       borderRadius: '10px',
 //       padding: '8px 12px',
 //       position: 'relative',
@@ -107,7 +109,7 @@ export const StyledTabButtonWrapper = styled('div')(() => {
 // );
 // export const StyledDownloadCardDes = styled('div')(({ theme }) => {
 //   return {
-//     fontSize: theme.font.sm,
+//     fontSize: 'var(--affine-font-sm)',
-//     color: theme.colors.iconColor,
+//     color: 'var(--affine-icon-color)',
 //   };
 // });

apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx

@@ -47,7 +47,6 @@ const FavoriteTag: React.FC<FavoriteTagProps> = ({
   pageMeta: { favorite },
   onClick,
 }) => {
-  const theme = useTheme();
   const { t } = useTranslation();
   return (
     <Tooltip
@@ -64,7 +63,9 @@ const FavoriteTag: React.FC<FavoriteTagProps> = ({
           );
         }}
         style={{
-          color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
+          color: favorite
+            ? 'var(--affine-primary-color)'
+            : 'var(--affine-icon-color)',
         }}
         className={favorite ? '' : 'favorite-button'}
       >

apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts

@@ -22,7 +22,7 @@ export const StyledTitleWrapper = styled('div')(({ theme }) => {
       color: 'unset',
     },
     'a:hover': {
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
     },
   };
 });
@@ -31,11 +31,11 @@ export const StyledTitleLink = styled('div')(({ theme }) => {
     maxWidth: '80%',
     marginRight: '18px',
     ...displayFlex('flex-start', 'center'),
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     '>svg': {
       fontSize: '24px',
       marginRight: '12px',
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
     },
   };
 });

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts

@@ -25,7 +25,7 @@ export const StyledEditorModeSwitch = styled('div')<{
       display: showAlone ? 'none' : 'block',
       width: '24px',
       height: '24px',
-      background: theme.colors.pageBackground,
+      background: 'var(--affine-background-primary-color)',
       boxShadow:
         mode === 'dark'
           ? '0px 0px 6px rgba(22, 22, 22, 0.6)'
@@ -47,7 +47,7 @@ export const StyledSwitchItem = styled('button')<{
     width: '24px',
     height: '24px',
     borderRadius: '8px',
-    color: active ? theme.colors.primaryColor : theme.colors.iconColor,
+    color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
     display: hide ? 'none' : 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',

apps/web/src/components/blocksuite/workspace-header/header-right-items/EditPage.tsx

@@ -28,8 +28,8 @@ const StyledEditPageButton = styled(
   {}
 )(({ theme }) => {
   return {
-    border: `1px solid ${theme.colors.primaryColor}`,
+    border: '1px solid var(--affine-primary-color)',
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
     width: '100%',
     borderRadius: '8px',
     whiteSpace: 'nowrap',

apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx

@@ -9,7 +9,6 @@ import {
   PageIcon,
 } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
-import { useTheme } from '@mui/material';
 import {
   useBlockSuitePageMeta,
   usePageMetaHelper,
@@ -30,7 +29,6 @@ import {
 
 export const EditorOptionMenu = () => {
   const { t } = useTranslation();
-  const theme = useTheme();
 
   // fixme(himself65): remove these hooks ASAP
   const [workspace] = useCurrentWorkspace();
@@ -61,7 +59,7 @@ export const EditorOptionMenu = () => {
         }}
         icon={
           favorite ? (
-            <FavoritedIcon style={{ color: theme.colors.primaryColor }} />
+            <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
           ) : (
             <FavoriteIcon />
           )

apps/web/src/components/blocksuite/workspace-header/header-right-items/SyncUser.tsx

@@ -29,7 +29,7 @@ const IconWrapper = styled('div')(({ theme }) => {
     height: '32px',
     marginRight: '12px',
     fontSize: '24px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     ...displayFlex('center', 'center'),
   };
 });

apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts

@@ -12,7 +12,7 @@ export const StyledThemeModeSwitch = styled('button')(({ theme }) => {
     overflow: 'hidden',
     backgroundColor: 'transparent',
     position: 'relative',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     fontSize: '24px',
   };
 });
@@ -35,7 +35,7 @@ export const StyledSwitchItem = styled('div')<{
 
   const activeStyle = active
     ? {
-        color: theme.colors.iconColor,
+        color: 'var(--affine-icon-color)',
         top: '0',
         animation: css`
           ${keyframes`${
@@ -46,8 +46,8 @@ export const StyledSwitchItem = styled('div')<{
       }
     : {
         top: '100%',
-        color: theme.colors.primaryColor,
+        color: 'var(--affine-primary-color)',
-        backgroundColor: theme.colors.hoverBackground,
+        backgroundColor: 'var(--affine-hover-color)',
         animation: css`
           ${keyframes`${
             isHover ? raiseAnimate : declineAnimate

apps/web/src/components/blocksuite/workspace-header/styles.ts

@@ -14,7 +14,7 @@ export const StyledHeaderContainer = styled('div')<{
     flexShrink: 0,
     position: 'sticky',
     top: 0,
-    background: theme.colors.pageBackground,
+    background: 'var(--affine-background-primary-color)',
     zIndex: 1,
     WebkitAppRegion: sidebarFloating ? '' : 'drag',
     button: {
@@ -30,7 +30,7 @@ export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
       width: '100%',
       padding: '0 20px',
       ...displayFlex('space-between', 'center'),
-      background: theme.colors.pageBackground,
+      background: 'var(--affine-background-primary-color)',
       zIndex: 99,
       position: 'relative',
     };
@@ -44,7 +44,7 @@ export const StyledTitleContainer = styled('div')(({ theme }) => ({
   margin: 'auto',
   ...absoluteCenter({ horizontal: true, position: { top: 0 } }),
   ...displayFlex('center', 'center'),
-  fontSize: theme.font.base,
+  fontSize: 'var(--affine-font-base)',
 }));
 
 export const StyledTitle = styled('div')(({ theme }) => {
@@ -83,10 +83,10 @@ export const StyledHeaderRightSide = styled('div')({
 export const StyledBrowserWarning = styled('div')<{ show: boolean }>(
   ({ theme, show }) => {
     return {
-      backgroundColor: theme.colors.warningBackground,
+      backgroundColor: 'var(--affine-background-warning-color)',
-      color: theme.colors.warningColor,
+      color: 'var(--affine-background-warning-color)',
       height: '36px',
-      fontSize: theme.font.sm,
+      fontSize: 'var(--affine-font-sm)',
       display: show ? 'flex' : 'none',
       justifyContent: 'center',
       alignItems: 'center',
@@ -98,7 +98,7 @@ export const StyledCloseButton = styled('div')(({ theme }) => {
   return {
     width: '36px',
     height: '36px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     cursor: 'pointer',
     ...displayFlex('center', 'center'),
     position: 'absolute',
@@ -138,8 +138,8 @@ export const StyledSearchArrowWrapper = styled('div')(() => {
 
 export const StyledPageListTittleWrapper = styled(StyledTitle)(({ theme }) => {
   return {
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     ...displayFlex('center', 'center'),
     '>svg': {
       fontSize: '20px',
@@ -154,9 +154,9 @@ export const StyledQuickSearchTipButton = styled('div')(({ theme }) => {
     color: '#FFFFFF',
     width: '48px',
     height: ' 26px',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
     lineHeight: '22px',
-    background: theme.colors.primaryColor,
+    background: 'var(--affine-primary-color)',
     borderRadius: '8px',
     textAlign: 'center',
     cursor: 'pointer',

apps/web/src/components/pure/footer/styles.ts

@@ -10,7 +10,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
   return {
     width: '1px',
     height: '20px',
-    background: theme.colors.borderColor,
+    background: 'var(--affine-border-color)',
     marginRight: '24px',
   };
 });
@@ -21,7 +21,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
     width: '202px',
     p: {
       height: '20px',
-      fontSize: theme.font.sm,
+      fontSize: 'var(--affine-font-sm)',
       ...displayFlex('flex-start', 'center'),
     },
     svg: {
@@ -38,7 +38,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
 
 export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
   return {
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     fontWeight: 600,
     lineHeight: '24px',
     marginBottom: '10px',
@@ -50,7 +50,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
 export const StyledCard = styled('div')<{
   active?: boolean;
 }>(({ theme, active }) => {
-  const borderColor = active ? theme.colors.primaryColor : 'transparent';
+  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
   return {
     width: '310px',
     height: '124px',
@@ -64,10 +64,10 @@ export const StyledCard = styled('div')<{
     transition: 'background .2s',
     background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
     ':hover': {
-      background: theme.colors.cardHoverBackground,
+      background: 'var(--affine-hover-color)',
       '.add-icon': {
-        borderColor: theme.colors.primaryColor,
+        borderColor: 'var(--affine-primary-color)',
-        color: theme.colors.primaryColor,
+        color: 'var(--affine-primary-color)',
       },
     },
   };
@@ -87,10 +87,10 @@ export const StyleUserInfo = styled('div')(({ theme }) => {
     flex: 1,
     p: {
       lineHeight: '24px',
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
     },
     'p:first-of-type': {
-      color: theme.colors.textColor,
+      color: 'var(--affine-text-primary-color)',
       fontWeight: 600,
     },
   };
@@ -102,16 +102,16 @@ export const StyledModalHeaderLeft = styled('div')(() => {
 export const StyledModalTitle = styled('div')(({ theme }) => {
   return {
     fontWeight: 600,
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
   };
 });
 
 export const StyledHelperContainer = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     marginLeft: '15px',
     fontWeight: 400,
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
     ...displayFlex('center', 'center'),
   };
 });
@@ -162,8 +162,8 @@ export const StyledSignInButton = styled(Button)(({ theme }) => {
       width: '40px',
       height: '40px',
       borderRadius: '20px',
-      backgroundColor: theme.colors.hoverBackground,
+      backgroundColor: 'var(--affine-hover-color)',
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
       fontSize: '24px',
       flexShrink: 0,
       marginRight: '16px',

apps/web/src/components/pure/help-island/style.ts

@@ -12,7 +12,7 @@ export const StyledIsland = styled('div')<{
       : 'unset',
     padding: '0 4px 44px',
     borderRadius: '10px',
-    backgroundColor: theme.colors.pageBackground,
+    backgroundColor: 'var(--affine-background-primary-color)',
     ':hover': {
       boxShadow:
         '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
@@ -21,7 +21,7 @@ export const StyledIsland = styled('div')<{
       content: '""',
       width: '36px',
       height: '1px',
-      background: spread ? theme.colors.borderColor : 'transparent',
+      background: spread ? 'var(--affine-border-color)' : 'transparent',
       ...positionAbsolute({
         left: 0,
         right: 0,
@@ -34,11 +34,11 @@ export const StyledIsland = styled('div')<{
 });
 export const StyledIconWrapper = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     ...displayFlex('center', 'center'),
     cursor: 'pointer',
     fontSize: '24px',
-    backgroundColor: theme.colors.pageBackground,
+    backgroundColor: 'var(--affine-background-primary-color)',
     borderRadius: '5px',
     width: '36px',
     height: '36px',
@@ -46,8 +46,8 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
     transition: 'background-color 0.2s',
     position: 'relative',
     ':hover': {
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
-      backgroundColor: theme.colors.hoverBackground,
+      backgroundColor: 'var(--affine-hover-color)',
     },
   };
 });
@@ -62,14 +62,14 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
     width: '36px',
     height: '36px',
     cursor: 'pointer',
-    backgroundColor: theme.colors.pageBackground,
+    backgroundColor: 'var(--affine-background-primary-color)',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     borderRadius: '5px',
     fontSize: '24px',
     ...displayFlex('center', 'center'),
     ...positionAbsolute({ left: '4px', bottom: '4px' }),
     ':hover': {
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
     },
   };
 });

apps/web/src/components/pure/quick-search-button/index.tsx

@@ -13,7 +13,7 @@ const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
         transform: 'translateY(3px)',
       },
       '::after': {
-        background: theme.colors.pageBackground,
+        background: 'var(--affine-background-primary-color)',
       },
     },
   };

apps/web/src/components/pure/quick-search-modal/navigation-path/styles.ts

@@ -4,10 +4,10 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
   return {
     height: '46px',
     ...displayFlex('flex-start', 'center'),
-    background: theme.colors.hubBackground,
+    background: 'var(--affine-background-secondary-color)',
     padding: '0 40px 0 20px',
     position: 'relative',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
     zIndex: 2,
     '.collapse-btn': {
       position: 'absolute',
@@ -18,7 +18,7 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
     },
     '.path-arrow': {
       fontSize: '16px',
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
     },
   };
 });
@@ -26,7 +26,9 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
 export const StyledNavPathLink = styled('div')<{ active?: boolean }>(
   ({ theme, active }) => {
     return {
-      color: active ? theme.colors.textColor : theme.colors.secondaryTextColor,
+      color: active
+        ? 'var(--affine-text-primary-color)'
+        : 'var(--affine-text-secondary-color)',
       cursor: active ? 'auto' : 'pointer',
       maxWidth: '160px',
       ...textEllipsis(1),
@@ -35,7 +37,7 @@ export const StyledNavPathLink = styled('div')<{ active?: boolean }>(
       ':hover': active
         ? {}
         : {
-            background: theme.colors.hoverBackground,
+            background: 'var(--affine-hover-color)',
             borderRadius: '4px',
           },
     };
@@ -51,10 +53,10 @@ export const StyledNavPathExtendContainer = styled('div')<{ show: boolean }>(
       zIndex: '1',
       height: '100%',
       width: '100%',
-      background: theme.colors.hubBackground,
+      background: 'var(--affine-background-secondary-color)',
       transition: 'top .15s',
-      fontSize: theme.font.sm,
+      fontSize: 'var(--affine-font-sm)',
-      color: theme.colors.secondaryTextColor,
+      color: 'var(--affine-text-secondary-color)',
       padding: '46px 12px 0 15px',
     };
   }

apps/web/src/components/pure/quick-search-modal/style.ts

@@ -9,7 +9,7 @@ export const StyledContent = styled('div')(({ theme }) => {
     marginBottom: '10px',
     ...displayFlex('flex-start', 'flex-start'),
     flexDirection: 'column',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     transition: 'all 0.15s',
     letterSpacing: '0.06em',
     '[cmdk-group]': {
@@ -20,8 +20,8 @@ export const StyledContent = styled('div')(({ theme }) => {
       margin: '0 16px',
       height: '36px',
       lineHeight: '22px',
-      fontSize: theme.font.sm,
+      fontSize: 'var(--affine-font-sm)',
-      color: theme.colors.secondaryTextColor,
+      color: 'var(--affine-text-secondary-color)',
     },
     '[cmdk-item]': {
       margin: '0 4px',
@@ -29,8 +29,8 @@ export const StyledContent = styled('div')(({ theme }) => {
     '[aria-selected="true"]': {
       transition: 'all 0.15s',
       borderRadius: '4px',
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
-      backgroundColor: theme.colors.hoverBackground,
+      backgroundColor: 'var(--affine-hover-color)',
       padding: '0 2px',
     },
   };
@@ -40,7 +40,7 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
     ...displayFlex('center', 'start'),
     flexDirection: 'column',
     padding: '10px 10px 10px 0',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     strong: {
       fontWeight: '500',
       marginBottom: '10px',
@@ -53,9 +53,9 @@ export const StyledNotFound = styled('div')(({ theme }) => {
     ...displayFlex('center', 'center'),
     flexDirection: 'column',
     padding: '0 16px',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
     lineHeight: '22px',
-    color: theme.colors.secondaryTextColor,
+    color: 'var(--affine-text-secondary-color)',
     span: {
       ...displayFlex('flex-start', 'center'),
       width: '100%',
@@ -75,20 +75,20 @@ export const StyledInputContent = styled('div')(({ theme }) => {
       width: '492px',
       height: '22px',
       padding: '0 12px',
-      fontSize: theme.font.base,
+      fontSize: 'var(--affine-font-base)',
       ...displayFlex('space-between', 'center'),
       letterSpacing: '0.06em',
-      color: theme.colors.textColor,
+      color: 'var(--affine-text-primary-color)',
       '::placeholder': {
-        color: theme.colors.placeHolderColor,
+        color: 'var(--affine-placeholder-color)',
       },
     },
   };
 });
 export const StyledShortcut = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.placeHolderColor,
+    color: 'var(--affine-placeholder-color)',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
     whiteSpace: 'nowrap',
   };
 });
@@ -97,7 +97,7 @@ export const StyledLabel = styled('label')(({ theme }) => {
   return {
     width: '20px',
     height: '20px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     fontSize: '20px',
   };
 });
@@ -114,7 +114,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
     width: 'auto',
     height: '0',
     margin: '6px 16px',
-    borderTop: `0.5px solid ${theme.colors.borderColor}`,
+    borderTop: '0.5px solid var(--affine-border-color)',
   };
 });
 
@@ -124,7 +124,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
     lineHeight: '22px',
     marginBottom: '8px',
     textAlign: 'center',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     ...displayFlex('center', 'center'),
     transition: 'all .15s',
     '[cmdk-item]': {
@@ -133,8 +133,8 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
     '[aria-selected="true"]': {
       transition: 'all 0.15s',
       borderRadius: '4px',
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
-      backgroundColor: theme.colors.hoverBackground,
+      backgroundColor: 'var(--affine-hover-color)',
       'span,svg': {
         transition: 'all 0.15s',
         transform: 'scale(1.02)',
@@ -146,7 +146,7 @@ export const StyledModalFooterContent = styled('button')(({ theme }) => {
   return {
     width: '600px',
     height: '32px',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     lineHeight: '22px',
     textAlign: 'center',
     ...displayFlex('center', 'center'),

apps/web/src/components/pure/shortcuts-modal/style.ts

@@ -4,9 +4,9 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
   width: '288px',
   height: '74vh',
   paddingBottom: '28px',
-  backgroundColor: theme.colors.popoverBackground,
+  backgroundColor: 'var(--affine-white)',
-  boxShadow: theme.shadow.popover,
+  boxShadow: 'var(--affine-text-popover-shadow)',
-  borderRadius: `${theme.radius.popover} 0 ${theme.radius.popover} ${theme.radius.popover}`,
+  borderRadius: `var(--affine-popover-radius) 0 var(--affine-popover-radius) var(--affine-popover-radius)`,
   overflow: 'auto',
   boxRadius: '10px',
   position: 'fixed',
@@ -14,23 +14,23 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
   top: '0',
   bottom: '0',
   margin: 'auto',
-  zIndex: theme.zIndex.modal,
+  zIndex: 'var(--affine-z-index-modal)',
 }));
 export const StyledTitle = styled('div')(({ theme }) => ({
-  color: theme.colors.textColor,
+  color: 'var(--affine-text-primary-color)',
   fontWeight: '500',
-  fontSize: theme.font.sm,
+  fontSize: 'var(--affine-font-sm)',
   height: '44px',
   ...displayFlex('center', 'center'),
   svg: {
     width: '20px',
     marginRight: '14px',
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
   },
 }));
 export const StyledSubTitle = styled('div')(({ theme }) => ({
   fontWeight: '500',
-  fontSize: theme.font.sm,
+  fontSize: 'var(--affine-font-sm)',
   height: '34px',
   lineHeight: '36px',
   marginTop: '28px',
@@ -52,6 +52,6 @@ export const StyledModalHeader = styled('div')(() => ({
 export const StyledListItem = styled('div')(({ theme }) => ({
   height: '34px',
   ...displayFlex('space-between', 'center'),
-  fontSize: theme.font.sm,
+  fontSize: 'var(--affine-font-sm)',
   padding: '0 16px',
 }));

apps/web/src/components/pure/workspace-list-modal/language-menu.tsx

@@ -58,7 +58,7 @@ export const LanguageMenu: React.FC = () => {
 
 const ListItem = styled(MenuItem)(({ theme }) => ({
   height: '38px',
-  fontSize: theme.font.base,
+  fontSize: 'var(--affine-font-base)',
   textTransform: 'capitalize',
   padding: '0 24px',
 }));

apps/web/src/components/pure/workspace-list-modal/styles.ts

@@ -4,7 +4,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
   return {
     width: '1px',
     height: '20px',
-    background: theme.colors.borderColor,
+    background: 'var(--affine-border-color)',
     marginRight: '12px',
   };
 });
@@ -15,7 +15,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
     width: '202px',
     p: {
       height: '20px',
-      fontSize: theme.font.sm,
+      fontSize: 'var(--affine-font-sm)',
       ...displayFlex('flex-start', 'center'),
     },
     svg: {
@@ -32,7 +32,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
 
 export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
   return {
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     fontWeight: 600,
     lineHeight: '24px',
     marginBottom: '10px',
@@ -44,7 +44,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
 export const StyledCard = styled('div')<{
   active?: boolean;
 }>(({ theme, active }) => {
-  const borderColor = active ? theme.colors.primaryColor : 'transparent';
+  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
   return {
     width: '310px',
     height: '124px',
@@ -58,7 +58,7 @@ export const StyledCard = styled('div')<{
     transition: 'background .2s',
     background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
     ':hover': {
-      background: theme.colors.cardHoverBackground,
+      background: 'var(--affine-hover-color)',
     },
   };
 });
@@ -73,14 +73,14 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
     borderRadius: '12px',
     transition: 'all .1s',
     ...displayFlex('flex-start', 'flex-start'),
-    color: theme.colors.secondaryTextColor,
+    color: 'var(--affine-text-secondary-color)',
 
     ':hover': {
-      background: theme.colors.cardHoverBackground,
+      background: 'var(--affine-hover-color)',
-      color: theme.colors.textColor,
+      color: 'var(--affine-text-primary-color)',
       '.add-icon': {
-        borderColor: theme.colors.primaryColor,
+        borderColor: 'var(--affine-primary-color)',
-        color: theme.colors.primaryColor,
+        color: 'var(--affine-primary-color)',
       },
     },
   };
@@ -92,16 +92,16 @@ export const StyledModalHeaderLeft = styled('div')(() => {
 export const StyledModalTitle = styled('div')(({ theme }) => {
   return {
     fontWeight: 600,
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
   };
 });
 
 export const StyledHelperContainer = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     marginLeft: '15px',
     fontWeight: 400,
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
     ...displayFlex('center', 'center'),
   };
 });

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -8,10 +8,10 @@ export const StyledSelectorContainer = styled('div')(({ theme }) => {
     padding: '0 6px',
     marginBottom: '16px',
     borderRadius: '8px',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     ':hover': {
       cursor: 'pointer',
-      background: theme.colors.hoverBackground,
+      background: 'var(--affine-hover-color)',
     },
   };
 });
@@ -36,12 +36,12 @@ export const StyledWorkspaceStatus = styled('div')(({ theme }) => {
   return {
     height: '22px',
     ...displayFlex('flex-start', 'center'),
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
-    color: theme.colors.secondaryTextColor,
+    color: 'var(--affine-text-secondary-color)',
     userSelect: 'none',
     svg: {
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
-      fontSize: theme.font.base,
+      fontSize: 'var(--affine-font-base)',
       marginRight: '4px',
     },
   };

apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts

@@ -12,7 +12,9 @@ export const StyledListItem = styled('div')<{
 }>(({ theme, active, disabled }) => {
   return {
     height: '32px',
-    color: active ? theme.colors.primaryColor : theme.colors.textColor,
+    color: active
+      ? 'var(--affine-primary-color)'
+      : 'var(--affine-text-primary-color)',
     padding: '0 16px',
     borderRadius: '8px',
     cursor: 'pointer',
@@ -24,17 +26,19 @@ export const StyledListItem = styled('div')<{
     ...(disabled
       ? {
           cursor: 'not-allowed',
-          color: theme.colors.borderColor,
+          color: 'var(--affine-border-color)',
         }
       : {}),
 
     '> svg, a > svg': {
       fontSize: '20px',
       marginRight: '12px',
-      color: active ? theme.colors.primaryColor : theme.colors.iconColor,
+      color: active
+        ? 'var(--affine-primary-color)'
+        : 'var(--affine-icon-color)',
     },
     ':hover:not([disabled])': {
-      backgroundColor: theme.colors.hoverBackground,
+      backgroundColor: 'var(--affine-hover-color)',
     },
   };
 });
@@ -53,7 +57,7 @@ export const StyledCollapseButton = styled('button')<{
     top: '0',
     bottom: '0',
     margin: 'auto',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     opacity: '.6',
     transition: 'opacity .15s ease-in-out',
     display: show ? 'flex' : 'none',
@@ -81,12 +85,12 @@ export const StyledCollapseItem = styled('div')<{
     paddingRight: '2px',
     position: 'relative',
     color: disable
-      ? theme.colors.disableColor
+      ? 'var(--affine-text-disable-color)'
       : active
-      ? theme.colors.primaryColor
+      ? 'var(--affine-primary-color)'
-      : theme.colors.textColor,
+      : 'var(--affine-text-primary-color)',
     cursor: disable ? 'not-allowed' : 'pointer',
-    background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
+    background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '',
     userSelect: 'none',
     ...(textWrap
       ? {
@@ -103,13 +107,15 @@ export const StyledCollapseItem = styled('div')<{
       fontSize: '20px',
       marginRight: '8px',
       flexShrink: '0',
-      color: active ? theme.colors.primaryColor : theme.colors.iconColor,
+      color: active
+        ? 'var(--affine-primary-color)'
+        : 'var(--affine-icon-color)',
     },
 
     ':hover': disable
       ? {}
       : {
-          backgroundColor: theme.colors.hoverBackground,
+          backgroundColor: 'var(--affine-hover-color)',
           '.operation-button': {
             visibility: 'visible',
           },
@@ -173,9 +179,9 @@ export const StyledChangeLog = styled('div')<{
     width: '110%',
     height: '32px',
     ...displayFlex('flex-start', 'center'),
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
-    backgroundColor: theme.colors.hoverBackground,
+    backgroundColor: 'var(--affine-hover-color)',
-    border: `1px solid ${theme.colors.primaryColor}`,
+    border: '1px solid var(--affine-primary-color)',
     borderRight: 'none',
     marginLeft: '8px',
     paddingLeft: '8px',
@@ -191,7 +197,7 @@ export const StyledChangeLog = styled('div')<{
     '> svg, a > svg': {
       fontSize: '20px',
       marginRight: '12px',
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
     },
     button: {
       marginRight: '12%',

apps/web/src/components/pure/workspace-slider-bar/style.ts

@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@affine/component';
+import { baseTheme, displayFlex, styled } from '@affine/component';
 import Link from 'next/link';
 
 const macosElectron = environment.isDesktop && environment.isMacOs;
@@ -14,14 +14,16 @@ export const StyledSliderBarWrapper = styled('div')<{
     'button, a': {
       userSelect: 'none',
     },
-    zIndex: theme.zIndex.modal,
+    zIndex: 'var(--affine-z-index-modal)',
     transition: resizing ? '' : 'transform .3s, width .3s, max-width .3s',
     transform: show ? 'translateX(0)' : 'translateX(-100%)',
     maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
     background:
-      !floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
+      !floating && macosElectron
+        ? 'transparent'
+        : 'var(--affine-background-secondary-color)',
     borderRight: macosElectron ? '' : '1px solid',
-    borderColor: theme.colors.borderColor,
+    borderColor: 'var(--affine-border-color)',
   };
 });
 
@@ -82,17 +84,17 @@ export const StyledNewPageButton = styled('button')(({ theme }) => {
     height: '52px',
     ...displayFlex('flex-start', 'center'),
     borderTop: '1px solid',
-    borderColor: theme.colors.borderColor,
+    borderColor: 'var(--affine-border-color)',
     padding: '0 8px 0 16px',
     svg: {
       fontSize: '20px',
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
       marginRight: '8px',
     },
     ':hover': {
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
       svg: {
-        color: theme.colors.primaryColor,
+        color: 'var(--affine-primary-color)',
       },
     },
   };
@@ -108,8 +110,8 @@ export const StyledSliderModalBackground = styled('div')<{ active: boolean }>(
       left: 0,
       right: active ? 0 : '100%',
       bottom: 0,
-      zIndex: theme.zIndex.modal - 1,
+      zIndex: parseInt(baseTheme.zIndexModal) - 1,
-      background: theme.colors.modalBackground,
+      background: 'var(--affine-background-modal-color)',
     };
   }
 );
@@ -121,6 +123,6 @@ export const StyledScrollWrapper = styled('div')<{
     maxHeight: '50%',
     overflowY: 'auto',
     borderTop: '1px solid',
-    borderColor: showTopBorder ? theme.colors.borderColor : 'transparent',
+    borderColor: showTopBorder ? 'var(--affine-border-color)' : 'transparent',
   };
 });

apps/web/src/layouts/styles.ts

@@ -57,7 +57,7 @@ export const MainContainer = styled('div')(({ theme }) => {
     position: 'relative',
     flexGrow: 1,
     maxWidth: '100%',
-    backgroundColor: theme.colors.pageBackground,
+    backgroundColor: 'var(--affine-background-primary-color)',
     [theme.breakpoints.up('md')]: {
       minWidth: '686px',
     },
@@ -72,7 +72,7 @@ export const StyledToolWrapper = styled('div')(({ theme }) => {
     position: 'fixed',
     right: '30px',
     bottom: '30px',
-    zIndex: theme.zIndex.popover,
+    zIndex: 'var(--affine-z-index-popover)',
     [theme.breakpoints.down('md')]: {
       right: 'calc((100vw - 640px) * 3 / 19 + 5px)',
     },
@@ -93,7 +93,7 @@ export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>(
       width: '12px',
       transform: 'translateX(50%)',
       cursor: 'col-resize',
-      zIndex: theme.zIndex.modal,
+      zIndex: 'var(--affine-z-index-modal)',
       userSelect: 'none',
       ':hover > *': {
         background: 'rgba(0, 0, 0, 0.1)',

apps/web/src/pages/invite/[invite_code].tsx

@@ -94,7 +94,7 @@ const StyledContainer = styled('div')(({ theme }) => {
     height: '100vh',
     ...displayFlex('center', 'center'),
     flexDirection: 'column',
-    backgroundColor: theme.colors.pageBackground,
+    backgroundColor: 'var(--affine-background-primary-color)',
     img: {
       width: '300px',
       height: '300px',
@@ -103,7 +103,7 @@ const StyledContainer = styled('div')(({ theme }) => {
       ...displayFlex('center', 'center'),
       marginTop: '24px',
       svg: {
-        color: theme.colors.primaryColor,
+        color: 'var(--affine-primary-color)',
         fontSize: '24px',
         marginRight: '12px',
       },

apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx

@@ -32,7 +32,7 @@ export const NavContainer = styled('div')(({ theme }) => {
     width: '100vw',
     height: '52px',
     ...displayFlex('space-between', 'center'),
-    backgroundColor: theme.colors.pageBackground,
+    backgroundColor: 'var(--affine-background-primary-color)',
   };
 });
 
@@ -43,13 +43,13 @@ export const StyledBreadcrumbs = styled(Link)(({ theme }) => {
     paddingLeft: '12px',
     span: {
       padding: '0 12px',
-      fontSize: theme.font.base,
+      fontSize: 'var(--affine-font-base)',
-      lineHeight: theme.font.lineHeight,
+      lineHeight: 'var(--affine-line-height)',
     },
-    ':hover': { color: theme.colors.primaryColor },
+    ':hover': { color: 'var(--affine-primary-color)' },
     transition: 'all .15s',
     ':visited': {
-      ':hover': { color: theme.colors.primaryColor },
+      ':hover': { color: 'var(--affine-primary-color)' },
     },
   };
 });

apps/web/src/providers/ThemeProvider.tsx

@@ -1,17 +1,9 @@
 import type {
-  AffineNextCssVariables,
+  AffineCssVariables,
-  AffineNextLightColorScheme,
   AffineTheme,
   ThemeProviderProps,
 } from '@affine/component';
-import {
+import { AffineMuiThemeProvider, getTheme, muiThemes } from '@affine/component';
-  getDarkTheme,
-  getLightTheme,
-  globalThemeVariables,
-  nextDarkColorScheme,
-  nextLightColorScheme,
-  ThemeProvider as AffineThemeProvider,
-} from '@affine/component';
 import { GlobalStyles } from '@mui/material';
 import kebabCase from 'kebab-case';
 import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
@@ -21,17 +13,9 @@ import { memo, useEffect, useMemo, useState } from 'react';
 
 import { useCurrentMode } from '../hooks/current/use-current-mode';
 
-const ThemeInjector = memo<{
+const CssVariablesInjector = memo<{
-  themeStyle: AffineTheme;
+  theme: AffineTheme;
-  nextThemeStyle: AffineNextLightColorScheme;
+}>(function ThemeInjector({ theme }) {
-}>(function ThemeInjector({ themeStyle, nextThemeStyle }) {
-  const injectAffineNextTheme = useMemo(() => {
-    return Object.entries(nextThemeStyle).reduce((variables, [key, value]) => {
-      variables[`--affine-${kebabCase(key)}` as keyof AffineNextCssVariables] =
-        value;
-      return variables;
-    }, {} as AffineNextCssVariables);
-  }, [nextThemeStyle]);
   return (
     <GlobalStyles
       styles={{
@@ -39,13 +23,17 @@ const ThemeInjector = memo<{
         //   ...globalThemeVariables(themeStyle),
         // },
         ':root': {
-          ...globalThemeVariables(themeStyle),
+          ...Object.entries(theme).reduce((variables, [key, value]) => {
-          ...injectAffineNextTheme,
+            variables[
+              `--affine-${kebabCase(key)}` as keyof AffineCssVariables
+            ] = value;
+            return variables;
+          }, {} as AffineCssVariables),
         },
         html: {
-          fontFamily: themeStyle.font.family,
+          fontFamily: theme.fontFamily,
-          fontSize: themeStyle.font.base,
+          fontSize: theme.fontBase,
-          lineHeight: themeStyle.font.lineHeight,
+          lineHeight: theme.lineHeight,
         },
       }}
     />
@@ -56,29 +44,23 @@ const ThemeProviderInner = memo<React.PropsWithChildren>(
   function ThemeProviderInner({ children }) {
     const { resolvedTheme: theme } = useTheme();
     const editorMode = useCurrentMode();
-    const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
-    const darkThemeStyle = useMemo(
-      () => getDarkTheme(editorMode),
-      [editorMode]
-    );
     // SSR will always render the light theme, so we need to defer the theme if user selected dark mode
-    const [deferTheme, setDeferTheme] = useState('light');
+    const [deferTheme, setDeferTheme] = useState<'light' | 'dark'>('light');
+
+    const themeStyle = useMemo(
+      () => getTheme(deferTheme, editorMode),
+      [deferTheme, editorMode]
+    );
+
     useEffect(() => {
       window.apis?.onThemeChange(theme === 'dark' ? 'dark' : 'light');
       setDeferTheme(theme === 'dark' ? 'dark' : 'light');
     }, [theme]);
     return (
-      <AffineThemeProvider
+      <AffineMuiThemeProvider theme={muiThemes}>
-        theme={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
+        <CssVariablesInjector theme={themeStyle} />
-      >
-        <ThemeInjector
-          themeStyle={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
-          nextThemeStyle={
-            deferTheme === 'dark' ? nextDarkColorScheme : nextLightColorScheme
-          }
-        />
         {children}
-      </AffineThemeProvider>
+      </AffineMuiThemeProvider>
     );
   }
 );

packages/component/.storybook/preview.tsx

@@ -1,9 +1,16 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import '@blocksuite/editor/themes/affine.css';
 import '../src/theme/global.css';
 
-import { getDarkTheme, getLightTheme, ThemeProvider } from '@affine/component';
+import {
+  AffineCssVariables,
+  AffineMuiThemeProvider,
+  getTheme,
+  muiThemes,
+} from '@affine/component';
 import { useDarkMode } from 'storybook-dark-mode';
+import { GlobalStyles } from '@mui/material';
+import kebabCase from 'kebab-case';
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
@@ -14,16 +21,35 @@ export const parameters = {
   },
 };
 
-const lightTheme = getLightTheme('page');
-const darkTheme = getDarkTheme('page');
-
 export const decorators = [
   (Story: React.ComponentType) => {
     const isDark = useDarkMode();
+
+    const theme = useMemo(
+      () => getTheme(isDark ? 'dark' : 'light', 'page'),
+      [isDark]
+    );
     return (
-      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
+      <AffineMuiThemeProvider theme={muiThemes}>
+        <GlobalStyles
+          styles={{
+            ':root': {
+              ...Object.entries(theme).reduce((variables, [key, value]) => {
+                variables[
+                  `--affine-${kebabCase(key)}` as keyof AffineCssVariables
+                ] = value;
+                return variables;
+              }, {} as AffineCssVariables),
+            },
+            html: {
+              fontFamily: theme.fontFamily,
+              fontSize: theme.fontBase,
+              lineHeight: theme.lineHeight,
+            },
+          }}
+        />
         <Story />
-      </ThemeProvider>
+      </AffineMuiThemeProvider>
     );
   },
 ];

packages/component/src/components/contact-modal/style.ts

@@ -7,7 +7,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
     paddingLeft: '96px',
     fontSize: '24px',
     lineHeight: '36px',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     borderRadius: '10px',
     flexDirection: 'column',
     ...displayFlex('center'),
@@ -16,7 +16,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
     letterSpacing: '1px',
 
     ':visited': {
-      color: theme.colors.textColor,
+      color: 'var(--affine-text-primary-color)',
     },
     ':hover': {
       background: 'rgba(68, 97, 242, 0.1)',
@@ -28,7 +28,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
       width: '48px',
       height: '48px',
       marginRight: '24px',
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
       ...absoluteCenter({ vertical: true, position: { left: '26px' } }),
     },
     p: {
@@ -44,7 +44,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
       },
       ':last-of-type': {
         fontSize: '16px',
-        color: theme.colors.primaryColor,
+        color: 'var(--affine-primary-color)',
         fontWeight: '500',
       },
       svg: {
@@ -64,21 +64,21 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
     fontSize: '16px',
     fontWeight: '500',
     borderRadius: '5px',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     transition: 'background .15s, color .15s',
 
     ...displayFlex('center', 'center'),
     flexWrap: 'wrap',
     ':visited': {
-      color: theme.colors.textColor,
+      color: 'var(--affine-text-primary-color)',
     },
     ':hover': {
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
-      background: theme.colors.hoverBackground,
+      background: 'var(--affine-hover-color)',
     },
     svg: {
       width: '22px',
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
     },
     p: {
       width: '100%',
@@ -90,7 +90,7 @@ export const StyledSubTitle = styled('div')(({ theme }) => {
   return {
     fontSize: '18px',
     fontWeight: '600',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     marginTop: '52px',
     marginBottom: '8px',
     textAlign: 'center',
@@ -116,7 +116,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
     fontSize: '14px',
     lineHeight: '20px',
     textAlign: 'center',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     marginTop: '40px',
   };
 });
@@ -128,16 +128,16 @@ export const StyledPrivacyContainer = styled('div')(({ theme }) => {
     a: {
       height: '16px',
       lineHeight: '16px',
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
       padding: '0 8px',
       ':visited': {
-        color: theme.colors.iconColor,
+        color: 'var(--affine-icon-color)',
       },
       ':first-of-type': {
-        borderRight: `1px solid ${theme.colors.borderColor}`,
+        borderRight: '1px solid var(--affine-border-color)',
       },
       ':hover': {
-        color: theme.colors.primaryColor,
+        color: 'var(--affine-primary-color)',
       },
     },
   };

packages/component/src/components/share-menu/disable-public-link/style.ts

@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
     position: 'relative',
     padding: '0px',
     width: '560px',
-    background: theme.colors.popoverBackground,
+    background: 'var(--affine-white)',
     borderRadius: '12px',
     // height: '312px',
   };
@@ -16,7 +16,7 @@ export const StyledModalHeader = styled('div')(({ theme }) => {
     margin: '44px 0px 12px 0px',
     width: '560px',
     fontWeight: '600',
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
     textAlign: 'center',
   };
 });
@@ -27,7 +27,7 @@ export const StyledTextContent = styled('div')(({ theme }) => {
     width: '560px',
     padding: '0px 84px',
     fontWeight: '400',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     textAlign: 'center',
   };
 });
@@ -42,7 +42,7 @@ export const StyledButtonContent = styled('div')(() => {
 });
 export const StyledButton = styled(TextButton)(({ theme }) => {
   return {
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
     height: '32px',
     background: '#F3F0FF',
     border: 'none',

packages/component/src/components/share-menu/styles.ts

@@ -8,12 +8,14 @@ export const StyledShareButton = styled(TextButton, {
     marginLeft: '4px',
     marginRight: '16px',
     border: `1px solid ${
-      isShared ? theme.colors.primaryColor : theme.colors.iconColor
+      isShared ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)'
     }`,
-    color: isShared ? theme.colors.primaryColor : theme.colors.iconColor,
+    color: isShared
+      ? 'var(--affine-primary-color)'
+      : 'var(--affine-icon-color)',
     borderRadius: '8px',
     ':hover': {
-      border: `1px solid ${theme.colors.primaryColor}`,
+      border: `1px solid ${'var(--affine-primary-color)'}`,
     },
     span: {
       ...displayFlex('center', 'center'),
@@ -35,11 +37,11 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
         ...displayFlex('center', 'center'),
         flex: '1',
         height: '30px',
-        color: theme.colors.textColor,
+        color: 'var(--affine-text-primary-color)',
         opacity: isActive ? 1 : 0.2,
         fontWeight: '500',
-        fontSize: theme.font.base,
+        fontSize: 'var(--affine-font-base)',
-        lineHeight: theme.font.lineHeight,
+        lineHeight: 'var(--affine-line-height)',
         cursor: 'pointer',
         transition: 'all 0.15s ease',
         padding: '0 10px',
@@ -47,15 +49,15 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
         borderRadius: '4px',
         position: 'relative',
         ':hover': {
-          background: theme.colors.hoverBackground,
+          background: 'var(--affine-hover-color)',
           opacity: 1,
           color: isActive
-            ? theme.colors.textColor
+            ? 'var(--affine-text-primary-color)'
-            : theme.colors.secondaryTextColor,
+            : 'var(--affine-text-secondary-color)',
           svg: {
             fill: isActive
-              ? theme.colors.textColor
+              ? 'var(--affine-text-primary-color)'
-              : theme.colors.secondaryTextColor,
+              : 'var(--affine-text-secondary-color)',
           },
         },
         svg: {
@@ -69,7 +71,7 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
           left: '0',
           width: '100%',
           height: '2px',
-          background: theme.colors.textColor,
+          background: 'var(--affine-text-primary-color)',
           opacity: 0.2,
         },
       };
@@ -79,7 +81,7 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
 export const StyledIndicator = styled('div')(({ theme }) => {
   return {
     height: '2px',
-    background: theme.colors.textColor,
+    background: 'var(--affine-text-primary-color)',
     position: 'absolute',
     left: '0',
     transition: 'left .3s, width .3s',
@@ -89,8 +91,8 @@ export const StyledInput = styled('input')(({ theme }) => {
   return {
     padding: '4px 8px',
     height: '28px',
-    color: theme.colors.placeHolderColor,
+    color: 'var(--affine-placeholder-color)',
-    border: `1px solid ${theme.colors.placeHolderColor}`,
+    border: `1px solid ${'var(--affine-placeholder-color)'}`,
     cursor: 'default',
     overflow: 'hidden',
     userSelect: 'text',
@@ -101,7 +103,7 @@ export const StyledInput = styled('input')(({ theme }) => {
 });
 export const StyledButton = styled(TextButton)(({ theme }) => {
   return {
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
     height: '32px',
     background: '#F3F0FF',
     border: 'none',
@@ -122,7 +124,7 @@ export const StyledDisableButton = styled(Button)(() => {
 export const StyledLinkSpan = styled('span')(({ theme }) => {
   return {
     marginLeft: '4px',
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
     fontWeight: '500',
     cursor: 'pointer',
   };

packages/component/src/components/workspace-card/styles.ts

@@ -7,7 +7,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
     width: '202px',
     p: {
       height: '20px',
-      fontSize: theme.font.sm,
+      fontSize: 'var(--affine-font-sm)',
       ...displayFlex('flex-start', 'center'),
     },
     svg: {
@@ -24,7 +24,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
 
 export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
   return {
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     fontWeight: 600,
     lineHeight: '24px',
     marginBottom: '10px',
@@ -36,7 +36,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
 export const StyledCard = styled('div')<{
   active?: boolean;
 }>(({ theme, active }) => {
-  const borderColor = active ? theme.colors.primaryColor : 'transparent';
+  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
   return {
     width: '310px',
     height: '124px',
@@ -51,10 +51,10 @@ export const StyledCard = styled('div')<{
     background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
     position: 'relative',
     ':hover': {
-      background: theme.colors.cardHoverBackground,
+      background: 'var(--affine-hover-color)',
       '.add-icon': {
-        borderColor: theme.colors.primaryColor,
+        borderColor: 'var(--affine-primary-color)',
-        color: theme.colors.primaryColor,
+        color: 'var(--affine-primary-color)',
       },
       '.setting-entry': {
         opacity: 1,
@@ -84,11 +84,11 @@ export const StyledSettingLink = styled(IconButton)(({ theme }) => {
     bottom: '6px',
     opacity: 0,
     borderRadius: '4px',
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-background-primary-color)',
     pointerEvents: 'none',
     transition: 'all .15s',
     ':hover': {
-      background: theme.colors.pageBackground,
+      background: 'var(--affine-background-primary-color)',
     },
   };
 });

packages/component/src/index.ts

@@ -17,155 +17,3 @@ export * from './ui/table';
 export * from './ui/toast';
 export * from './ui/tooltip';
 export * from './ui/tree-view';
-
-declare module '@mui/material/styles' {
-  interface Theme {
-    colors: {
-      primaryColor: string;
-
-      pageBackground: string;
-      popoverBackground: string;
-      tooltipBackground: string;
-      hoverBackground: string;
-      innerHoverBackground: string;
-      modalBackground: string;
-      // Use for the quick search tips background
-      backgroundTertiaryColor: string;
-      codeBackground: string;
-      codeBlockBackground: string;
-      // Use for blockHub and slide bar background
-      hubBackground: string;
-      cardHoverBackground: string;
-      warningBackground: string;
-      errorBackground: string;
-      // Use for the page`s text
-      textColor: string;
-      secondaryTextColor: string;
-      textEmphasisColor: string;
-      // Use for the editor`s text, because in edgeless mode text is different form other
-      edgelessTextColor: string;
-      linkColor: string;
-      // In dark mode, normal text`s (not bold) color
-      linkColor2: string;
-      linkVisitedColor: string;
-      iconColor: string;
-      handleColor: string;
-      tooltipColor: string;
-      codeColor: string;
-      quoteColor: string;
-      placeHolderColor: string;
-      selectedColor: string;
-      borderColor: string;
-      disableColor: string;
-      warningColor: string;
-      errorColor: string;
-      lineNumberColor: string;
-    };
-    font: {
-      title: string;
-      h1: string;
-      h2: string;
-      h3: string;
-      h4: string;
-      h5: string;
-      h6: string;
-      base: string;
-      sm: string; // small
-      xs: string; // tiny
-
-      family: string;
-      numberFamily: string;
-      codeFamily: string;
-
-      lineHeight: string | number;
-    };
-    zIndex: {
-      modal: number;
-      popover: number;
-    };
-    shadow: {
-      modal: string;
-      popover: string;
-      tooltip: string;
-    };
-    space: {
-      paragraph: string;
-    };
-    radius: {
-      popover: string;
-    };
-  }
-
-  interface ThemeOptions {
-    colors: {
-      primaryColor: string;
-
-      pageBackground: string;
-      popoverBackground: string;
-      tooltipBackground: string;
-      hoverBackground: string;
-      innerHoverBackground: string;
-      modalBackground: string;
-      // Use for the quick search tips background
-      backgroundTertiaryColor: string;
-      codeBackground: string;
-      codeBlockBackground: string;
-      // Use for blockHub and slide bar background
-      hubBackground: string;
-      cardHoverBackground: string;
-      warningBackground: string;
-      errorBackground: string;
-      // Use for the page`s text
-      textColor: string;
-      secondaryTextColor: string;
-      textEmphasisColor: string;
-      // Use for the editor`s text, because in edgeless mode text is different form other
-      edgelessTextColor: string;
-      linkColor: string;
-      // In dark mode, normal text`s (not bold) color
-      linkColor2: string;
-      linkVisitedColor: string;
-      iconColor: string;
-      handleColor: string;
-      tooltipColor: string;
-      codeColor: string;
-      quoteColor: string;
-      placeHolderColor: string;
-      selectedColor: string;
-      borderColor: string;
-      disableColor: string;
-      warningColor: string;
-      errorColor: string;
-      lineNumberColor: string;
-    };
-    font: {
-      title: string;
-      h1: string;
-      h2: string;
-      h3: string;
-      h4: string;
-      h5: string;
-      h6: string;
-      base: string;
-      sm: string; // small
-      xs: string; // tiny
-
-      family: string;
-      numberFamily: string;
-      codeFamily: string;
-
-      lineHeight: string | number;
-    };
-    shadow: {
-      modal: string;
-      popover: string;
-      tooltip: string;
-    };
-    space: {
-      paragraph: string;
-    };
-    radius: {
-      popover: string;
-    };
-  }
-}

packages/component/src/styles/MuiThemeProvider.tsx

@@ -5,20 +5,19 @@ import {
   css,
   keyframes,
   styled,
+  type ThemeOptions,
   ThemeProvider as MuiThemeProvider,
 } from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
 import { useMemo } from 'react';
 
-import type { AffineTheme } from './types';
-
 export { alpha, css, keyframes, styled };
 
-export const ThemeProvider = ({
+export const AffineMuiThemeProvider = ({
   theme,
   children,
 }: PropsWithChildren<{
-  theme: AffineTheme;
+  theme: ThemeOptions;
 }>) => {
   const muiTheme = useMemo(() => createMuiTheme(theme), [theme]);
   return (

packages/component/src/styles/color-scheme.ts

@@ -1,153 +0,0 @@
-type Kebab<
-  T extends string,
-  A extends string = ''
-> = T extends `${infer F}${infer R}`
-  ? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
-  : A;
-
-export type AffineNextLightColorScheme = typeof nextLightColorScheme;
-
-export type AffineNextCssVariables = {
-  [Key in `--affine-${Kebab<keyof AffineNextLightColorScheme>}`]: string;
-};
-
-// Refs: https://github.com/toeverything/AFFiNE/issues/1796
-export const nextLightColorScheme = {
-  brandColor: 'rgb(84, 56, 255)',
-  tertiaryColor: 'rgb(243, 240, 255)',
-  primaryColor: 'rgb(84, 56, 255)',
-  secondaryColor: 'rgb(125, 145, 255)',
-  backgroundSuccessColor: 'rgb(255, 255, 255)',
-  backgroundErrorColor: 'rgba(255, 255, 255, 0.2)',
-  backgroundProcessingColor: 'rgb(255, 255, 255)',
-  backgroundWarningColor: 'rgb(255, 255, 255)',
-  backgroundPrimaryColor: 'rgb(255, 255, 255)',
-  backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
-  backgroundSecondaryColor: 'rgb(251, 250, 252)',
-  backgroundTertiaryColor: 'rgb(233, 233, 236)',
-  backgroundCodeBlock: 'rgb(250, 251, 253)',
-  backgroundModalColor: 'rgba(0, 0, 0, 0.6)',
-  textPrimaryColor: 'rgb(66, 65, 73)',
-  textSecondaryColor: 'rgb(142, 141, 145)',
-  textDisableColor: 'rgb(169, 169, 173)',
-  textEmphasisColor: 'rgb(84, 56, 255)',
-  hoverColor: 'rgba(0, 0, 0, 0.04)',
-  linkColor: 'rgb(125, 145, 255)',
-  quoteColor: 'rgb(100, 95, 130)',
-  iconColor: 'rgb(119, 117, 125)',
-  iconSecondary: 'rgba(119, 117, 125, 0.6)',
-  borderColor: 'rgb(227, 226, 228)',
-  dividerColor: 'rgb(227, 226, 228)',
-  placeholderColor: 'rgb(192, 191, 193)',
-  edgelessGridColor: 'rgb(230, 230, 230)',
-  successColor: 'rgb(16, 203, 134)',
-  warningColor: 'rgb(255, 99, 31)',
-  errorColor: 'rgb(235, 67, 53)',
-  processingColor: 'rgb(39, 118, 255)',
-  black10: 'rgba(0, 0, 0, 0.1)',
-  black30: 'rgba(0, 0, 0, 0.3)',
-  black50: 'rgba(0, 0, 0, 0.5)',
-  black60: 'rgba(0, 0, 0, 0.6)',
-  black80: 'rgba(0, 0, 0, 0.8)',
-  black90: 'rgba(0, 0, 0, 0.9)',
-  black: 'rgb(0, 0, 0)',
-  white10: 'rgba(255, 255, 255, 0.1)',
-  white30: 'rgba(255, 255, 255, 0.3)',
-  white50: 'rgba(255, 255, 255, 0.5)',
-  white60: 'rgba(255, 255, 255, 0.6)',
-  white80: 'rgba(255, 255, 255, 0.8)',
-  white90: 'rgba(255, 255, 255, 0.9)',
-  white: 'rgb(255, 255, 255)',
-  tagWhite: 'rgb(245, 245, 245)',
-  tagGray: 'rgb(227, 226, 224)',
-  tagRed: 'rgb(255, 225, 225)',
-  tagOrange: 'rgb(255, 234, 202)',
-  tagYellow: 'rgb(255, 244, 216)',
-  tagGreen: 'rgb(223, 244, 232)',
-  tagTeal: 'rgb(223, 244, 243)',
-  tagBlue: 'rgb(225, 239, 255)',
-  tagPurple: 'rgb(243, 240, 255)',
-  tagPink: 'rgb(252, 232, 255)',
-  paletteYellow: 'rgb(255, 232, 56)',
-  paletteOrange: 'rgb(255, 175, 56)',
-  paletteTangerine: 'rgb(255, 99, 31)',
-  paletteRed: 'rgb(252, 63, 85)',
-  paletteMagenta: 'rgb(255, 56, 179)',
-  palettePurple: 'rgb(182, 56, 255)',
-  paletteNavy: 'rgb(59, 37, 204)',
-  paletteBlue: 'rgb(79, 144, 255)',
-  paletteGreen: 'rgb(16, 203, 134)',
-  paletteGrey: 'rgb(153, 153, 153)',
-  paletteWhite: 'rgb(255, 255, 255)',
-  paletteBlack: 'rgb(0, 0, 0)',
-};
-
-export const nextDarkColorScheme = {
-  brandColor: 'rgb(84, 56, 255)',
-  primaryColor: 'rgb(118, 95, 254)',
-  secondaryColor: 'rgb(144, 150, 245)',
-  tertiaryColor: 'rgb(30, 30, 30)',
-  hoverColor: 'rgba(255, 255, 255, 0.1)',
-  iconColor: 'rgb(168, 168, 160)',
-  iconSecondary: 'rgba(168,168,160,0.6)',
-  borderColor: 'rgb(57, 57, 57)',
-  dividerColor: 'rgb(114, 114, 114)',
-  placeholderColor: 'rgb(62, 62, 63)',
-  quoteColor: 'rgb(147, 144, 163)',
-  linkColor: 'rgb(185, 191, 227)',
-  edgelessGridColor: 'rgb(49, 49, 49)',
-  successColor: 'rgb(77, 213, 181)',
-  warningColor: 'rgb(255, 123, 77)',
-  errorColor: 'rgb(212, 140, 130)',
-  processingColor: 'rgb(195, 215, 255)',
-  textEmphasisColor: 'rgb(208, 205, 220)',
-  textPrimaryColor: 'rgb(234, 234, 234)',
-  textSecondaryColor: 'rgb(156, 156, 160)',
-  textDisableColor: 'rgb(119, 117, 125)',
-  black10: 'rgba(255, 255, 255, 0.1)',
-  black30: 'rgba(255, 255, 255, 0.3)',
-  black50: 'rgba(255, 255, 255, 0.5)',
-  black60: 'rgba(255, 255, 255, 0.6)',
-  black80: 'rgba(255, 255, 255, 0.8)',
-  black90: 'rgba(255, 255, 255, 0.9)',
-  black: 'rgb(255, 255, 255)',
-  white10: 'rgba(0, 0, 0, 0.1)',
-  white30: 'rgba(0, 0, 0, 0.3)',
-  white50: 'rgba(0, 0, 0, 0.5)',
-  white60: 'rgba(0, 0, 0, 0.6)',
-  white80: 'rgba(0, 0, 0, 0.8)',
-  white90: 'rgba(0, 0, 0, 0.9)',
-  white: 'rgb(0, 0, 0)',
-  backgroundCodeBlock: 'rgb(41, 44, 51)',
-  backgroundTertiaryColor: 'rgb(30, 30, 30)',
-  backgroundProcessingColor: 'rgb(255, 255, 255)',
-  backgroundErrorColor: 'rgb(255, 255, 255)',
-  backgroundWarningColor: 'rgb(255, 255, 255)',
-  backgroundSuccessColor: 'rgb(255, 255, 255)',
-  backgroundPrimaryColor: 'rgb(20, 20, 20)',
-  backgroundSecondaryColor: 'rgb(32, 32, 32)',
-  backgroundModalColor: 'rgba(0, 0, 0, 0.8)',
-  backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
-  tagBlue: 'rgb(10, 84, 170)',
-  tagGreen: 'rgb(55, 135, 79)',
-  tagTeal: 'rgb(33, 145, 138)',
-  tagWhite: 'rgb(84, 84, 84)',
-  tagPurple: 'rgb(59, 38, 141)',
-  tagRed: 'rgb(139, 63, 63)',
-  tagPink: 'rgb(194, 132, 132)',
-  tagYellow: 'rgb(187, 165, 61)',
-  tagOrange: 'rgb(231, 161, 58)',
-  tagGray: 'rgb(41, 41, 41)',
-  paletteYellow: 'rgb(255, 232, 56)',
-  paletteOrange: 'rgb(255, 175, 56)',
-  paletteTangerine: 'rgb(255, 99, 31)',
-  paletteRed: 'rgb(252, 63, 85)',
-  paletteMagenta: 'rgb(255, 56, 179)',
-  palettePurple: 'rgb(182, 56, 255)',
-  paletteNavy: 'rgb(59, 37, 204)',
-  paletteBlue: 'rgb(79, 144, 255)',
-  paletteGreen: 'rgb(16, 203, 134)',
-  paletteGrey: 'rgb(153, 153, 153)',
-  paletteWhite: 'rgb(255, 255, 255)',
-  paletteBlack: 'rgb(0, 0, 0)',
-} satisfies AffineNextLightColorScheme;

packages/component/src/styles/index.ts

@@ -1,6 +1,6 @@
-export * from './color-scheme';
 export * from './helper';
-export * from './styled';
+export * from './mui-theme';
+export * from './MuiThemeProvider';
 export * from './theme';
 export * from './types';
 export * from './utils';

packages/component/src/styles/mui-theme.ts

@@ -0,0 +1,15 @@
+import '@emotion/react';
+
+import type { ThemeOptions } from '@mui/material';
+
+export const muiThemes: ThemeOptions = {
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 640,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+    },
+  },
+};

packages/component/src/styles/theme.ts

@@ -1,212 +1,216 @@
-import '@emotion/react';
-
 import type { EditorContainer } from '@blocksuite/editor';
 
-import { nextDarkColorScheme, nextLightColorScheme } from './color-scheme';
+import type { Theme } from './types';
-import type { AffineTheme, AffineThemeCSSVariables } from './types';
+
+type Kebab<
+  T extends string,
+  A extends string = ''
+> = T extends `${infer F}${infer R}`
+  ? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
+  : A;
+
+export type AffineTheme = typeof lightTheme & {
+  editorMode: NonNullable<EditorContainer['mode']>;
+};
+
+export type AffineCssVariables = {
+  [Key in `--affine-${Kebab<keyof AffineTheme>}`]: string;
+};
 
 const basicFontFamily =
   'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
 
-export const getLightTheme = (
+export const baseTheme = {
-  editorMode: EditorContainer['mode']
+  // shadow
-): AffineTheme => {
+  popoverShadow:
-  return {
-    palette: {
-      mode: 'light',
-    },
-    editorMode,
-    colors: {
-      pageBackground: '#fff',
-      hoverBackground: 'rgba(0,0,0,.04)',
-      innerHoverBackground: '#E9E9EC',
-      popoverBackground: '#fff',
-      tooltipBackground: '#261499',
-      codeBackground: '#f2f5f9',
-      codeBlockBackground: '#FAFBFD',
-      hubBackground: '#fbfbfc',
-      cardHoverBackground: '#f8f9ff',
-      warningBackground: '#FFF9C7',
-      errorBackground: '#FFDED8',
-      modalBackground: 'rgba(0, 0, 0, 0.6)',
-
-      textColor: '#424149',
-      secondaryTextColor: '#8E8D91',
-      edgelessTextColor: '#3A4C5C',
-      handleColor: '#c7c3d9',
-      linkColor2: '#5438FF',
-      linkVisitedColor: '#5438FF',
-      tooltipColor: '#fff',
-      codeColor: '#77757D',
-      placeHolderColor: '#C0BFC1',
-      selectedColor: 'rgba(84, 56, 255, 0.04)',
-      disableColor: '#A9A9AD',
-      lineNumberColor: '#77757D',
-      ...nextLightColorScheme,
-    },
-    font: {
-      title: '36px',
-      h1: '28px',
-      h2: '26px',
-      h3: '24px',
-      h4: '22px',
-      h5: '20px',
-      h6: '18px',
-      base: '16px',
-      sm: '14px',
-      xs: '12px',
-
-      family: `Avenir Next, Poppins, ${basicFontFamily}`,
-      numberFamily: `Roboto Mono, ${basicFontFamily}`,
-      codeFamily: `Space Mono, Consolas, Menlo, Monaco, Courier, monospace, ${basicFontFamily}`,
-      lineHeight: 'calc(1em + 8px)',
-    },
-    zIndex: {
-      modal: 1000,
-      popover: 100,
-    },
-    shadow: {
-      popover: '0px 0px 12px rgba(66, 65, 73, 0.14)',
-      modal:
-        '0px 0px 20px 4px rgba(65, 64, 72, 0.24), 0px 0px 12px rgba(66, 65, 73, 0.14)',
-      tooltip: '0px 0px 4px rgba(0, 0, 0, 0.14)',
-    },
-    space: {
-      paragraph: '8px',
-    },
-    radius: {
-      popover: '10px',
-    },
-    breakpoints: {
-      values: {
-        xs: 0,
-        sm: 640,
-        md: 960,
-        lg: 1280,
-        xl: 1920,
-      },
-    },
-  };
-};
-
-export const getDarkTheme = (
-  editorMode: EditorContainer['mode']
-): AffineTheme => {
-  const lightTheme = getLightTheme(editorMode);
-
-  return {
-    ...lightTheme,
-    palette: {
-      mode: 'dark',
-    },
-    colors: {
-      pageBackground: '#2c2c2c',
-      hoverBackground: 'rgba(0,0,0,.04)',
-      innerHoverBackground: '#5A5A5A',
-      popoverBackground: '#1F2021',
-      tooltipBackground: '#0C0A15',
-      codeBackground:
-        editorMode === 'edgeless'
-          ? lightTheme.colors.codeBackground
-          : '#505662',
-      codeBlockBackground: '#292C33',
-      hubBackground: '#272727',
-      cardHoverBackground: '#363636',
-      warningBackground: '#FFF9C7',
-      errorBackground: '#FFDED8',
-      modalBackground: 'rgba(0, 0, 0, 0.8)',
-
-      textColor: '#fff',
-      secondaryTextColor: '#8E8D91',
-      edgelessTextColor: '#3A4C5C',
-      handleColor: '#c7c3d9',
-      linkColor2: '#0C0A15',
-      linkVisitedColor: '#505FAB',
-      tooltipColor: '#fff',
-      codeColor:
-        editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD',
-      placeHolderColor: '#C7C7C7',
-      selectedColor: 'rgba(104, 128, 255, 0.1)',
-      disableColor: '#4b4b4b',
-      lineNumberColor: '#888A9E',
-      ...nextDarkColorScheme,
-    },
-    shadow: {
-      popover:
     '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
-      modal: '0px 4px 24px #161616',
+  modalShadow: '0px 4px 24px #161616',
+  tooltipShadow: '0px 0px 4px rgba(0, 0, 0, 0.14)',
 
-      tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
+  // font
-    },
+  fontFamily: `Avenir Next, Poppins, ${basicFontFamily}`,
-  };
+  fontNumberFamily: `Roboto Mono, ${basicFontFamily}`,
+  fontCodeFamily: `Space Mono, Consolas, Menlo, Monaco, Courier, monospace, ${basicFontFamily}`,
+  fontH1: '28px',
+  fontH2: '26px',
+  fontH3: '24px',
+  fontH4: '22px',
+  fontH5: '20px',
+  fontH6: '18px',
+  fontBase: '16px',
+  fontSm: '14px',
+  fontXs: '12px',
+
+  lineHeight: 'calc(1em + 8px)',
+
+  zIndexModal: '1000',
+  zIndexPopover: '100',
+
+  paragraphSpace: '8px',
+  popoverRadius: '10px',
+
+  zoom: '1',
+  scale: 'calc(1 / var(--affine-zoom))',
 };
 
-/**
+// Refs: https://github.com/toeverything/AFFiNE/issues/1796
- * @deprecated these theme will be removed in the future
+export const lightTheme = {
- */
+  ...baseTheme,
-export const globalThemeVariables: (
+
-  theme: AffineTheme
+  themeMode: 'light',
-) => AffineThemeCSSVariables = theme => {
+
+  brandColor: 'rgb(84, 56, 255)',
+  tertiaryColor: 'rgb(243, 240, 255)',
+  primaryColor: 'rgb(84, 56, 255)',
+  secondaryColor: 'rgb(125, 145, 255)',
+  backgroundSuccessColor: 'rgb(255, 255, 255)',
+  backgroundErrorColor: 'rgba(255, 255, 255, 0.2)',
+  backgroundProcessingColor: 'rgb(255, 255, 255)',
+  backgroundWarningColor: 'rgb(255, 255, 255)',
+  backgroundPrimaryColor: 'rgb(255, 255, 255)',
+  backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
+  backgroundSecondaryColor: 'rgb(251, 250, 252)',
+  backgroundTertiaryColor: 'rgb(233, 233, 236)',
+  backgroundCodeBlock: 'rgb(250, 251, 253)',
+  backgroundModalColor: 'rgba(0, 0, 0, 0.6)',
+  textPrimaryColor: 'rgb(66, 65, 73)',
+  textSecondaryColor: 'rgb(142, 141, 145)',
+  textDisableColor: 'rgb(169, 169, 173)',
+  textEmphasisColor: 'rgb(84, 56, 255)',
+  hoverColor: 'rgba(0, 0, 0, 0.04)',
+  linkColor: 'rgb(125, 145, 255)',
+  quoteColor: 'rgb(100, 95, 130)',
+  iconColor: 'rgb(119, 117, 125)',
+  iconSecondary: 'rgba(119, 117, 125, 0.6)',
+  borderColor: 'rgb(227, 226, 228)',
+  dividerColor: 'rgb(227, 226, 228)',
+  placeholderColor: 'rgb(192, 191, 193)',
+  edgelessGridColor: 'rgb(230, 230, 230)',
+  successColor: 'rgb(16, 203, 134)',
+  warningColor: 'rgb(255, 99, 31)',
+  errorColor: 'rgb(235, 67, 53)',
+  processingColor: 'rgb(39, 118, 255)',
+  black10: 'rgba(0, 0, 0, 0.1)',
+  black30: 'rgba(0, 0, 0, 0.3)',
+  black50: 'rgba(0, 0, 0, 0.5)',
+  black60: 'rgba(0, 0, 0, 0.6)',
+  black80: 'rgba(0, 0, 0, 0.8)',
+  black90: 'rgba(0, 0, 0, 0.9)',
+  black: 'rgb(0, 0, 0)',
+  white10: 'rgba(255, 255, 255, 0.1)',
+  white30: 'rgba(255, 255, 255, 0.3)',
+  white50: 'rgba(255, 255, 255, 0.5)',
+  white60: 'rgba(255, 255, 255, 0.6)',
+  white80: 'rgba(255, 255, 255, 0.8)',
+  white90: 'rgba(255, 255, 255, 0.9)',
+  white: 'rgb(255, 255, 255)',
+  tagWhite: 'rgb(245, 245, 245)',
+  tagGray: 'rgb(227, 226, 224)',
+  tagRed: 'rgb(255, 225, 225)',
+  tagOrange: 'rgb(255, 234, 202)',
+  tagYellow: 'rgb(255, 244, 216)',
+  tagGreen: 'rgb(223, 244, 232)',
+  tagTeal: 'rgb(223, 244, 243)',
+  tagBlue: 'rgb(225, 239, 255)',
+  tagPurple: 'rgb(243, 240, 255)',
+  tagPink: 'rgb(252, 232, 255)',
+  paletteYellow: 'rgb(255, 232, 56)',
+  paletteOrange: 'rgb(255, 175, 56)',
+  paletteTangerine: 'rgb(255, 99, 31)',
+  paletteRed: 'rgb(252, 63, 85)',
+  paletteMagenta: 'rgb(255, 56, 179)',
+  palettePurple: 'rgb(182, 56, 255)',
+  paletteNavy: 'rgb(59, 37, 204)',
+  paletteBlue: 'rgb(79, 144, 255)',
+  paletteGreen: 'rgb(16, 203, 134)',
+  paletteGrey: 'rgb(153, 153, 153)',
+  paletteWhite: 'rgb(255, 255, 255)',
+  paletteBlack: 'rgb(0, 0, 0)',
+  tooltip: '#424149',
+};
+
+export const darkTheme = {
+  ...baseTheme,
+
+  themeMode: 'dark',
+
+  brandColor: 'rgb(84, 56, 255)',
+  primaryColor: 'rgb(118, 95, 254)',
+  secondaryColor: 'rgb(144, 150, 245)',
+  tertiaryColor: 'rgb(30, 30, 30)',
+  hoverColor: 'rgba(255, 255, 255, 0.1)',
+  iconColor: 'rgb(168, 168, 160)',
+  iconSecondary: 'rgba(168,168,160,0.6)',
+  borderColor: 'rgb(57, 57, 57)',
+  dividerColor: 'rgb(114, 114, 114)',
+  placeholderColor: 'rgb(62, 62, 63)',
+  quoteColor: 'rgb(147, 144, 163)',
+  linkColor: 'rgb(185, 191, 227)',
+  edgelessGridColor: 'rgb(49, 49, 49)',
+  successColor: 'rgb(77, 213, 181)',
+  warningColor: 'rgb(255, 123, 77)',
+  errorColor: 'rgb(212, 140, 130)',
+  processingColor: 'rgb(195, 215, 255)',
+  textEmphasisColor: 'rgb(208, 205, 220)',
+  textPrimaryColor: 'rgb(234, 234, 234)',
+  textSecondaryColor: 'rgb(156, 156, 160)',
+  textDisableColor: 'rgb(119, 117, 125)',
+  black10: 'rgba(255, 255, 255, 0.1)',
+  black30: 'rgba(255, 255, 255, 0.3)',
+  black50: 'rgba(255, 255, 255, 0.5)',
+  black60: 'rgba(255, 255, 255, 0.6)',
+  black80: 'rgba(255, 255, 255, 0.8)',
+  black90: 'rgba(255, 255, 255, 0.9)',
+  black: 'rgb(255, 255, 255)',
+  white10: 'rgba(0, 0, 0, 0.1)',
+  white30: 'rgba(0, 0, 0, 0.3)',
+  white50: 'rgba(0, 0, 0, 0.5)',
+  white60: 'rgba(0, 0, 0, 0.6)',
+  white80: 'rgba(0, 0, 0, 0.8)',
+  white90: 'rgba(0, 0, 0, 0.9)',
+  white: 'rgb(0, 0, 0)',
+  backgroundCodeBlock: 'rgb(41, 44, 51)',
+  backgroundTertiaryColor: 'rgb(30, 30, 30)',
+  backgroundProcessingColor: 'rgb(255, 255, 255)',
+  backgroundErrorColor: 'rgb(255, 255, 255)',
+  backgroundWarningColor: 'rgb(255, 255, 255)',
+  backgroundSuccessColor: 'rgb(255, 255, 255)',
+  backgroundPrimaryColor: 'rgb(20, 20, 20)',
+  backgroundSecondaryColor: 'rgb(32, 32, 32)',
+  backgroundModalColor: 'rgba(0, 0, 0, 0.8)',
+  backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
+  tagBlue: 'rgb(10, 84, 170)',
+  tagGreen: 'rgb(55, 135, 79)',
+  tagTeal: 'rgb(33, 145, 138)',
+  tagWhite: 'rgb(84, 84, 84)',
+  tagPurple: 'rgb(59, 38, 141)',
+  tagRed: 'rgb(139, 63, 63)',
+  tagPink: 'rgb(194, 132, 132)',
+  tagYellow: 'rgb(187, 165, 61)',
+  tagOrange: 'rgb(231, 161, 58)',
+  tagGray: 'rgb(41, 41, 41)',
+  paletteYellow: 'rgb(255, 232, 56)',
+  paletteOrange: 'rgb(255, 175, 56)',
+  paletteTangerine: 'rgb(255, 99, 31)',
+  paletteRed: 'rgb(252, 63, 85)',
+  paletteMagenta: 'rgb(255, 56, 179)',
+  palettePurple: 'rgb(182, 56, 255)',
+  paletteNavy: 'rgb(59, 37, 204)',
+  paletteBlue: 'rgb(79, 144, 255)',
+  paletteGreen: 'rgb(16, 203, 134)',
+  paletteGrey: 'rgb(153, 153, 153)',
+  paletteWhite: 'rgb(255, 255, 255)',
+  paletteBlack: 'rgb(0, 0, 0)',
+  tooltip: '#EAEAEA',
+} satisfies Omit<AffineTheme, 'editorMode'>;
+
+export const getTheme: (
+  themeMode: Theme,
+  editorMode: NonNullable<EditorContainer['mode']>
+) => AffineTheme = (themeMode, editorMode) => {
   return {
-    '--affine-theme-mode': theme.palette.mode,
+    editorMode,
-    '--affine-editor-mode': theme.editorMode,
 
-    '--affine-primary-color': theme.colors.primaryColor,
+    ...(themeMode === 'light' ? lightTheme : darkTheme),
-
-    '--affine-page-background': theme.colors.pageBackground,
-    '--affine-popover-background': theme.colors.popoverBackground,
-    '--affine-hover-background': theme.colors.hoverBackground,
-    '--affine-code-background': theme.colors.codeBackground,
-    '--affine-tooltip-background': theme.colors.tooltipBackground,
-
-    '--affine-hub-background': theme.colors.hubBackground,
-    '--affine-card-hover-background': theme.colors.cardHoverBackground,
-
-    '--affine-text-color': theme.colors.textColor,
-    '--affine-secondary-text-color': theme.colors.secondaryTextColor,
-    '--affine-edgeless-text-color': theme.colors.edgelessTextColor,
-    '--affine-link-color': theme.colors.linkColor,
-    // In dark mode, normal text`s (not bold) color
-    '--affine-link-color2': theme.colors.linkColor2,
-    '--affine-link-visited-color': theme.colors.linkVisitedColor,
-    '--affine-icon-color': theme.colors.iconColor,
-    '--affine-block-handle-color': theme.colors.handleColor,
-    '--affine-code-color': theme.colors.codeColor,
-    '--affine-code-block-background': theme.colors.codeBlockBackground,
-    '--affine-quote-color': theme.colors.quoteColor,
-    '--affine-selected-color': theme.colors.selectedColor,
-    '--affine-placeholder-color': theme.colors.placeHolderColor,
-    '--affine-border-color': theme.colors.borderColor,
-    '--affine-disable-color': theme.colors.disableColor,
-    '--affine-tooltip-color': theme.colors.tooltipColor,
-    '--affine-line-number-color': theme.colors.lineNumberColor,
-
-    '--affine-modal-shadow': theme.shadow.modal,
-    '--affine-popover-shadow': theme.shadow.popover,
-
-    '--affine-font-h1': theme.font.h1,
-    '--affine-font-h2': theme.font.h2,
-    '--affine-font-h3': theme.font.h3,
-    '--affine-font-h4': theme.font.h4,
-    '--affine-font-h5': theme.font.h5,
-    '--affine-font-h6': theme.font.h6,
-    '--affine-font-base': theme.font.base,
-    '--affine-font-sm': theme.font.sm, // small
-    '--affine-font-xs': theme.font.xs, // tiny
-
-    '--affine-line-height': theme.font.lineHeight,
-
-    '--affine-z-index-modal': theme.zIndex.modal,
-    '--affine-z-index-popover': theme.zIndex.popover,
-
-    '--affine-font-family': theme.font.family,
-    '--affine-font-number-family': theme.font.numberFamily,
-    '--affine-font-code-family': theme.font.codeFamily,
-
-    '--affine-paragraph-space': theme.space.paragraph,
-    '--affine-popover-radius': theme.radius.popover,
-
-    '--affine-zoom': '1',
-    '--affine-scale': 'calc(1 / var(--affine-zoom))',
   };
 };

packages/component/src/styles/types.ts

@@ -1,170 +1,11 @@
-import type { EditorContainer } from '@blocksuite/editor';
+import type { AffineTheme } from './theme';
-import type { CSSProperties } from 'react';
-
-import type { AffineNextLightColorScheme } from './color-scheme';
-
-export type Theme = 'light' | 'dark';
-export type ThemeMode = Theme | 'auto';
 
 export type ThemeProviderProps = {
   defaultTheme?: Theme;
 };
 
-export type ThemeProviderValue = {
+export type Theme = 'light' | 'dark';
-  theme: AffineTheme;
+export type ThemeMode = Theme | 'auto';
-  mode: Theme;
-  changeMode: (newMode: Theme) => void;
-};
-
-export interface AffineTheme {
-  editorMode: EditorContainer['mode'];
-  palette: {
-    mode: 'light' | 'dark';
-  };
-  colors: {
-    primaryColor: string;
-
-    pageBackground: string;
-    popoverBackground: string;
-    tooltipBackground: string;
-    hoverBackground: string;
-    innerHoverBackground: string;
-    modalBackground: string;
-    // Use for the quick search tips background
-    backgroundTertiaryColor: string;
-    codeBackground: string;
-    codeBlockBackground: string;
-    // Use for blockHub and slide bar background
-    hubBackground: string;
-    cardHoverBackground: string;
-    warningBackground: string;
-    errorBackground: string;
-    // Use for the page`s text
-    textColor: string;
-    secondaryTextColor: string;
-    textEmphasisColor: string;
-    // Use for the editor`s text, because in edgeless mode text is different form other
-    edgelessTextColor: string;
-    linkColor: string;
-    // In dark mode, normal text`s (not bold) color
-    linkColor2: string;
-    linkVisitedColor: string;
-    iconColor: string;
-    handleColor: string;
-    tooltipColor: string;
-    codeColor: string;
-    quoteColor: string;
-    placeHolderColor: string;
-    selectedColor: string;
-    borderColor: string;
-    disableColor: string;
-    warningColor: string;
-    errorColor: string;
-    lineNumberColor: string;
-  } & AffineNextLightColorScheme;
-  font: {
-    title: string;
-    h1: string;
-    h2: string;
-    h3: string;
-    h4: string;
-    h5: string;
-    h6: string;
-    base: string;
-    sm: string; // small
-    xs: string; // tiny
-
-    family: string;
-    numberFamily: string;
-    codeFamily: string;
-
-    lineHeight: string | number;
-  };
-  zIndex: {
-    modal: number;
-    popover: number;
-  };
-  shadow: {
-    modal: string;
-    popover: string;
-    tooltip: string;
-  };
-  space: {
-    paragraph: string;
-  };
-  radius: {
-    popover: string;
-  };
-  breakpoints: {
-    values: {
-      xs: number;
-      sm: number;
-      md: number;
-      lg: number;
-      xl: number;
-    };
-  };
-}
-
-export interface AffineThemeCSSVariables {
-  '--affine-theme-mode': Theme;
-  '--affine-editor-mode': EditorContainer['mode'];
-
-  '--affine-primary-color': AffineTheme['colors']['primaryColor'];
-  '--affine-page-background': AffineTheme['colors']['pageBackground'];
-  '--affine-popover-background': AffineTheme['colors']['popoverBackground'];
-  '--affine-hover-background': AffineTheme['colors']['hoverBackground'];
-  '--affine-code-background': AffineTheme['colors']['codeBackground'];
-
-  '--affine-code-block-background': AffineTheme['colors']['codeBlockBackground'];
-  '--affine-tooltip-background': AffineTheme['colors']['tooltipBackground'];
-
-  '--affine-hub-background': AffineTheme['colors']['hubBackground'];
-  '--affine-card-hover-background': AffineTheme['colors']['cardHoverBackground'];
-  '--affine-text-color': AffineTheme['colors']['textColor'];
-  '--affine-secondary-text-color': AffineTheme['colors']['secondaryTextColor'];
-  '--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor'];
-  '--affine-link-color': AffineTheme['colors']['linkColor'];
-  // In dark mode, normal text`s (not bold) color
-  '--affine-link-color2': AffineTheme['colors']['linkColor2'];
-  '--affine-link-visited-color': AffineTheme['colors']['linkVisitedColor'];
-  '--affine-icon-color': AffineTheme['colors']['iconColor'];
-  '--affine-code-color': AffineTheme['colors']['codeColor'];
-  '--affine-quote-color': AffineTheme['colors']['quoteColor'];
-  '--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];
-  '--affine-selected-color': AffineTheme['colors']['selectedColor'];
-  '--affine-border-color': AffineTheme['colors']['borderColor'];
-  '--affine-disable-color': AffineTheme['colors']['disableColor'];
-  '--affine-tooltip-color': AffineTheme['colors']['tooltipColor'];
-  '--affine-line-number-color': AffineTheme['colors']['lineNumberColor'];
-
-  '--affine-modal-shadow': AffineTheme['shadow']['modal'];
-  '--affine-popover-shadow': AffineTheme['shadow']['popover'];
-  '--affine-font-h1': AffineTheme['font']['h1'];
-  '--affine-font-h2': AffineTheme['font']['h2'];
-  '--affine-font-h3': AffineTheme['font']['h3'];
-  '--affine-font-h4': AffineTheme['font']['h4'];
-  '--affine-font-h5': AffineTheme['font']['h5'];
-  '--affine-font-h6': AffineTheme['font']['h6'];
-  '--affine-font-base': AffineTheme['font']['base'];
-  '--affine-font-sm': AffineTheme['font']['sm']; // small
-  '--affine-font-xs': AffineTheme['font']['xs']; // tiny
-  '--affine-line-height': AffineTheme['font']['lineHeight'];
-
-  '--affine-z-index-modal': AffineTheme['zIndex']['modal'];
-  '--affine-z-index-popover': AffineTheme['zIndex']['popover'];
-
-  '--affine-font-family': AffineTheme['font']['family'];
-  '--affine-font-number-family': AffineTheme['font']['numberFamily'];
-  '--affine-font-code-family': AffineTheme['font']['codeFamily'];
-
-  '--affine-paragraph-space': AffineTheme['space']['paragraph'];
-
-  '--affine-popover-radius': AffineTheme['radius']['popover'];
-  // use for blocksuite
-  '--affine-zoom': CSSProperties['zoom'];
-  '--affine-scale': string;
-}
 
 declare module '@emotion/react' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface

packages/component/src/ui/breadcrumbs/index.ts

@@ -4,6 +4,6 @@ import { styled } from '../../styles';
 
 export const Breadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {
   return {
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
   };
 });

packages/component/src/ui/button/styles.ts

@@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', {
       width,
       height,
       fontSize,
-      color: theme.colors.iconColor,
+      color: 'var(--affine-hover-color)',
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
       ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
@@ -66,9 +66,9 @@ export const StyledIconButton = styled('button', {
       },
 
       ':hover': {
-        color: hoverColor ?? theme.colors.primaryColor,
+        color: hoverColor ?? 'var(--affine-primary-color)',
         '::after': {
-          background: hoverBackground || theme.colors.hoverBackground,
+          background: hoverBackground || 'var(--affine-hover-color)',
         },
         ...(hoverStyle ?? {}),
       },
@@ -132,8 +132,8 @@ export const StyledTextButton = styled('button', {
       fontWeight: bold ? '500' : '400',
 
       ':hover': {
-        color: hoverColor ?? theme.colors.primaryColor,
+        color: hoverColor ?? 'var(--affine-primary-color)',
-        background: hoverBackground ?? theme.colors.hoverBackground,
+        background: hoverBackground ?? 'var(--affine-hover-color)',
         ...(hoverStyle ?? {}),
       },
     };
@@ -192,7 +192,7 @@ export const StyledButton = styled('button', {
         ? {
             cursor: 'not-allowed',
             pointerEvents: 'none',
-            color: theme.colors.disableColor,
+            color: 'var(--affine-text-disable-color)',
           }
         : {}),
       transition: 'background .15s',
@@ -201,10 +201,10 @@ export const StyledButton = styled('button', {
       fontSize,
       fontWeight: bold ? '500' : '400',
       '.affine-button-icon': {
-        color: theme.colors.iconColor,
+        color: 'var(--affine-icon-color)',
       },
       '.affine-button-icon__fixed': {
-        color: theme.colors.iconColor,
+        color: 'var(--affine-icon-color)',
       },
       '>span': {
         marginLeft: '5px',
@@ -221,8 +221,8 @@ export const StyledButton = styled('button', {
       // TODO: disabled hover should be implemented
       //
       // ':hover': {
-      //   color: hoverColor ?? theme.colors.primaryColor,
+      //   color: hoverColor ?? 'var(--affine-primary-color)',
-      //   background: hoverBackground ?? theme.colors.hoverBackground,
+      //   background: hoverBackground ?? 'var(--affine-hover-color)',
       //   '.affine-button-icon':{
       //
       //   }

packages/component/src/ui/button/utils.ts

@@ -47,37 +47,39 @@ export const getButtonColors = (
   switch (type) {
     case 'primary':
       return {
-        background: theme.colors.primaryColor,
+        background: 'var(--affine-primary-color)',
         color: '#fff',
-        borderColor: theme.colors.primaryColor,
+        borderColor: 'var(--affine-primary-color)',
         '.affine-button-icon': {
           color: '#fff',
         },
       };
     case 'light':
       return {
-        background: theme.colors.hoverBackground,
+        background: 'var(--affine-hover-color)',
-        color: disabled ? theme.colors.disableColor : theme.colors.primaryColor,
+        color: disabled
-        borderColor: theme.colors.hoverBackground,
+          ? 'var(--affine-text-disable-color)'
+          : 'var(--affine-primary-color)',
+        borderColor: 'var(--affine-hover-color)',
         '.affine-button-icon': {
-          borderColor: theme.colors.primaryColor,
+          borderColor: 'var(--affine-primary-color)',
         },
         ':hover': {
           borderColor: disabled
-            ? theme.colors.hoverBackground
+            ? 'var(--affine-hover-color)'
-            : theme.colors.primaryColor,
+            : 'var(--affine-primary-color)',
         },
       };
     case 'warning':
       return {
-        background: theme.colors.warningBackground,
+        background: 'var(--affine-background-warning-color)',
-        color: theme.colors.warningColor,
+        color: 'var(--affine-background-warning-color)',
-        borderColor: theme.colors.warningBackground,
+        borderColor: 'var(--affine-background-warning-color)',
         '.affine-button-icon': {
-          color: theme.colors.warningColor,
+          color: 'var(--affine-background-warning-color)',
         },
         ':hover': {
-          borderColor: theme.colors.warningColor,
+          borderColor: 'var(--affine-background-warning-color)',
           color: extend?.hoverColor,
           background: extend?.hoverBackground,
           ...extend?.hoverStyle,
@@ -85,14 +87,14 @@ export const getButtonColors = (
       };
     case 'danger':
       return {
-        background: theme.colors.errorBackground,
+        background: 'var(--affine-background-error-color)',
-        color: theme.colors.errorColor,
+        color: 'var(--affine-error-color)',
-        borderColor: theme.colors.errorBackground,
+        borderColor: 'var(--affine-background-error-color)',
         '.affine-button-icon': {
-          color: theme.colors.errorColor,
+          color: 'var(--affine-error-color)',
         },
         ':hover': {
-          borderColor: theme.colors.errorColor,
+          borderColor: 'var(--affine-error-color)',
           color: extend?.hoverColor,
           background: extend?.hoverBackground,
           ...extend?.hoverStyle,
@@ -100,13 +102,13 @@ export const getButtonColors = (
       };
     default:
       return {
-        color: theme.colors.textColor,
+        color: 'var(--affine-text-primary-color)',
-        borderColor: theme.colors.borderColor,
+        borderColor: 'var(--affine-border-color)',
         ':hover': {
-          borderColor: theme.colors.primaryColor,
+          borderColor: 'var(--affine-primary-color)',
-          color: extend?.hoverColor ?? theme.colors.primaryColor,
+          color: extend?.hoverColor ?? 'var(--affine-primary-color)',
           '.affine-button-icon': {
-            color: extend?.hoverColor ?? theme.colors.primaryColor,
+            color: extend?.hoverColor ?? 'var(--affine-primary-color)',
             background: extend?.hoverBackground,
             ...extend?.hoverStyle,
           },

packages/component/src/ui/confirm/styles.ts

@@ -13,7 +13,7 @@ export const StyledModalWrapper = styled(ModalWrapper)(() => {
 
 export const StyledConfirmTitle = styled('div')(({ theme }) => {
   return {
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
     fontWeight: 600,
     textAlign: 'center',
     lineHeight: '28px',
@@ -22,10 +22,10 @@ export const StyledConfirmTitle = styled('div')(({ theme }) => {
 
 export const StyledConfirmContent = styled('div')(({ theme }) => {
   return {
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     textAlign: 'center',
     marginTop: '12px',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     lineHeight: '26px',
   };
 });

packages/component/src/ui/divider/index.ts

@@ -4,6 +4,6 @@ import { styled } from '../../styles';
 
 export const Divider = styled(MuiDivider)(({ theme }) => {
   return {
-    borderColor: theme.colors.borderColor,
+    borderColor: 'var(--affine-border-color)',
   };
 });

packages/component/src/ui/input/style.ts

@@ -14,16 +14,18 @@ export const StyledInput = styled('input')<{
     height,
     lineHeight: '22px',
     padding: '8px 12px',
-    color: disabled ? theme.colors.disableColor : theme.colors.textColor,
+    color: disabled
+      ? 'var(--affine-text-disable-color)'
+      : 'var(--affine-text-primary-color)',
     border: noBorder ? 'unset' : `1px solid`,
-    borderColor: theme.colors.borderColor, // TODO: check out disableColor,
+    borderColor: 'var(--affine-border-color)', // TODO: check out disableColor,
-    backgroundColor: theme.colors.popoverBackground,
+    backgroundColor: 'var(--affine-white)',
     borderRadius: '10px',
     '&::placeholder': {
-      color: theme.colors.placeHolderColor,
+      color: 'var(--affine-placeholder-color)',
     },
     '&:focus': {
-      borderColor: theme.colors.primaryColor,
+      borderColor: 'var(--affine-primary-color)',
     },
   };
 });

packages/component/src/ui/layout/Content.tsx

@@ -47,8 +47,8 @@ export const Content = styled('div', {
       maxWidth,
       textAlign: align,
       display: 'inline-block',
-      color: color ?? theme.colors.textColor,
+      color: color ?? 'var(--affine-text-primary-color)',
-      fontSize: fontSize ?? theme.font.base,
+      fontSize: fontSize ?? 'var(--affine-font-base)',
       fontWeight: weight ?? 400,
       lineHeight: lineHeight ?? 1.5,
       ...(ellipsis ? textEllipsis(lineNum) : {}),

packages/component/src/ui/menu/styles.ts

@@ -10,11 +10,11 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)<{
   return {
     width,
     height,
-    background: theme.colors.popoverBackground,
+    background: 'var(--affine-white)',
     padding: '8px 4px',
     fontSize: '14px',
-    backgroundColor: theme.colors.popoverBackground,
+    backgroundColor: 'var(--affine-white)',
-    boxShadow: theme.shadow.popover,
+    boxShadow: 'var(--affine-text-popover-shadow)',
   };
 });
 
@@ -22,14 +22,14 @@ export const StyledStartIconWrapper = styled('div')(({ theme }) => {
   return {
     marginRight: '12px',
     fontSize: '20px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
   };
 });
 export const StyledEndIconWrapper = styled('div')(({ theme }) => {
   return {
     marginLeft: '12px',
     fontSize: '20px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
   };
 });
 
@@ -37,7 +37,7 @@ export const StyledContent = styled('div')(({ theme }) => {
   return {
     textAlign: 'left',
     flexGrow: 1,
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     ...textEllipsis(1),
   };
 });
@@ -50,15 +50,19 @@ export const StyledMenuItem = styled('button')<{
     width: '100%',
     borderRadius: '5px',
     padding: '0 14px',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     height: '32px',
     ...displayFlex('flex-start', 'center'),
     cursor: isDir ? 'pointer' : '',
     position: 'relative',
     backgroundColor: 'transparent',
-    color: disabled ? theme.colors.disableColor : theme.colors.textColor,
+    color: disabled
+      ? 'var(--affine-text-disable-color)'
+      : 'var(--affine-text-primary-color)',
     svg: {
-      color: disabled ? theme.colors.disableColor : theme.colors.iconColor,
+      color: disabled
+        ? 'var(--affine-text-disable-color)'
+        : 'var(--affine-icon-color)',
     },
     ...(disabled
       ? {
@@ -70,10 +74,10 @@ export const StyledMenuItem = styled('button')<{
     ':hover': disabled
       ? {}
       : {
-          color: theme.colors.primaryColor,
+          color: 'var(--affine-primary-color)',
-          backgroundColor: theme.colors.hoverBackground,
+          backgroundColor: 'var(--affine-hover-color)',
           svg: {
-            color: theme.colors.primaryColor,
+            color: 'var(--affine-primary-color)',
           },
         },
   };

packages/component/src/ui/modal/ModalWrapper.tsx

@@ -11,7 +11,7 @@ export const ModalWrapper = styled('div')<{
     width,
     height,
     minHeight,
-    backgroundColor: theme.colors.popoverBackground,
+    backgroundColor: 'var(--affine-white)',
     borderRadius: '16px',
     position: 'relative',
     maxHeight: 'calc(100vh - 32px)',

packages/component/src/ui/modal/styles.ts

@@ -12,7 +12,7 @@ export const StyledBackdrop = styled('div')(({ theme }) => {
     bottom: '0',
     top: '0',
     left: '0',
-    backgroundColor: theme.colors.modalBackground,
+    backgroundColor: 'var(--affine-background-modal-color)',
   };
 });
 
@@ -33,7 +33,7 @@ export const StyledModal = styled(ModalUnstyled, {
     position: 'fixed',
     left: '0',
     top: '0',
-    zIndex: theme.zIndex.modal,
+    zIndex: 'var(--affine-z-index-modal)',
     '*': {
       WebkitTapHighlightColor: 'transparent',
       outline: 'none',

packages/component/src/ui/popper/PopoverArrow.tsx

@@ -92,6 +92,6 @@ const StyledArrow = styled('span')<{
       bottom: 0,
     },
 
-    ...getArrowStyle(placement, theme.colors.tooltipBackground),
+    ...getArrowStyle(placement, 'var(--affine-tooltip)'),
   };
 });

packages/component/src/ui/popper/Popper.tsx

@@ -191,6 +191,6 @@ export const BasicStyledPopper = styled(PopperUnstyled, {
   zIndex?: CSSProperties['zIndex'];
 }>(({ zIndex, theme }) => {
   return {
-    zIndex: zIndex ?? theme.zIndex.popover,
+    zIndex: zIndex ?? 'var(--affine-z-index-popover)',
   };
 });

packages/component/src/ui/shared/Container.tsx

@@ -45,7 +45,10 @@ export const StyledPopperContainer = styled('div')<{
   placement?: PopperPlacementType;
 }>(({ theme, placement = 'top' }) => {
   const direction = placementToContainerDirection[placement];
-  const borderRadius = getBorderRadius(direction, theme.radius.popover);
+  const borderRadius = getBorderRadius(
+    direction,
+    'var(--affine-popover-radius)'
+  );
   return {
     borderRadius,
   };

packages/component/src/ui/table/styles.ts

@@ -4,8 +4,8 @@ import type { TableCellProps } from './interface';
 export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
   ({ theme, tableLayout }) => {
     return {
-      fontSize: theme.font.base,
+      fontSize: 'var(--affine-font-base)',
-      color: theme.colors.textColor,
+      color: 'var(--affine-text-primary-color)',
       tableLayout,
       width: '100%',
       borderCollapse: 'separate',
@@ -69,7 +69,7 @@ export const StyledTableRow = styled('tr')(({ theme }) => {
 
     ':hover': {
       td: {
-        background: theme.colors.hoverBackground,
+        background: 'var(--affine-hover-color)',
       },
     },
   };

packages/component/src/ui/tooltip/QuickSearch-tips.tsx

@@ -7,14 +7,14 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     width: '390px',
     minHeight: '92px',
-    boxShadow: theme.shadow.tooltip,
+    boxShadow: 'var(--affine-tooltip-shadow)',
     padding: '12px',
-    backgroundColor: theme.colors.backgroundTertiaryColor,
+    backgroundColor: 'var(--affine-background-tertiary-color)',
     transform: 'all 0.15s',
-    color: theme.colors.textEmphasisColor,
+    color: 'var(--affine-text-emphasis-color)',
     ...displayFlex('center', 'center'),
-    border: `1px solid ${theme.colors.textEmphasisColor}`,
+    border: `1px solid var(--affine-text-emphasis-color)`,
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
     lineHeight: '22px',
     fontWeight: 500,
   };
@@ -29,7 +29,7 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
     transform: translate(0%, 0%);
     width: 0;
     height: 40px;
-    border-right: 1px solid ${theme.colors.textEmphasisColor};
+    border-right: 1px solid var(--affine-text-emphasis-color);
     &::after {
       content: '';
       position: absolute;
@@ -39,7 +39,7 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
       width: 12px;
       height: 12px;
       border-radius: 50%;
-      border: 1px solid ${theme.colors.textEmphasisColor};
+      border: 1px solid var(--affine-text-emphasis-color);
     }
     &::before {
       content: '';
@@ -50,9 +50,8 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background-color: ${theme.colors.textEmphasisColor};
+      background-color: var(--affine-text-emphasis-color);
-      border: 1px solid ${theme.colors.textEmphasisColor};
+      border: 1px solid var(--affine-text-emphasis-color);
-    }
   `;
 });
 

packages/component/src/ui/tooltip/Tooltip.tsx

@@ -6,11 +6,11 @@ import StyledPopperContainer from '../shared/Container';
 const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     maxWidth: '320px',
-    boxShadow: theme.shadow.popover,
+    boxShadow: 'var(--affine-text-popover-shadow)',
     padding: '4px 12px',
-    backgroundColor: theme.colors.tooltipBackground,
+    backgroundColor: 'var(--affine-tooltip)',
     color: '#fff',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
   };
 });
 

packages/component/src/ui/tree-view/styles.ts

@@ -1,7 +1,7 @@
 import MuiCollapse from '@mui/material/Collapse';
 import type { CSSProperties } from 'react';
 
-import { alpha, styled } from '../../styles';
+import { alpha, lightTheme, styled } from '../../styles';
 
 export const StyledCollapse = styled(MuiCollapse)<{
   indent?: CSSProperties['paddingLeft'];
@@ -18,7 +18,7 @@ export const StyledTreeNodeWrapper = styled('div')(() => {
 export const StyledTreeNodeContainer = styled('div')<{ isDragging?: boolean }>(
   ({ isDragging = false, theme }) => {
     return {
-      background: isDragging ? theme.colors.hoverBackground : '',
+      background: isDragging ? 'var(--affine-hover-color)' : '',
       // opacity: isDragging ? 0.4 : 1,
     };
   }
@@ -33,9 +33,9 @@ export const StyledNodeLine = styled('div')<{ show: boolean; isTop?: boolean }>(
       width: '100%',
       paddingTop: '2x',
       borderTop: '2px solid',
-      borderColor: show ? theme.colors.primaryColor : 'transparent',
+      borderColor: show ? 'var(--affine-primary-color)' : 'transparent',
       boxShadow: show
-        ? `0px 0px 8px ${alpha(theme.colors.primaryColor, 0.35)}`
+        ? `0px 0px 8px ${alpha(lightTheme.primaryColor, 0.35)}`
         : 'none',
       zIndex: 1,
     };