feat: add css virable

packages/app/src/styles/theme.ts

@@ -17,6 +17,7 @@ export const getLightTheme = (
       pageBackground: '#fff',
       hoverBackground: '#F1F3FF',
       popoverBackground: '#fff',
+      toolTipBackground: '#6880FF',
       codeBackground: '#f2f5f9',
 
       textColor: '#3A4C5C',
@@ -79,6 +80,7 @@ export const getDarkTheme = (
         editorMode === 'edgeless'
           ? lightTheme.colors.codeBackground
           : '#505662',
+      toolTipBackground: '#1F2021',
 
       textColor: '#fff',
       edgelessTextColor: '#3A4C5C',
@@ -119,6 +121,7 @@ export const globalThemeVariables: (
     '--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-text-color': theme.colors.textColor,
     '--affine-edgeless-text-color': theme.colors.edgelessTextColor,

packages/app/src/styles/types.ts

@@ -23,6 +23,7 @@ export interface AffineTheme {
     popoverBackground: string;
     hoverBackground: string;
     codeBackground: string;
+    toolTipBackground: string;
 
     // Use for the page`s text
     textColor: string;
@@ -77,6 +78,7 @@ export interface AffineThemeCSSVariables {
   '--affine-popover-background': AffineTheme['colors']['popoverBackground'];
   '--affine-hover-background': AffineTheme['colors']['hoverBackground'];
   '--affine-code-background': AffineTheme['colors']['codeBackground'];
+  '--affine-tooltip-background': AffineTheme['colors']['toolTipBackground'];
 
   '--affine-text-color': AffineTheme['colors']['textColor'];
   '--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor'];

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

@@ -8,10 +8,7 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     boxShadow: theme.shadow.tooltip,
     padding: '4px 12px',
-    backgroundColor:
+    backgroundColor: theme.colors.toolTipBackground,
-      theme.mode === 'dark'
-        ? theme.colors.popoverBackground
-        : theme.colors.primaryColor,
     color: '#fff',
     fontSize: theme.font.xs,
   };