feat: upgrate to new theme (#2027)

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

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,
-    boxShadow: theme.shadow.popover,
+    backgroundColor: 'var(--affine-white)',
+    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,
-          backgroundColor: theme.colors.hoverBackground,
+          color: 'var(--affine-primary-color)',
+          backgroundColor: 'var(--affine-hover-color)',
           svg: {
-            color: theme.colors.primaryColor,
+            color: 'var(--affine-primary-color)',
           },
         },
   };