chore: update theme color (#1717)

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

packages/component/src/index.ts

@@ -27,6 +27,8 @@ declare module '@mui/material/styles' {
       tooltipBackground: string;
       hoverBackground: string;
       innerHoverBackground: string;
+      // Use for the quick search tips background
+      backgroundTertiaryColor: string;
       codeBackground: string;
       codeBlockBackground: string;
       // Use for blockHub and slide bar background
@@ -37,6 +39,7 @@ declare module '@mui/material/styles' {
       // 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;
@@ -100,6 +103,8 @@ declare module '@mui/material/styles' {
       tooltipBackground: string;
       hoverBackground: string;
       innerHoverBackground: string;
+      // Use for the quick search tips background
+      backgroundTertiaryColor: string;
       codeBackground: string;
       codeBlockBackground: string;
       // Use for blockHub and slide bar background
@@ -110,6 +115,7 @@ declare module '@mui/material/styles' {
       // 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;

packages/component/src/styles/theme.ts

@@ -20,6 +20,7 @@ export const getLightTheme = (
       pageBackground: '#fff',
       hoverBackground: 'rgba(0,0,0,.04)',
       innerHoverBackground: '#E9E9EC',
+      backgroundTertiaryColor: '#E9E9EC',
       popoverBackground: '#fff',
       tooltipBackground: '#261499',
       codeBackground: '#f2f5f9',
@@ -31,6 +32,7 @@ export const getLightTheme = (
 
       textColor: '#424149',
       secondaryTextColor: '#8E8D91',
+      textEmphasisColor: '#5438FF',
       edgelessTextColor: '#3A4C5C',
       iconColor: '#77757D',
       handleColor: '#c7c3d9',
@@ -99,6 +101,7 @@ export const getDarkTheme = (
       pageBackground: '#2c2c2c',
       hoverBackground: 'rgba(0,0,0,.04)',
       innerHoverBackground: '#5A5A5A',
+      backgroundTertiaryColor: '#1E1E1E',
       popoverBackground: '#1F2021',
       tooltipBackground: '#0C0A15',
       codeBackground:
@@ -113,6 +116,7 @@ export const getDarkTheme = (
 
       textColor: '#fff',
       secondaryTextColor: '#8E8D91',
+      textEmphasisColor: '#D0CDDC',
       edgelessTextColor: '#3A4C5C',
       iconColor: '#77757D',
       handleColor: '#c7c3d9',

packages/component/src/styles/types.ts

@@ -27,6 +27,8 @@ export interface AffineTheme {
     tooltipBackground: string;
     hoverBackground: string;
     innerHoverBackground: string;
+    // Use for the quick search tips background
+    backgroundTertiaryColor: string;
     codeBackground: string;
     codeBlockBackground: string;
     // Use for blockHub and slide bar background
@@ -37,6 +39,7 @@ export interface AffineTheme {
     // 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;

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

@@ -9,11 +9,11 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
     minHeight: '92px',
     boxShadow: theme.shadow.tooltip,
     padding: '12px',
-    backgroundColor: theme.colors.hoverBackground,
+    backgroundColor: theme.colors.backgroundTertiaryColor,
     transform: 'all 0.15s',
-    color: theme.colors.primaryColor,
+    color: theme.colors.textEmphasisColor,
     ...displayFlex('center', 'center'),
-    border: `1px solid ${theme.colors.primaryColor}`,
+    border: `1px solid ${theme.colors.textEmphasisColor}`,
     fontSize: theme.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.primaryColor};
+    border-right: 1px solid ${theme.colors.textEmphasisColor};
     &::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.primaryColor};
+      border: 1px solid ${theme.colors.textEmphasisColor};
     }
     &::before {
       content: '';
@@ -50,8 +50,8 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background-color: ${theme.colors.primaryColor};
+      background-color: ${theme.colors.textEmphasisColor};
-      border: 1px solid ${theme.colors.primaryColor};
+      border: 1px solid ${theme.colors.textEmphasisColor};
     }
   `;
 });