feat: upgrate to new theme (#2027)

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

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}`,
-    color: theme.colors.primaryColor,
+    border: '1px solid var(--affine-primary-color)',
+    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,
-        backgroundColor: theme.colors.hoverBackground,
+        color: 'var(--affine-primary-color)',
+        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,
-      color: theme.colors.warningColor,
+      backgroundColor: 'var(--affine-background-warning-color)',
+      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,
-    color: theme.colors.textColor,
+    fontSize: 'var(--affine-font-base)',
+    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',