mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-17 18:16:15 +08:00
feat: upgrate to new theme (#2027)
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Flrande
+3
-4
@@ -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 (
|
||||
@@ -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;
|
||||
@@ -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';
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -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),
|
||||
};
|
||||
};
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user