mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 12:28:42 +00:00
263 lines
9.1 KiB
TypeScript
263 lines
9.1 KiB
TypeScript
export const camelToKebab = (s: string) => {
|
|
if (typeof s !== 'string') return '';
|
|
return s
|
|
.replace(/-/g, '_')
|
|
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
|
|
.replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
|
|
.toLowerCase()
|
|
.replace(/(\D+)(\d+)$/g, '$1-$2')
|
|
.replace(/\s|_/g, '-');
|
|
};
|
|
|
|
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: 'page' | 'edgeless';
|
|
};
|
|
|
|
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 baseTheme = {
|
|
// 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: '12px',
|
|
|
|
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: 'rgba(231, 250, 243, 1)',
|
|
backgroundErrorColor: 'rgba(253, 236, 235, 1)',
|
|
backgroundProcessingColor: 'rgba(233, 241, 255, 1)',
|
|
backgroundWarningColor: 'rgba(255, 239, 233, 1)',
|
|
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.4)',
|
|
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: 'rgba(245, 245, 245, 1)',
|
|
tagGray: 'rgba(227, 226, 224, 1)',
|
|
tagRed: 'rgba(255, 225, 225, 1)',
|
|
tagOrange: 'rgba(255, 233, 201, 1)',
|
|
tagYellow: 'rgba(255, 243, 215, 1)',
|
|
tagGreen: 'rgba(222, 244, 231, 1)',
|
|
tagTeal: 'rgba(222, 244, 243, 1)',
|
|
tagBlue: 'rgba(225, 238, 255, 1)',
|
|
tagPurple: 'rgba(243, 240, 255, 1)',
|
|
tagPink: 'rgba(251, 231, 255, 1)',
|
|
paletteLineYellow: 'rgb(255, 232, 56)',
|
|
paletteLineOrange: 'rgb(255, 175, 56)',
|
|
paletteLineTangerine: 'rgb(255, 99, 31)',
|
|
paletteLineRed: 'rgb(252, 63, 85)',
|
|
paletteLineMagenta: 'rgb(255, 56, 179)',
|
|
paletteLinePurple: 'rgb(182, 56, 255)',
|
|
paletteLineNavy: 'rgb(59, 37, 204)',
|
|
paletteLineBlue: 'rgb(79, 144, 255)',
|
|
paletteLineGreen: 'rgb(16, 203, 134)',
|
|
paletteLineWhite: 'rgb(255, 255, 255)',
|
|
paletteLineBlack: 'rgb(0, 0, 0)',
|
|
paletteLineGrey: 'rgb(153, 153, 153)',
|
|
paletteShapeYellow: 'rgb(255, 241, 136)',
|
|
paletteShapeOrange: 'rgb(255, 207, 136)',
|
|
paletteShapeTangerine: 'rgb(255, 161, 121)',
|
|
paletteShapeRed: 'rgb(253, 140, 153)',
|
|
paletteShapeMagenta: 'rgb(255, 136, 209)',
|
|
paletteShapePurple: 'rgb(211, 136, 255)',
|
|
paletteShapeNavy: 'rgb(137, 124, 224)',
|
|
paletteShapeBlue: 'rgb(149, 188, 255)',
|
|
paletteShapeGreen: 'rgb(112, 224, 182)',
|
|
paletteShapeWhite: 'rgb(255, 255, 255)',
|
|
paletteShapeBlack: 'rgb(0, 0, 0)',
|
|
paletteShapeGrey: 'rgb(194, 194, 194)',
|
|
tooltip: '#424149',
|
|
menuShadow:
|
|
'0px 0px 12px rgba(66, 65, 73, 0.1), inset 0px 0px 0px 0.5px rgba(227, 227, 228, 1)',
|
|
shadow: '0px 0px 4px rgba(66, 65, 73, 0.1)',
|
|
popoverShadow:
|
|
'0px 0px 30px rgba(75, 75, 75, 0.2), 0px 0px 4px rgba(75, 75, 75, 0.3), inset 0px 0px 0px rgba(227, 226, 228, 1)',
|
|
floatButtonShadow:
|
|
'0px 1px 16px rgba(0, 0, 0, 0.1), 0px 2px 3px rgba(0, 0, 0, 0.1)',
|
|
};
|
|
|
|
export const darkTheme = {
|
|
...baseTheme,
|
|
|
|
themeMode: 'dark',
|
|
|
|
brandColor: 'rgba(156, 140, 255, 1)',
|
|
primaryColor: 'rgba(156, 140, 255, 1)',
|
|
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: 'rgba(156, 140, 255, 1)',
|
|
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: 'rgba(20, 22, 26, 1)',
|
|
backgroundErrorColor: 'rgba(21, 14, 13, 1)',
|
|
backgroundWarningColor: 'rgba(26, 10, 3, 1)',
|
|
backgroundSuccessColor: 'rgba(8, 21, 18, 1)',
|
|
backgroundPrimaryColor: 'rgb(20, 20, 20)',
|
|
backgroundSecondaryColor: 'rgb(32, 32, 32)',
|
|
backgroundModalColor: 'rgba(0, 0, 0, 0.5)',
|
|
backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
|
|
tagBlue: 'rgba(8, 67, 136, 1)',
|
|
tagGreen: 'rgba(44, 108, 63, 1)',
|
|
tagTeal: 'rgba(26, 115, 110, 1)',
|
|
tagWhite: 'rgba(67, 67, 67, 1)',
|
|
tagPurple: 'rgba(47, 30, 113, 1)',
|
|
tagRed: 'rgba(111, 50, 50, 1)',
|
|
tagPink: 'rgba(155, 106, 106, 1)',
|
|
tagYellow: 'rgba(150, 132, 49, 1)',
|
|
tagOrange: 'rgba(185, 129, 46, 1)',
|
|
tagGray: 'rgba(41, 41, 41, 1)',
|
|
paletteLineYellow: 'rgb(255, 232, 56)',
|
|
paletteLineOrange: 'rgb(255, 175, 56)',
|
|
paletteLineTangerine: 'rgb(255, 99, 31)',
|
|
paletteLineRed: 'rgb(252, 63, 85)',
|
|
paletteLineMagenta: 'rgb(255, 56, 179)',
|
|
paletteLinePurple: 'rgb(182, 56, 255)',
|
|
paletteLineNavy: 'rgb(59, 37, 204)',
|
|
paletteLineBlue: 'rgb(79, 144, 255)',
|
|
paletteLineGreen: 'rgb(16, 203, 134)',
|
|
paletteLineWhite: 'rgb(255, 255, 255)',
|
|
paletteLineBlack: 'rgb(0, 0, 0)',
|
|
paletteLineGrey: 'rgb(153, 153, 153)',
|
|
paletteShapeYellow: 'rgb(255, 241, 136)',
|
|
paletteShapeOrange: 'rgb(255, 207, 136)',
|
|
paletteShapeTangerine: 'rgb(255, 161, 121)',
|
|
paletteShapeRed: 'rgb(253, 140, 153)',
|
|
paletteShapeMagenta: 'rgb(255, 136, 209)',
|
|
paletteShapePurple: 'rgb(211, 136, 255)',
|
|
paletteShapeNavy: 'rgb(137, 124, 224)',
|
|
paletteShapeBlue: 'rgb(149, 188, 255)',
|
|
paletteShapeGreen: 'rgb(112, 224, 182)',
|
|
paletteShapeWhite: 'rgb(255, 255, 255)',
|
|
paletteShapeBlack: 'rgb(0, 0, 0)',
|
|
paletteShapeGrey: 'rgb(194, 194, 194)',
|
|
tooltip: '#EAEAEA',
|
|
menuShadow:
|
|
'0px 0px 12px rgba(0, 0, 0, 1), inset 0px 0px 0px 0.5px rgba(46, 46, 46, 1)',
|
|
shadow: '0px 0px 4px rgba(20, 20, 20, 1)',
|
|
popoverShadow:
|
|
'0px 0px 30px rgba(12, 12, 12, 0.8), 0px 0px 8px rgba(12, 12, 12, 1), inset 0px 0px 0px rgba(46, 46, 46, 1)',
|
|
floatButtonShadow:
|
|
'0px 1px 16px rgba(0, 0, 0, 1), 0px 2px 3px rgba(0, 0, 0, 1)',
|
|
} satisfies Omit<AffineTheme, 'editorMode'>;
|
|
|
|
export const lightCssVariables = Object.entries(lightTheme).reduce(
|
|
(variables, [key, value]) => {
|
|
variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
|
|
value;
|
|
return variables;
|
|
},
|
|
{} as AffineCssVariables
|
|
);
|
|
|
|
export const darkCssVariables = Object.entries(darkTheme).reduce(
|
|
(variables, [key, value]) => {
|
|
variables[`--affine-${camelToKebab(key)}` as keyof AffineCssVariables] =
|
|
value;
|
|
return variables;
|
|
},
|
|
{} as AffineCssVariables
|
|
);
|