From edf7913e12f2cd33dfc17c96f5b1b1ad7b82f2f0 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Tue, 28 Mar 2023 13:43:29 +0800 Subject: [PATCH] chore: update theme color (#1717) Co-authored-by: Himself65 --- packages/component/src/index.ts | 6 ++++++ packages/component/src/styles/theme.ts | 4 ++++ packages/component/src/styles/types.ts | 3 +++ .../component/src/ui/tooltip/QuickSearch-tips.tsx | 14 +++++++------- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts index cf000b13e3..257e9d3440 100644 --- a/packages/component/src/index.ts +++ b/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; diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts index 302879d8ee..2adad62c48 100644 --- a/packages/component/src/styles/theme.ts +++ b/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', diff --git a/packages/component/src/styles/types.ts b/packages/component/src/styles/types.ts index dac264f802..01e1b385c8 100644 --- a/packages/component/src/styles/types.ts +++ b/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; diff --git a/packages/component/src/ui/tooltip/QuickSearch-tips.tsx b/packages/component/src/ui/tooltip/QuickSearch-tips.tsx index e40e260fdd..f2fbda00e0 100644 --- a/packages/component/src/ui/tooltip/QuickSearch-tips.tsx +++ b/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}; - border: 1px solid ${theme.colors.primaryColor}; + background-color: ${theme.colors.textEmphasisColor}; + border: 1px solid ${theme.colors.textEmphasisColor}; } `; });