Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 12:28:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update theme color (#1717)

Browse Source 
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
JimmFly
2023-03-28 13:43:29 +08:00
committed by GitHub
parent 5a508b1fe4
commit edf7913e12
4 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/component/src/index.ts
View File

@@ -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;

4
packages/component/src/styles/theme.ts
View File

@@ -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',

3
packages/component/src/styles/types.ts
View File

@@ -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;

14
packages/component/src/ui/tooltip/QuickSearch-tips.tsx
View File

@@ -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};
}
`;
});