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

feat: upgrate to new theme (#2027)

Browse Source 
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Flrande
2023-04-20 16:31:19 +08:00
committed by GitHub
parent 63f7b2556e
commit 372377dd6b
61 changed files with 624 additions and 1037 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/component/src/components/contact-modal/style.ts
View File

@@ -7,7 +7,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
paddingLeft: '96px',
fontSize: '24px',
lineHeight: '36px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
borderRadius: '10px',
flexDirection: 'column',
...displayFlex('center'),
@@ -16,7 +16,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
letterSpacing: '1px',
':visited': {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
},
':hover': {
background: 'rgba(68, 97, 242, 0.1)',
@@ -28,7 +28,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
width: '48px',
height: '48px',
marginRight: '24px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
...absoluteCenter({ vertical: true, position: { left: '26px' } }),
},
p: {
@@ -44,7 +44,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
},
':last-of-type': {
fontSize: '16px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
fontWeight: '500',
},
svg: {
@@ -64,21 +64,21 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
fontSize: '16px',
fontWeight: '500',
borderRadius: '5px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
transition: 'background .15s, color .15s',
...displayFlex('center', 'center'),
flexWrap: 'wrap',
':visited': {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
},
':hover': {
color: theme.colors.primaryColor,
background: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
background: 'var(--affine-hover-color)',
},
svg: {
width: '22px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
p: {
width: '100%',
@@ -90,7 +90,7 @@ export const StyledSubTitle = styled('div')(({ theme }) => {
return {
fontSize: '18px',
fontWeight: '600',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
marginTop: '52px',
marginBottom: '8px',
textAlign: 'center',
@@ -116,7 +116,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
fontSize: '14px',
lineHeight: '20px',
textAlign: 'center',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
marginTop: '40px',
};
});
@@ -128,16 +128,16 @@ export const StyledPrivacyContainer = styled('div')(({ theme }) => {
a: {
height: '16px',
lineHeight: '16px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
padding: '0 8px',
':visited': {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
':first-of-type': {
borderRight: `1px solid ${theme.colors.borderColor}`,
borderRight: '1px solid var(--affine-border-color)',
},
':hover': {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
},
};

8
packages/component/src/components/share-menu/disable-public-link/style.ts
View File

@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
position: 'relative',
padding: '0px',
width: '560px',
background: theme.colors.popoverBackground,
background: 'var(--affine-white)',
borderRadius: '12px',
// height: '312px',
};
@@ -16,7 +16,7 @@ export const StyledModalHeader = styled('div')(({ theme }) => {
margin: '44px 0px 12px 0px',
width: '560px',
fontWeight: '600',
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
textAlign: 'center',
};
});
@@ -27,7 +27,7 @@ export const StyledTextContent = styled('div')(({ theme }) => {
width: '560px',
padding: '0px 84px',
fontWeight: '400',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
textAlign: 'center',
};
});
@@ -42,7 +42,7 @@ export const StyledButtonContent = styled('div')(() => {
});
export const StyledButton = styled(TextButton)(({ theme }) => {
return {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
height: '32px',
background: '#F3F0FF',
border: 'none',

36
packages/component/src/components/share-menu/styles.ts
View File

@@ -8,12 +8,14 @@ export const StyledShareButton = styled(TextButton, {
marginLeft: '4px',
marginRight: '16px',
border: `1px solid ${
isShared ? theme.colors.primaryColor : theme.colors.iconColor
isShared ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)'
}`,
color: isShared ? theme.colors.primaryColor : theme.colors.iconColor,
color: isShared
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
borderRadius: '8px',
':hover': {
border: `1px solid ${theme.colors.primaryColor}`,
border: `1px solid ${'var(--affine-primary-color)'}`,
},
span: {
...displayFlex('center', 'center'),
@@ -35,11 +37,11 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
...displayFlex('center', 'center'),
flex: '1',
height: '30px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
opacity: isActive ? 1 : 0.2,
fontWeight: '500',
fontSize: theme.font.base,
lineHeight: theme.font.lineHeight,
fontSize: 'var(--affine-font-base)',
lineHeight: 'var(--affine-line-height)',
cursor: 'pointer',
transition: 'all 0.15s ease',
padding: '0 10px',
@@ -47,15 +49,15 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
borderRadius: '4px',
position: 'relative',
':hover': {
background: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
opacity: 1,
color: isActive
? theme.colors.textColor
: theme.colors.secondaryTextColor,
? 'var(--affine-text-primary-color)'
: 'var(--affine-text-secondary-color)',
svg: {
fill: isActive
? theme.colors.textColor
: theme.colors.secondaryTextColor,
? 'var(--affine-text-primary-color)'
: 'var(--affine-text-secondary-color)',
},
},
svg: {
@@ -69,7 +71,7 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
left: '0',
width: '100%',
height: '2px',
background: theme.colors.textColor,
background: 'var(--affine-text-primary-color)',
opacity: 0.2,
},
};
@@ -79,7 +81,7 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
export const StyledIndicator = styled('div')(({ theme }) => {
return {
height: '2px',
background: theme.colors.textColor,
background: 'var(--affine-text-primary-color)',
position: 'absolute',
left: '0',
transition: 'left .3s, width .3s',
@@ -89,8 +91,8 @@ export const StyledInput = styled('input')(({ theme }) => {
return {
padding: '4px 8px',
height: '28px',
color: theme.colors.placeHolderColor,
border: `1px solid ${theme.colors.placeHolderColor}`,
color: 'var(--affine-placeholder-color)',
border: `1px solid ${'var(--affine-placeholder-color)'}`,
cursor: 'default',
overflow: 'hidden',
userSelect: 'text',
@@ -101,7 +103,7 @@ export const StyledInput = styled('input')(({ theme }) => {
});
export const StyledButton = styled(TextButton)(({ theme }) => {
return {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
height: '32px',
background: '#F3F0FF',
border: 'none',
@@ -122,7 +124,7 @@ export const StyledDisableButton = styled(Button)(() => {
export const StyledLinkSpan = styled('span')(({ theme }) => {
return {
marginLeft: '4px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
fontWeight: '500',
cursor: 'pointer',
};

16
packages/component/src/components/workspace-card/styles.ts
View File

@@ -7,7 +7,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
width: '202px',
p: {
height: '20px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
...displayFlex('flex-start', 'center'),
},
svg: {
@@ -24,7 +24,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 600,
lineHeight: '24px',
marginBottom: '10px',
@@ -36,7 +36,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
export const StyledCard = styled('div')<{
active?: boolean;
}>(({ theme, active }) => {
const borderColor = active ? theme.colors.primaryColor : 'transparent';
const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
return {
width: '310px',
height: '124px',
@@ -51,10 +51,10 @@ export const StyledCard = styled('div')<{
background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
position: 'relative',
':hover': {
background: theme.colors.cardHoverBackground,
background: 'var(--affine-hover-color)',
'.add-icon': {
borderColor: theme.colors.primaryColor,
color: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
},
'.setting-entry': {
opacity: 1,
@@ -84,11 +84,11 @@ export const StyledSettingLink = styled(IconButton)(({ theme }) => {
bottom: '6px',
opacity: 0,
borderRadius: '4px',
color: theme.colors.primaryColor,
color: 'var(--affine-background-primary-color)',
pointerEvents: 'none',
transition: 'all .15s',
':hover': {
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
},
};
});

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

@@ -17,155 +17,3 @@ export * from './ui/table';
export * from './ui/toast';
export * from './ui/tooltip';
export * from './ui/tree-view';
declare module '@mui/material/styles' {
interface Theme {
colors: {
primaryColor: string;
pageBackground: string;
popoverBackground: string;
tooltipBackground: string;
hoverBackground: string;
innerHoverBackground: string;
modalBackground: string;
// Use for the quick search tips background
backgroundTertiaryColor: string;
codeBackground: string;
codeBlockBackground: string;
// Use for blockHub and slide bar background
hubBackground: string;
cardHoverBackground: string;
warningBackground: string;
errorBackground: string;
// 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;
// In dark mode, normal text`s (not bold) color
linkColor2: string;
linkVisitedColor: string;
iconColor: string;
handleColor: string;
tooltipColor: string;
codeColor: string;
quoteColor: string;
placeHolderColor: string;
selectedColor: string;
borderColor: string;
disableColor: string;
warningColor: string;
errorColor: string;
lineNumberColor: string;
};
font: {
title: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
h6: string;
base: string;
sm: string; // small
xs: string; // tiny
family: string;
numberFamily: string;
codeFamily: string;
lineHeight: string | number;
};
zIndex: {
modal: number;
popover: number;
};
shadow: {
modal: string;
popover: string;
tooltip: string;
};
space: {
paragraph: string;
};
radius: {
popover: string;
};
}
interface ThemeOptions {
colors: {
primaryColor: string;
pageBackground: string;
popoverBackground: string;
tooltipBackground: string;
hoverBackground: string;
innerHoverBackground: string;
modalBackground: string;
// Use for the quick search tips background
backgroundTertiaryColor: string;
codeBackground: string;
codeBlockBackground: string;
// Use for blockHub and slide bar background
hubBackground: string;
cardHoverBackground: string;
warningBackground: string;
errorBackground: string;
// 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;
// In dark mode, normal text`s (not bold) color
linkColor2: string;
linkVisitedColor: string;
iconColor: string;
handleColor: string;
tooltipColor: string;
codeColor: string;
quoteColor: string;
placeHolderColor: string;
selectedColor: string;
borderColor: string;
disableColor: string;
warningColor: string;
errorColor: string;
lineNumberColor: string;
};
font: {
title: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
h6: string;
base: string;
sm: string; // small
xs: string; // tiny
family: string;
numberFamily: string;
codeFamily: string;
lineHeight: string | number;
};
shadow: {
modal: string;
popover: string;
tooltip: string;
};
space: {
paragraph: string;
};
radius: {
popover: string;
};
}
}

7
packages/component/src/styles/styled.tsx → packages/component/src/styles/MuiThemeProvider.tsx
View File

@@ -5,20 +5,19 @@ import {
css,
keyframes,
styled,
type ThemeOptions,
ThemeProvider as MuiThemeProvider,
} from '@mui/material/styles';
import type { PropsWithChildren } from 'react';
import { useMemo } from 'react';
import type { AffineTheme } from './types';
export { alpha, css, keyframes, styled };
export const ThemeProvider = ({
export const AffineMuiThemeProvider = ({
theme,
children,
}: PropsWithChildren<{
theme: AffineTheme;
theme: ThemeOptions;
}>) => {
const muiTheme = useMemo(() => createMuiTheme(theme), [theme]);
return (

153
packages/component/src/styles/color-scheme.ts
View File

@@ -1,153 +0,0 @@
type Kebab<
T extends string,
A extends string = ''
> = T extends `${infer F}${infer R}`
? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
: A;
export type AffineNextLightColorScheme = typeof nextLightColorScheme;
export type AffineNextCssVariables = {
[Key in `--affine-${Kebab<keyof AffineNextLightColorScheme>}`]: string;
};
// Refs: https://github.com/toeverything/AFFiNE/issues/1796
export const nextLightColorScheme = {
brandColor: 'rgb(84, 56, 255)',
tertiaryColor: 'rgb(243, 240, 255)',
primaryColor: 'rgb(84, 56, 255)',
secondaryColor: 'rgb(125, 145, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgba(255, 255, 255, 0.2)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundPrimaryColor: 'rgb(255, 255, 255)',
backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
backgroundSecondaryColor: 'rgb(251, 250, 252)',
backgroundTertiaryColor: 'rgb(233, 233, 236)',
backgroundCodeBlock: 'rgb(250, 251, 253)',
backgroundModalColor: 'rgba(0, 0, 0, 0.6)',
textPrimaryColor: 'rgb(66, 65, 73)',
textSecondaryColor: 'rgb(142, 141, 145)',
textDisableColor: 'rgb(169, 169, 173)',
textEmphasisColor: 'rgb(84, 56, 255)',
hoverColor: 'rgba(0, 0, 0, 0.04)',
linkColor: 'rgb(125, 145, 255)',
quoteColor: 'rgb(100, 95, 130)',
iconColor: 'rgb(119, 117, 125)',
iconSecondary: 'rgba(119, 117, 125, 0.6)',
borderColor: 'rgb(227, 226, 228)',
dividerColor: 'rgb(227, 226, 228)',
placeholderColor: 'rgb(192, 191, 193)',
edgelessGridColor: 'rgb(230, 230, 230)',
successColor: 'rgb(16, 203, 134)',
warningColor: 'rgb(255, 99, 31)',
errorColor: 'rgb(235, 67, 53)',
processingColor: 'rgb(39, 118, 255)',
black10: 'rgba(0, 0, 0, 0.1)',
black30: 'rgba(0, 0, 0, 0.3)',
black50: 'rgba(0, 0, 0, 0.5)',
black60: 'rgba(0, 0, 0, 0.6)',
black80: 'rgba(0, 0, 0, 0.8)',
black90: 'rgba(0, 0, 0, 0.9)',
black: 'rgb(0, 0, 0)',
white10: 'rgba(255, 255, 255, 0.1)',
white30: 'rgba(255, 255, 255, 0.3)',
white50: 'rgba(255, 255, 255, 0.5)',
white60: 'rgba(255, 255, 255, 0.6)',
white80: 'rgba(255, 255, 255, 0.8)',
white90: 'rgba(255, 255, 255, 0.9)',
white: 'rgb(255, 255, 255)',
tagWhite: 'rgb(245, 245, 245)',
tagGray: 'rgb(227, 226, 224)',
tagRed: 'rgb(255, 225, 225)',
tagOrange: 'rgb(255, 234, 202)',
tagYellow: 'rgb(255, 244, 216)',
tagGreen: 'rgb(223, 244, 232)',
tagTeal: 'rgb(223, 244, 243)',
tagBlue: 'rgb(225, 239, 255)',
tagPurple: 'rgb(243, 240, 255)',
tagPink: 'rgb(252, 232, 255)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
};
export const nextDarkColorScheme = {
brandColor: 'rgb(84, 56, 255)',
primaryColor: 'rgb(118, 95, 254)',
secondaryColor: 'rgb(144, 150, 245)',
tertiaryColor: 'rgb(30, 30, 30)',
hoverColor: 'rgba(255, 255, 255, 0.1)',
iconColor: 'rgb(168, 168, 160)',
iconSecondary: 'rgba(168,168,160,0.6)',
borderColor: 'rgb(57, 57, 57)',
dividerColor: 'rgb(114, 114, 114)',
placeholderColor: 'rgb(62, 62, 63)',
quoteColor: 'rgb(147, 144, 163)',
linkColor: 'rgb(185, 191, 227)',
edgelessGridColor: 'rgb(49, 49, 49)',
successColor: 'rgb(77, 213, 181)',
warningColor: 'rgb(255, 123, 77)',
errorColor: 'rgb(212, 140, 130)',
processingColor: 'rgb(195, 215, 255)',
textEmphasisColor: 'rgb(208, 205, 220)',
textPrimaryColor: 'rgb(234, 234, 234)',
textSecondaryColor: 'rgb(156, 156, 160)',
textDisableColor: 'rgb(119, 117, 125)',
black10: 'rgba(255, 255, 255, 0.1)',
black30: 'rgba(255, 255, 255, 0.3)',
black50: 'rgba(255, 255, 255, 0.5)',
black60: 'rgba(255, 255, 255, 0.6)',
black80: 'rgba(255, 255, 255, 0.8)',
black90: 'rgba(255, 255, 255, 0.9)',
black: 'rgb(255, 255, 255)',
white10: 'rgba(0, 0, 0, 0.1)',
white30: 'rgba(0, 0, 0, 0.3)',
white50: 'rgba(0, 0, 0, 0.5)',
white60: 'rgba(0, 0, 0, 0.6)',
white80: 'rgba(0, 0, 0, 0.8)',
white90: 'rgba(0, 0, 0, 0.9)',
white: 'rgb(0, 0, 0)',
backgroundCodeBlock: 'rgb(41, 44, 51)',
backgroundTertiaryColor: 'rgb(30, 30, 30)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundPrimaryColor: 'rgb(20, 20, 20)',
backgroundSecondaryColor: 'rgb(32, 32, 32)',
backgroundModalColor: 'rgba(0, 0, 0, 0.8)',
backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
tagBlue: 'rgb(10, 84, 170)',
tagGreen: 'rgb(55, 135, 79)',
tagTeal: 'rgb(33, 145, 138)',
tagWhite: 'rgb(84, 84, 84)',
tagPurple: 'rgb(59, 38, 141)',
tagRed: 'rgb(139, 63, 63)',
tagPink: 'rgb(194, 132, 132)',
tagYellow: 'rgb(187, 165, 61)',
tagOrange: 'rgb(231, 161, 58)',
tagGray: 'rgb(41, 41, 41)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
} satisfies AffineNextLightColorScheme;

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

@@ -1,6 +1,6 @@
export * from './color-scheme';
export * from './helper';
export * from './styled';
export * from './mui-theme';
export * from './MuiThemeProvider';
export * from './theme';
export * from './types';
export * from './utils';

15
packages/component/src/styles/mui-theme.ts Normal file
View File

@@ -0,0 +1,15 @@
import '@emotion/react';
import type { ThemeOptions } from '@mui/material';
export const muiThemes: ThemeOptions = {
breakpoints: {
values: {
xs: 0,
sm: 640,
md: 960,
lg: 1280,
xl: 1920,
},
},
};

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

@@ -1,212 +1,216 @@
import '@emotion/react';
import type { EditorContainer } from '@blocksuite/editor';
import { nextDarkColorScheme, nextLightColorScheme } from './color-scheme';
import type { AffineTheme, AffineThemeCSSVariables } from './types';
import type { Theme } from './types';
type Kebab<
T extends string,
A extends string = ''
> = T extends `${infer F}${infer R}`
? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
: A;
export type AffineTheme = typeof lightTheme & {
editorMode: NonNullable<EditorContainer['mode']>;
};
export type AffineCssVariables = {
[Key in `--affine-${Kebab<keyof AffineTheme>}`]: string;
};
const basicFontFamily =
'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
export const getLightTheme = (
editorMode: EditorContainer['mode']
): AffineTheme => {
export const baseTheme = {
// shadow
popoverShadow:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
modalShadow: '0px 4px 24px #161616',
tooltipShadow: '0px 0px 4px rgba(0, 0, 0, 0.14)',
// font
fontFamily: `Avenir Next, Poppins, ${basicFontFamily}`,
fontNumberFamily: `Roboto Mono, ${basicFontFamily}`,
fontCodeFamily: `Space Mono, Consolas, Menlo, Monaco, Courier, monospace, ${basicFontFamily}`,
fontH1: '28px',
fontH2: '26px',
fontH3: '24px',
fontH4: '22px',
fontH5: '20px',
fontH6: '18px',
fontBase: '16px',
fontSm: '14px',
fontXs: '12px',
lineHeight: 'calc(1em + 8px)',
zIndexModal: '1000',
zIndexPopover: '100',
paragraphSpace: '8px',
popoverRadius: '10px',
zoom: '1',
scale: 'calc(1 / var(--affine-zoom))',
};
// Refs: https://github.com/toeverything/AFFiNE/issues/1796
export const lightTheme = {
...baseTheme,
themeMode: 'light',
brandColor: 'rgb(84, 56, 255)',
tertiaryColor: 'rgb(243, 240, 255)',
primaryColor: 'rgb(84, 56, 255)',
secondaryColor: 'rgb(125, 145, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgba(255, 255, 255, 0.2)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundPrimaryColor: 'rgb(255, 255, 255)',
backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
backgroundSecondaryColor: 'rgb(251, 250, 252)',
backgroundTertiaryColor: 'rgb(233, 233, 236)',
backgroundCodeBlock: 'rgb(250, 251, 253)',
backgroundModalColor: 'rgba(0, 0, 0, 0.6)',
textPrimaryColor: 'rgb(66, 65, 73)',
textSecondaryColor: 'rgb(142, 141, 145)',
textDisableColor: 'rgb(169, 169, 173)',
textEmphasisColor: 'rgb(84, 56, 255)',
hoverColor: 'rgba(0, 0, 0, 0.04)',
linkColor: 'rgb(125, 145, 255)',
quoteColor: 'rgb(100, 95, 130)',
iconColor: 'rgb(119, 117, 125)',
iconSecondary: 'rgba(119, 117, 125, 0.6)',
borderColor: 'rgb(227, 226, 228)',
dividerColor: 'rgb(227, 226, 228)',
placeholderColor: 'rgb(192, 191, 193)',
edgelessGridColor: 'rgb(230, 230, 230)',
successColor: 'rgb(16, 203, 134)',
warningColor: 'rgb(255, 99, 31)',
errorColor: 'rgb(235, 67, 53)',
processingColor: 'rgb(39, 118, 255)',
black10: 'rgba(0, 0, 0, 0.1)',
black30: 'rgba(0, 0, 0, 0.3)',
black50: 'rgba(0, 0, 0, 0.5)',
black60: 'rgba(0, 0, 0, 0.6)',
black80: 'rgba(0, 0, 0, 0.8)',
black90: 'rgba(0, 0, 0, 0.9)',
black: 'rgb(0, 0, 0)',
white10: 'rgba(255, 255, 255, 0.1)',
white30: 'rgba(255, 255, 255, 0.3)',
white50: 'rgba(255, 255, 255, 0.5)',
white60: 'rgba(255, 255, 255, 0.6)',
white80: 'rgba(255, 255, 255, 0.8)',
white90: 'rgba(255, 255, 255, 0.9)',
white: 'rgb(255, 255, 255)',
tagWhite: 'rgb(245, 245, 245)',
tagGray: 'rgb(227, 226, 224)',
tagRed: 'rgb(255, 225, 225)',
tagOrange: 'rgb(255, 234, 202)',
tagYellow: 'rgb(255, 244, 216)',
tagGreen: 'rgb(223, 244, 232)',
tagTeal: 'rgb(223, 244, 243)',
tagBlue: 'rgb(225, 239, 255)',
tagPurple: 'rgb(243, 240, 255)',
tagPink: 'rgb(252, 232, 255)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
tooltip: '#424149',
};
export const darkTheme = {
...baseTheme,
themeMode: 'dark',
brandColor: 'rgb(84, 56, 255)',
primaryColor: 'rgb(118, 95, 254)',
secondaryColor: 'rgb(144, 150, 245)',
tertiaryColor: 'rgb(30, 30, 30)',
hoverColor: 'rgba(255, 255, 255, 0.1)',
iconColor: 'rgb(168, 168, 160)',
iconSecondary: 'rgba(168,168,160,0.6)',
borderColor: 'rgb(57, 57, 57)',
dividerColor: 'rgb(114, 114, 114)',
placeholderColor: 'rgb(62, 62, 63)',
quoteColor: 'rgb(147, 144, 163)',
linkColor: 'rgb(185, 191, 227)',
edgelessGridColor: 'rgb(49, 49, 49)',
successColor: 'rgb(77, 213, 181)',
warningColor: 'rgb(255, 123, 77)',
errorColor: 'rgb(212, 140, 130)',
processingColor: 'rgb(195, 215, 255)',
textEmphasisColor: 'rgb(208, 205, 220)',
textPrimaryColor: 'rgb(234, 234, 234)',
textSecondaryColor: 'rgb(156, 156, 160)',
textDisableColor: 'rgb(119, 117, 125)',
black10: 'rgba(255, 255, 255, 0.1)',
black30: 'rgba(255, 255, 255, 0.3)',
black50: 'rgba(255, 255, 255, 0.5)',
black60: 'rgba(255, 255, 255, 0.6)',
black80: 'rgba(255, 255, 255, 0.8)',
black90: 'rgba(255, 255, 255, 0.9)',
black: 'rgb(255, 255, 255)',
white10: 'rgba(0, 0, 0, 0.1)',
white30: 'rgba(0, 0, 0, 0.3)',
white50: 'rgba(0, 0, 0, 0.5)',
white60: 'rgba(0, 0, 0, 0.6)',
white80: 'rgba(0, 0, 0, 0.8)',
white90: 'rgba(0, 0, 0, 0.9)',
white: 'rgb(0, 0, 0)',
backgroundCodeBlock: 'rgb(41, 44, 51)',
backgroundTertiaryColor: 'rgb(30, 30, 30)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundPrimaryColor: 'rgb(20, 20, 20)',
backgroundSecondaryColor: 'rgb(32, 32, 32)',
backgroundModalColor: 'rgba(0, 0, 0, 0.8)',
backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
tagBlue: 'rgb(10, 84, 170)',
tagGreen: 'rgb(55, 135, 79)',
tagTeal: 'rgb(33, 145, 138)',
tagWhite: 'rgb(84, 84, 84)',
tagPurple: 'rgb(59, 38, 141)',
tagRed: 'rgb(139, 63, 63)',
tagPink: 'rgb(194, 132, 132)',
tagYellow: 'rgb(187, 165, 61)',
tagOrange: 'rgb(231, 161, 58)',
tagGray: 'rgb(41, 41, 41)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
tooltip: '#EAEAEA',
} satisfies Omit<AffineTheme, 'editorMode'>;
export const getTheme: (
themeMode: Theme,
editorMode: NonNullable<EditorContainer['mode']>
) => AffineTheme = (themeMode, editorMode) => {
return {
palette: {
mode: 'light',
},
editorMode,
colors: {
pageBackground: '#fff',
hoverBackground: 'rgba(0,0,0,.04)',
innerHoverBackground: '#E9E9EC',
popoverBackground: '#fff',
tooltipBackground: '#261499',
codeBackground: '#f2f5f9',
codeBlockBackground: '#FAFBFD',
hubBackground: '#fbfbfc',
cardHoverBackground: '#f8f9ff',
warningBackground: '#FFF9C7',
errorBackground: '#FFDED8',
modalBackground: 'rgba(0, 0, 0, 0.6)',
textColor: '#424149',
secondaryTextColor: '#8E8D91',
edgelessTextColor: '#3A4C5C',
handleColor: '#c7c3d9',
linkColor2: '#5438FF',
linkVisitedColor: '#5438FF',
tooltipColor: '#fff',
codeColor: '#77757D',
placeHolderColor: '#C0BFC1',
selectedColor: 'rgba(84, 56, 255, 0.04)',
disableColor: '#A9A9AD',
lineNumberColor: '#77757D',
...nextLightColorScheme,
},
font: {
title: '36px',
h1: '28px',
h2: '26px',
h3: '24px',
h4: '22px',
h5: '20px',
h6: '18px',
base: '16px',
sm: '14px',
xs: '12px',
family: `Avenir Next, Poppins, ${basicFontFamily}`,
numberFamily: `Roboto Mono, ${basicFontFamily}`,
codeFamily: `Space Mono, Consolas, Menlo, Monaco, Courier, monospace, ${basicFontFamily}`,
lineHeight: 'calc(1em + 8px)',
},
zIndex: {
modal: 1000,
popover: 100,
},
shadow: {
popover: '0px 0px 12px rgba(66, 65, 73, 0.14)',
modal:
'0px 0px 20px 4px rgba(65, 64, 72, 0.24), 0px 0px 12px rgba(66, 65, 73, 0.14)',
tooltip: '0px 0px 4px rgba(0, 0, 0, 0.14)',
},
space: {
paragraph: '8px',
},
radius: {
popover: '10px',
},
breakpoints: {
values: {
xs: 0,
sm: 640,
md: 960,
lg: 1280,
xl: 1920,
},
},
};
};
export const getDarkTheme = (
editorMode: EditorContainer['mode']
): AffineTheme => {
const lightTheme = getLightTheme(editorMode);
return {
...lightTheme,
palette: {
mode: 'dark',
},
colors: {
pageBackground: '#2c2c2c',
hoverBackground: 'rgba(0,0,0,.04)',
innerHoverBackground: '#5A5A5A',
popoverBackground: '#1F2021',
tooltipBackground: '#0C0A15',
codeBackground:
editorMode === 'edgeless'
? lightTheme.colors.codeBackground
: '#505662',
codeBlockBackground: '#292C33',
hubBackground: '#272727',
cardHoverBackground: '#363636',
warningBackground: '#FFF9C7',
errorBackground: '#FFDED8',
modalBackground: 'rgba(0, 0, 0, 0.8)',
textColor: '#fff',
secondaryTextColor: '#8E8D91',
edgelessTextColor: '#3A4C5C',
handleColor: '#c7c3d9',
linkColor2: '#0C0A15',
linkVisitedColor: '#505FAB',
tooltipColor: '#fff',
codeColor:
editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(104, 128, 255, 0.1)',
disableColor: '#4b4b4b',
lineNumberColor: '#888A9E',
...nextDarkColorScheme,
},
shadow: {
popover:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
modal: '0px 4px 24px #161616',
tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
},
};
};
/**
* @deprecated these theme will be removed in the future
*/
export const globalThemeVariables: (
theme: AffineTheme
) => AffineThemeCSSVariables = theme => {
return {
'--affine-theme-mode': theme.palette.mode,
'--affine-editor-mode': theme.editorMode,
'--affine-primary-color': theme.colors.primaryColor,
'--affine-page-background': theme.colors.pageBackground,
'--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-hub-background': theme.colors.hubBackground,
'--affine-card-hover-background': theme.colors.cardHoverBackground,
'--affine-text-color': theme.colors.textColor,
'--affine-secondary-text-color': theme.colors.secondaryTextColor,
'--affine-edgeless-text-color': theme.colors.edgelessTextColor,
'--affine-link-color': theme.colors.linkColor,
// In dark mode, normal text`s (not bold) color
'--affine-link-color2': theme.colors.linkColor2,
'--affine-link-visited-color': theme.colors.linkVisitedColor,
'--affine-icon-color': theme.colors.iconColor,
'--affine-block-handle-color': theme.colors.handleColor,
'--affine-code-color': theme.colors.codeColor,
'--affine-code-block-background': theme.colors.codeBlockBackground,
'--affine-quote-color': theme.colors.quoteColor,
'--affine-selected-color': theme.colors.selectedColor,
'--affine-placeholder-color': theme.colors.placeHolderColor,
'--affine-border-color': theme.colors.borderColor,
'--affine-disable-color': theme.colors.disableColor,
'--affine-tooltip-color': theme.colors.tooltipColor,
'--affine-line-number-color': theme.colors.lineNumberColor,
'--affine-modal-shadow': theme.shadow.modal,
'--affine-popover-shadow': theme.shadow.popover,
'--affine-font-h1': theme.font.h1,
'--affine-font-h2': theme.font.h2,
'--affine-font-h3': theme.font.h3,
'--affine-font-h4': theme.font.h4,
'--affine-font-h5': theme.font.h5,
'--affine-font-h6': theme.font.h6,
'--affine-font-base': theme.font.base,
'--affine-font-sm': theme.font.sm, // small
'--affine-font-xs': theme.font.xs, // tiny
'--affine-line-height': theme.font.lineHeight,
'--affine-z-index-modal': theme.zIndex.modal,
'--affine-z-index-popover': theme.zIndex.popover,
'--affine-font-family': theme.font.family,
'--affine-font-number-family': theme.font.numberFamily,
'--affine-font-code-family': theme.font.codeFamily,
'--affine-paragraph-space': theme.space.paragraph,
'--affine-popover-radius': theme.radius.popover,
'--affine-zoom': '1',
'--affine-scale': 'calc(1 / var(--affine-zoom))',
...(themeMode === 'light' ? lightTheme : darkTheme),
};
};

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

@@ -1,170 +1,11 @@
import type { EditorContainer } from '@blocksuite/editor';
import type { CSSProperties } from 'react';
import type { AffineNextLightColorScheme } from './color-scheme';
export type Theme = 'light' | 'dark';
export type ThemeMode = Theme | 'auto';
import type { AffineTheme } from './theme';
export type ThemeProviderProps = {
defaultTheme?: Theme;
};
export type ThemeProviderValue = {
theme: AffineTheme;
mode: Theme;
changeMode: (newMode: Theme) => void;
};
export interface AffineTheme {
editorMode: EditorContainer['mode'];
palette: {
mode: 'light' | 'dark';
};
colors: {
primaryColor: string;
pageBackground: string;
popoverBackground: string;
tooltipBackground: string;
hoverBackground: string;
innerHoverBackground: string;
modalBackground: string;
// Use for the quick search tips background
backgroundTertiaryColor: string;
codeBackground: string;
codeBlockBackground: string;
// Use for blockHub and slide bar background
hubBackground: string;
cardHoverBackground: string;
warningBackground: string;
errorBackground: string;
// 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;
// In dark mode, normal text`s (not bold) color
linkColor2: string;
linkVisitedColor: string;
iconColor: string;
handleColor: string;
tooltipColor: string;
codeColor: string;
quoteColor: string;
placeHolderColor: string;
selectedColor: string;
borderColor: string;
disableColor: string;
warningColor: string;
errorColor: string;
lineNumberColor: string;
} & AffineNextLightColorScheme;
font: {
title: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
h6: string;
base: string;
sm: string; // small
xs: string; // tiny
family: string;
numberFamily: string;
codeFamily: string;
lineHeight: string | number;
};
zIndex: {
modal: number;
popover: number;
};
shadow: {
modal: string;
popover: string;
tooltip: string;
};
space: {
paragraph: string;
};
radius: {
popover: string;
};
breakpoints: {
values: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
};
};
}
export interface AffineThemeCSSVariables {
'--affine-theme-mode': Theme;
'--affine-editor-mode': EditorContainer['mode'];
'--affine-primary-color': AffineTheme['colors']['primaryColor'];
'--affine-page-background': AffineTheme['colors']['pageBackground'];
'--affine-popover-background': AffineTheme['colors']['popoverBackground'];
'--affine-hover-background': AffineTheme['colors']['hoverBackground'];
'--affine-code-background': AffineTheme['colors']['codeBackground'];
'--affine-code-block-background': AffineTheme['colors']['codeBlockBackground'];
'--affine-tooltip-background': AffineTheme['colors']['tooltipBackground'];
'--affine-hub-background': AffineTheme['colors']['hubBackground'];
'--affine-card-hover-background': AffineTheme['colors']['cardHoverBackground'];
'--affine-text-color': AffineTheme['colors']['textColor'];
'--affine-secondary-text-color': AffineTheme['colors']['secondaryTextColor'];
'--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor'];
'--affine-link-color': AffineTheme['colors']['linkColor'];
// In dark mode, normal text`s (not bold) color
'--affine-link-color2': AffineTheme['colors']['linkColor2'];
'--affine-link-visited-color': AffineTheme['colors']['linkVisitedColor'];
'--affine-icon-color': AffineTheme['colors']['iconColor'];
'--affine-code-color': AffineTheme['colors']['codeColor'];
'--affine-quote-color': AffineTheme['colors']['quoteColor'];
'--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];
'--affine-selected-color': AffineTheme['colors']['selectedColor'];
'--affine-border-color': AffineTheme['colors']['borderColor'];
'--affine-disable-color': AffineTheme['colors']['disableColor'];
'--affine-tooltip-color': AffineTheme['colors']['tooltipColor'];
'--affine-line-number-color': AffineTheme['colors']['lineNumberColor'];
'--affine-modal-shadow': AffineTheme['shadow']['modal'];
'--affine-popover-shadow': AffineTheme['shadow']['popover'];
'--affine-font-h1': AffineTheme['font']['h1'];
'--affine-font-h2': AffineTheme['font']['h2'];
'--affine-font-h3': AffineTheme['font']['h3'];
'--affine-font-h4': AffineTheme['font']['h4'];
'--affine-font-h5': AffineTheme['font']['h5'];
'--affine-font-h6': AffineTheme['font']['h6'];
'--affine-font-base': AffineTheme['font']['base'];
'--affine-font-sm': AffineTheme['font']['sm']; // small
'--affine-font-xs': AffineTheme['font']['xs']; // tiny
'--affine-line-height': AffineTheme['font']['lineHeight'];
'--affine-z-index-modal': AffineTheme['zIndex']['modal'];
'--affine-z-index-popover': AffineTheme['zIndex']['popover'];
'--affine-font-family': AffineTheme['font']['family'];
'--affine-font-number-family': AffineTheme['font']['numberFamily'];
'--affine-font-code-family': AffineTheme['font']['codeFamily'];
'--affine-paragraph-space': AffineTheme['space']['paragraph'];
'--affine-popover-radius': AffineTheme['radius']['popover'];
// use for blocksuite
'--affine-zoom': CSSProperties['zoom'];
'--affine-scale': string;
}
export type Theme = 'light' | 'dark';
export type ThemeMode = Theme | 'auto';
declare module '@emotion/react' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface

2
packages/component/src/ui/breadcrumbs/index.ts
View File

@@ -4,6 +4,6 @@ import { styled } from '../../styles';
export const Breadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {
return {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
};
});

20
packages/component/src/ui/button/styles.ts
View File

@@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', {
width,
height,
fontSize,
color: theme.colors.iconColor,
color: 'var(--affine-hover-color)',
...displayInlineFlex('center', 'center'),
position: 'relative',
...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
@@ -66,9 +66,9 @@ export const StyledIconButton = styled('button', {
},
':hover': {
color: hoverColor ?? theme.colors.primaryColor,
color: hoverColor ?? 'var(--affine-primary-color)',
'::after': {
background: hoverBackground || theme.colors.hoverBackground,
background: hoverBackground || 'var(--affine-hover-color)',
},
...(hoverStyle ?? {}),
},
@@ -132,8 +132,8 @@ export const StyledTextButton = styled('button', {
fontWeight: bold ? '500' : '400',
':hover': {
color: hoverColor ?? theme.colors.primaryColor,
background: hoverBackground ?? theme.colors.hoverBackground,
color: hoverColor ?? 'var(--affine-primary-color)',
background: hoverBackground ?? 'var(--affine-hover-color)',
...(hoverStyle ?? {}),
},
};
@@ -192,7 +192,7 @@ export const StyledButton = styled('button', {
? {
cursor: 'not-allowed',
pointerEvents: 'none',
color: theme.colors.disableColor,
color: 'var(--affine-text-disable-color)',
}
: {}),
transition: 'background .15s',
@@ -201,10 +201,10 @@ export const StyledButton = styled('button', {
fontSize,
fontWeight: bold ? '500' : '400',
'.affine-button-icon': {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
'.affine-button-icon__fixed': {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
'>span': {
marginLeft: '5px',
@@ -221,8 +221,8 @@ export const StyledButton = styled('button', {
// TODO: disabled hover should be implemented
//
// ':hover': {
// color: hoverColor ?? theme.colors.primaryColor,
// background: hoverBackground ?? theme.colors.hoverBackground,
// color: hoverColor ?? 'var(--affine-primary-color)',
// background: hoverBackground ?? 'var(--affine-hover-color)',
// '.affine-button-icon':{
//
// }

48
packages/component/src/ui/button/utils.ts
View File

@@ -47,37 +47,39 @@ export const getButtonColors = (
switch (type) {
case 'primary':
return {
background: theme.colors.primaryColor,
background: 'var(--affine-primary-color)',
color: '#fff',
borderColor: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
'.affine-button-icon': {
color: '#fff',
},
};
case 'light':
return {
background: theme.colors.hoverBackground,
color: disabled ? theme.colors.disableColor : theme.colors.primaryColor,
borderColor: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
color: disabled
? 'var(--affine-text-disable-color)'
: 'var(--affine-primary-color)',
borderColor: 'var(--affine-hover-color)',
'.affine-button-icon': {
borderColor: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
},
':hover': {
borderColor: disabled
? theme.colors.hoverBackground
: theme.colors.primaryColor,
? 'var(--affine-hover-color)'
: 'var(--affine-primary-color)',
},
};
case 'warning':
return {
background: theme.colors.warningBackground,
color: theme.colors.warningColor,
borderColor: theme.colors.warningBackground,
background: 'var(--affine-background-warning-color)',
color: 'var(--affine-background-warning-color)',
borderColor: 'var(--affine-background-warning-color)',
'.affine-button-icon': {
color: theme.colors.warningColor,
color: 'var(--affine-background-warning-color)',
},
':hover': {
borderColor: theme.colors.warningColor,
borderColor: 'var(--affine-background-warning-color)',
color: extend?.hoverColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,
@@ -85,14 +87,14 @@ export const getButtonColors = (
};
case 'danger':
return {
background: theme.colors.errorBackground,
color: theme.colors.errorColor,
borderColor: theme.colors.errorBackground,
background: 'var(--affine-background-error-color)',
color: 'var(--affine-error-color)',
borderColor: 'var(--affine-background-error-color)',
'.affine-button-icon': {
color: theme.colors.errorColor,
color: 'var(--affine-error-color)',
},
':hover': {
borderColor: theme.colors.errorColor,
borderColor: 'var(--affine-error-color)',
color: extend?.hoverColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,
@@ -100,13 +102,13 @@ export const getButtonColors = (
};
default:
return {
color: theme.colors.textColor,
borderColor: theme.colors.borderColor,
color: 'var(--affine-text-primary-color)',
borderColor: 'var(--affine-border-color)',
':hover': {
borderColor: theme.colors.primaryColor,
color: extend?.hoverColor ?? theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: extend?.hoverColor ?? 'var(--affine-primary-color)',
'.affine-button-icon': {
color: extend?.hoverColor ?? theme.colors.primaryColor,
color: extend?.hoverColor ?? 'var(--affine-primary-color)',
background: extend?.hoverBackground,
...extend?.hoverStyle,
},

6
packages/component/src/ui/confirm/styles.ts
View File

@@ -13,7 +13,7 @@ export const StyledModalWrapper = styled(ModalWrapper)(() => {
export const StyledConfirmTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
fontWeight: 600,
textAlign: 'center',
lineHeight: '28px',
@@ -22,10 +22,10 @@ export const StyledConfirmTitle = styled('div')(({ theme }) => {
export const StyledConfirmContent = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
textAlign: 'center',
marginTop: '12px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
lineHeight: '26px',
};
});

2
packages/component/src/ui/divider/index.ts
View File

@@ -4,6 +4,6 @@ import { styled } from '../../styles';
export const Divider = styled(MuiDivider)(({ theme }) => {
return {
borderColor: theme.colors.borderColor,
borderColor: 'var(--affine-border-color)',
};
});

12
packages/component/src/ui/input/style.ts
View File

@@ -14,16 +14,18 @@ export const StyledInput = styled('input')<{
height,
lineHeight: '22px',
padding: '8px 12px',
color: disabled ? theme.colors.disableColor : theme.colors.textColor,
color: disabled
? 'var(--affine-text-disable-color)'
: 'var(--affine-text-primary-color)',
border: noBorder ? 'unset' : `1px solid`,
borderColor: theme.colors.borderColor, // TODO: check out disableColor,
backgroundColor: theme.colors.popoverBackground,
borderColor: 'var(--affine-border-color)', // TODO: check out disableColor,
backgroundColor: 'var(--affine-white)',
borderRadius: '10px',
'&::placeholder': {
color: theme.colors.placeHolderColor,
color: 'var(--affine-placeholder-color)',
},
'&:focus': {
borderColor: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
},
};
});

4
packages/component/src/ui/layout/Content.tsx
View File

@@ -47,8 +47,8 @@ export const Content = styled('div', {
maxWidth,
textAlign: align,
display: 'inline-block',
color: color ?? theme.colors.textColor,
fontSize: fontSize ?? theme.font.base,
color: color ?? 'var(--affine-text-primary-color)',
fontSize: fontSize ?? 'var(--affine-font-base)',
fontWeight: weight ?? 400,
lineHeight: lineHeight ?? 1.5,
...(ellipsis ? textEllipsis(lineNum) : {}),

28
packages/component/src/ui/menu/styles.ts
View File

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

2
packages/component/src/ui/modal/ModalWrapper.tsx
View File

@@ -11,7 +11,7 @@ export const ModalWrapper = styled('div')<{
width,
height,
minHeight,
backgroundColor: theme.colors.popoverBackground,
backgroundColor: 'var(--affine-white)',
borderRadius: '16px',
position: 'relative',
maxHeight: 'calc(100vh - 32px)',

4
packages/component/src/ui/modal/styles.ts
View File

@@ -12,7 +12,7 @@ export const StyledBackdrop = styled('div')(({ theme }) => {
bottom: '0',
top: '0',
left: '0',
backgroundColor: theme.colors.modalBackground,
backgroundColor: 'var(--affine-background-modal-color)',
};
});
@@ -33,7 +33,7 @@ export const StyledModal = styled(ModalUnstyled, {
position: 'fixed',
left: '0',
top: '0',
zIndex: theme.zIndex.modal,
zIndex: 'var(--affine-z-index-modal)',
'*': {
WebkitTapHighlightColor: 'transparent',
outline: 'none',

2
packages/component/src/ui/popper/PopoverArrow.tsx
View File

@@ -92,6 +92,6 @@ const StyledArrow = styled('span')<{
bottom: 0,
},
...getArrowStyle(placement, theme.colors.tooltipBackground),
...getArrowStyle(placement, 'var(--affine-tooltip)'),
};
});

2
packages/component/src/ui/popper/Popper.tsx
View File

@@ -191,6 +191,6 @@ export const BasicStyledPopper = styled(PopperUnstyled, {
zIndex?: CSSProperties['zIndex'];
}>(({ zIndex, theme }) => {
return {
zIndex: zIndex ?? theme.zIndex.popover,
zIndex: zIndex ?? 'var(--affine-z-index-popover)',
};
});

5
packages/component/src/ui/shared/Container.tsx
View File

@@ -45,7 +45,10 @@ export const StyledPopperContainer = styled('div')<{
placement?: PopperPlacementType;
}>(({ theme, placement = 'top' }) => {
const direction = placementToContainerDirection[placement];
const borderRadius = getBorderRadius(direction, theme.radius.popover);
const borderRadius = getBorderRadius(
direction,
'var(--affine-popover-radius)'
);
return {
borderRadius,
};

6
packages/component/src/ui/table/styles.ts
View File

@@ -4,8 +4,8 @@ import type { TableCellProps } from './interface';
export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
({ theme, tableLayout }) => {
return {
fontSize: theme.font.base,
color: theme.colors.textColor,
fontSize: 'var(--affine-font-base)',
color: 'var(--affine-text-primary-color)',
tableLayout,
width: '100%',
borderCollapse: 'separate',
@@ -69,7 +69,7 @@ export const StyledTableRow = styled('tr')(({ theme }) => {
':hover': {
td: {
background: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
},
},
};

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

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

6
packages/component/src/ui/tooltip/Tooltip.tsx
View File

@@ -6,11 +6,11 @@ import StyledPopperContainer from '../shared/Container';
const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
return {
maxWidth: '320px',
boxShadow: theme.shadow.popover,
boxShadow: 'var(--affine-text-popover-shadow)',
padding: '4px 12px',
backgroundColor: theme.colors.tooltipBackground,
backgroundColor: 'var(--affine-tooltip)',
color: '#fff',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
};
});

8
packages/component/src/ui/tree-view/styles.ts
View File

@@ -1,7 +1,7 @@
import MuiCollapse from '@mui/material/Collapse';
import type { CSSProperties } from 'react';
import { alpha, styled } from '../../styles';
import { alpha, lightTheme, styled } from '../../styles';
export const StyledCollapse = styled(MuiCollapse)<{
indent?: CSSProperties['paddingLeft'];
@@ -18,7 +18,7 @@ export const StyledTreeNodeWrapper = styled('div')(() => {
export const StyledTreeNodeContainer = styled('div')<{ isDragging?: boolean }>(
({ isDragging = false, theme }) => {
return {
background: isDragging ? theme.colors.hoverBackground : '',
background: isDragging ? 'var(--affine-hover-color)' : '',
// opacity: isDragging ? 0.4 : 1,
};
}
@@ -33,9 +33,9 @@ export const StyledNodeLine = styled('div')<{ show: boolean; isTop?: boolean }>(
width: '100%',
paddingTop: '2x',
borderTop: '2px solid',
borderColor: show ? theme.colors.primaryColor : 'transparent',
borderColor: show ? 'var(--affine-primary-color)' : 'transparent',
boxShadow: show
? `0px 0px 8px ${alpha(theme.colors.primaryColor, 0.35)}`
? `0px 0px 8px ${alpha(lightTheme.primaryColor, 0.35)}`
: 'none',
zIndex: 1,
};