toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-25 22:29:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: modify style variables

Browse Source
This commit is contained in:
QiShaoXuan 2022-10-18 17:08:42 +08:00
parent 2b13a63848
commit 90dba82a59
15 changed files with 232 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app/public/globals.css
View File

@ -145,7 +145,7 @@ button,
select, select,
keygen, keygen,
legend { legend {
color: var(--page-text-color); color: var(--affine-text-color);
outline: 0; outline: 0;
font-size: 18px; font-size: 18px;
line-height: 1.5; line-height: 1.5;
@ -156,7 +156,7 @@ body {
} }
a, a,
a:hover { a:hover {
color: var(--page-text-color); color: var(--affine-link-color);
} }
input { input {

2
packages/app/src/components/Header/index.tsx
View File

@ -65,7 +65,7 @@ export const Header = () => {
return ( return (
<StyledHeader> <StyledHeader>
<StyledLogo> <StyledLogo>
<LogoIcon style={{ color: '#6880FF' }} onClick={() => {}} /> <LogoIcon onClick={() => {}} />
</StyledLogo> </StyledLogo>
<StyledTitle <StyledTitle
onMouseEnter={() => { onMouseEnter={() => {

55
packages/app/src/components/Header/styles.ts
View File

@ -33,14 +33,10 @@ export const StyledTitleWrapper = styled('div')({
position: 'relative', position: 'relative',
}); });
export const StyledLogo = styled('div')({}); export const StyledLogo = styled('div')(({ theme }) => ({
color: theme.colors.primaryColor,
export const StyledModeSwitch = styled('div')({ cursor: 'pointer',
height: '100%', }));
display: 'flex',
alignItems: 'center',
marginRight: '12px',
});
export const StyledHeaderRightSide = styled('div')({ export const StyledHeaderRightSide = styled('div')({
height: '100%', height: '100%',
@ -48,27 +44,25 @@ export const StyledHeaderRightSide = styled('div')({
alignItems: 'center', alignItems: 'center',
}); });
export const StyledMoreMenuItem = styled('div')({ export const StyledMoreMenuItem = styled('div')(({ theme }) => {
height: '32px', return {
display: 'flex', height: '32px',
alignItems: 'center', display: 'flex',
borderRadius: '5px', alignItems: 'center',
fontSize: '14px', borderRadius: '5px',
color: '#4C6275', fontSize: '14px',
padding: '0 14px', color: theme.colors.popoverColor,
svg: { padding: '0 14px',
fill: '#4C6275',
width: '16px',
height: '16px',
marginRight: '14px',
},
':hover': {
color: 'var(--affine-highlight-color)',
background: '#F1F3FF',
svg: { svg: {
fill: 'var(--affine-highlight-color)', width: '16px',
height: '16px',
marginRight: '14px',
}, },
}, ':hover': {
color: theme.colors.primaryColor,
background: theme.colors.hoverBackground,
},
};
}); });
export const IconButton = styled('div')(({ theme }) => { export const IconButton = styled('div')(({ theme }) => {
@ -78,12 +72,11 @@ export const IconButton = styled('div')(({ theme }) => {
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
color: theme.colors.disabled, color: theme.colors.iconColor,
background: 'transparent',
borderRadius: '5px', borderRadius: '5px',
':hover': { ':hover': {
color: theme.colors.highlight, color: theme.colors.primaryColor,
background: '#F1F3FF', background: theme.colors.hoverBackground,
}, },
}; };
}); });

26
packages/app/src/components/editor-mode-switch/index.tsx
View File

@ -1,7 +1,6 @@
import React, { useState, useEffect, cloneElement } from 'react'; import React, { useState, useEffect, cloneElement } from 'react';
import { import {
StyledAnimateRadioContainer, StyledAnimateRadioContainer,
StyledRadioMiddle,
StyledMiddleLine, StyledMiddleLine,
StyledRadioItem, StyledRadioItem,
StyledLabel, StyledLabel,
@ -19,21 +18,21 @@ import { useEditor } from '@/components/editor-provider';
const PaperItem = ({ active }: { active?: boolean }) => { const PaperItem = ({ active }: { active?: boolean }) => {
const { const {
theme: { theme: {
colors: { highlight, disabled }, colors: { iconColor, primaryColor },
}, },
} = useTheme(); } = useTheme();
return <PaperIcon style={{ color: active ? highlight : disabled }} />; return <PaperIcon style={{ color: active ? primaryColor : iconColor }} />;
}; };
const EdgelessItem = ({ active }: { active?: boolean }) => { const EdgelessItem = ({ active }: { active?: boolean }) => {
const { const {
theme: { theme: {
colors: { highlight, disabled }, colors: { iconColor, primaryColor },
}, },
} = useTheme(); } = useTheme();
return <EdgelessIcon style={{ color: active ? highlight : disabled }} />; return <EdgelessIcon style={{ color: active ? primaryColor : iconColor }} />;
}; };
const AnimateRadioItem = ({ const AnimateRadioItem = ({
@ -57,24 +56,11 @@ const AnimateRadioItem = ({
); );
}; };
const RadioMiddle = ({
isHover,
direction,
}: {
isHover: boolean;
direction: 'left' | 'right' | 'middle';
}) => {
return (
<StyledRadioMiddle hidden={!isHover}>
<StyledMiddleLine hidden={false} />
</StyledRadioMiddle>
);
};
export const EditorModeSwitch = ({ export const EditorModeSwitch = ({
isHover, isHover,
style = {}, style = {},
}: AnimateRadioProps) => { }: AnimateRadioProps) => {
const { mode: themeMode } = useTheme();
const { mode, setMode } = useEditor(); const { mode, setMode } = useEditor();
const modifyRadioItemStatus = (): RadioItemStatus => { const modifyRadioItemStatus = (): RadioItemStatus => {
return { return {
@ -124,7 +110,7 @@ export const EditorModeSwitch = ({
setRadioItemStatus(modifyRadioItemStatus()); setRadioItemStatus(modifyRadioItemStatus());
}} }}
/> />
<StyledMiddleLine hidden={!isHover} /> <StyledMiddleLine hidden={!isHover} dark={themeMode === 'dark'} />
<AnimateRadioItem <AnimateRadioItem
isLeft={false} isLeft={false}
label="Edgeless" label="Edgeless"

34
packages/app/src/components/editor-mode-switch/style.ts
View File

@ -6,7 +6,7 @@ import type { ItemStatus } from './type';
const ANIMATE_DURATION = 400; const ANIMATE_DURATION = 400;
export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>( export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
({ shrink }) => { ({ shrink, theme }) => {
const animateScaleStretch = keyframes`${toString( const animateScaleStretch = keyframes`${toString(
spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' }) spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
)}`; )}`;
@ -27,7 +27,7 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
return { return {
height: '36px', height: '36px',
borderRadius: '18px', borderRadius: '18px',
background: '#F1F3FF', background: theme.colors.hoverBackground,
position: 'relative', position: 'relative',
display: 'flex', display: 'flex',
transition: `background ${ANIMATE_DURATION}ms`, transition: `background ${ANIMATE_DURATION}ms`,
@ -36,31 +36,21 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
} }
); );
export const StyledRadioMiddle = styled('div')<{ export const StyledMiddleLine = styled('div')<{
hidden: boolean; hidden: boolean;
}>(({ hidden }) => { dark: boolean;
}>(({ hidden, dark }) => {
return { return {
width: '1px', width: '1px',
height: '100%', height: '16px',
position: 'relative', background: dark ? '#4d4c53' : '#D0D7E3',
top: '0',
bottom: '0',
margin: 'auto',
opacity: hidden ? '0' : '1', opacity: hidden ? '0' : '1',
}; };
}); });
export const StyledMiddleLine = styled('div')<{ hidden: boolean }>(
({ hidden }) => {
return {
width: '1px',
height: '16px',
background: '#D0D7E3',
top: '0',
bottom: '0',
margin: 'auto',
opacity: hidden ? '0' : '1',
};
}
);
export const StyledRadioItem = styled('div')<{ export const StyledRadioItem = styled('div')<{
status: ItemStatus; status: ItemStatus;
active: boolean; active: boolean;
@ -89,7 +79,7 @@ export const StyledRadioItem = styled('div')<{
: {}; : {};
const { const {
colors: { highlight, disabled }, colors: { iconColor, primaryColor },
} = theme; } = theme;
return { return {
width: '0', width: '0',
@ -97,7 +87,7 @@ export const StyledRadioItem = styled('div')<{
display: 'flex', display: 'flex',
cursor: 'pointer', cursor: 'pointer',
overflow: 'hidden', overflow: 'hidden',
color: active ? highlight : disabled, color: active ? primaryColor : iconColor,
...dynamicStyle, ...dynamicStyle,
}; };
}); });

19
packages/app/src/components/faq/style.ts
View File

@ -5,22 +5,22 @@ export const StyledFAQ = styled('div')(({ theme }) => {
width: '32px', width: '32px',
height: '32px', height: '32px',
backgroundColor: '#fff', backgroundColor: '#fff',
color: theme.colors.disabled, color: theme.colors.iconColor,
position: 'fixed', position: 'fixed',
right: '30px', right: '30px',
bottom: '30px', bottom: '30px',
borderRadius: '50%', borderRadius: '50%',
zIndex: 1000, zIndex: 1000,
':hover': { ':hover': {
backgroundColor: '#F1F3FF', backgroundColor: theme.colors.popoverBackground,
color: theme.colors.highlight, color: theme.colors.primaryColor,
}, },
}; };
}); });
export const StyledIconWrapper = styled('div')(({ theme }) => { export const StyledIconWrapper = styled('div')(({ theme }) => {
return { return {
color: theme.colors.disabled, color: theme.colors.iconColor,
marginBottom: '24px', marginBottom: '24px',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
@ -31,8 +31,8 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
width: '32px', width: '32px',
height: '32px', height: '32px',
':hover': { ':hover': {
color: theme.colors.highlight, color: theme.colors.primaryColor,
backgroundColor: '#F1F3FF', backgroundColor: theme.colors.hoverBackground,
}, },
}; };
}); });
@ -43,12 +43,9 @@ export const StyledFAQWrapper = styled('div')(({ theme }) => {
bottom: '100%', bottom: '100%',
left: '0', left: '0',
width: '100%', width: '100%',
color: theme.colors.disabled, color: theme.colors.iconColor,
':hover': { ':hover': {
'> svg': { color: theme.colors.popoverColor,
color: theme.colors.highlight,
},
color: theme.colors.highlight,
}, },
}; };
}); });

8
packages/app/src/components/popover/index.tsx
View File

@ -21,12 +21,12 @@ const StyledPopoverWrapper = styled('div')({
paddingTop: '46px', paddingTop: '46px',
zIndex: 1000, zIndex: 1000,
}); });
const StyledPopover = styled('div')(() => { const StyledPopover = styled('div')(({ theme }) => {
return { return {
width: '248px', width: '248px',
background: '#fff', background: theme.colors.popoverBackground,
boxShadow: boxShadow: theme.colors.boxShadow,
'0px 1px 10px -6px rgba(24, 39, 75, 0.5), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)', color: theme.colors.popoverColor,
borderRadius: '10px 0px 10px 10px', borderRadius: '10px 0px 10px 10px',
padding: '8px 4px', padding: '8px 4px',
position: 'absolute', position: 'absolute',

2
packages/app/src/components/simple-counter/index.ts
View File

@ -27,7 +27,7 @@ export class Counter extends LitElement {
static styles = css` static styles = css`
.counter-container { .counter-container {
display: flex; display: flex;
color: var(--color-primary); color: var(--affine-text-color);
} }
button { button {
margin: 0 5px; margin: 0 5px;

4
packages/app/src/components/theme-mode-switch/style.ts
View File

@ -32,7 +32,7 @@ export const StyledSwitchItem = styled('div')<{
)}`; )}`;
const activeStyle = active const activeStyle = active
? { ? {
color: theme.colors.disabled, color: theme.colors.iconColor,
top: '0', top: '0',
animation: firstTrigger animation: firstTrigger
? `${ ? `${
@ -43,7 +43,7 @@ export const StyledSwitchItem = styled('div')<{
} }
: ({ : ({
top: '100%', top: '100%',
color: theme.colors.highlight, color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground, backgroundColor: theme.colors.hoverBackground,
animation: firstTrigger animation: firstTrigger
? `${ ? `${

2
packages/app/src/components/tooltip/Tooltip.tsx
View File

@ -30,7 +30,7 @@ const useTooltipStyle = (): CSSProperties => {
return { return {
boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.14)', boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.14)',
padding: '4px 12px', padding: '4px 12px',
backgroundColor: theme.colors.highlight, backgroundColor: theme.colors.primaryColor,
color: '#fff', color: '#fff',
fontSize: theme.font.xs, fontSize: theme.font.xs,
}; };

14
packages/app/src/pages/index.tsx
View File

@ -12,12 +12,14 @@ const StyledEditorContainer = styled('div')(({ theme }) => {
}; };
}); });
const StyledPage = styled('div')({ const StyledPage = styled('div')(({ theme }) => {
height: '100vh', return {
display: 'flex', height: '100vh',
flexDirection: 'column', display: 'flex',
backgroundColor: 'var(--page-background-color)', flexDirection: 'column',
transition: 'background-color .5s', backgroundColor: theme.colors.pageBackground,
transition: 'background-color .5s',
};
}); });
const DynamicEditor = dynamic(() => import('../components/editor'), { const DynamicEditor = dynamic(() => import('../components/editor'), {

74
packages/app/src/pages/temporary.css
View File

@ -1,44 +1,44 @@
debug-menu { debug-menu {
display: none !important; display: none !important;
} }
.affine-editor-container { /*.affine-editor-container {*/
height: 100%; /* height: 100%;*/
padding: 0 !important; /* padding: 0 !important;*/
} /*}*/
.affine-default-page-block-container { /*.affine-default-page-block-container {*/
width: 720px; /* width: 720px;*/
height: 100%; /* height: 100%;*/
margin: 0 auto; /* margin: 0 auto;*/
} /*}*/
u { /*u {*/
text-decoration: none; /* text-decoration: none;*/
border-bottom: 1px solid #4c6275 !important; /* border-bottom: 1px solid #4c6275 !important;*/
} /*}*/
u::after { /*u::after {*/
display: none; /* display: none;*/
} /*}*/
.affine-paragraph-block-container.text { /*.affine-paragraph-block-container.text {*/
margin-top: 18px !important; /* margin-top: 18px !important;*/
} /*}*/
.affine-default-page-block-title { /*.affine-default-page-block-title {*/
width: 100%; /* width: 100%;*/
} /*}*/
s { /*s {*/
text-decoration: line-through !important; /* text-decoration: line-through !important;*/
} /*}*/
.affine-edgeless-page-block-container { /*.affine-edgeless-page-block-container {*/
height: 100% !important; /* height: 100% !important;*/
} /*}*/
.affine-block-children-container.edgeless { /*.affine-block-children-container.edgeless {*/
height: 100% !important; /* height: 100% !important;*/
} /*}*/
.affine-list-rich-text-wrapper > div { /*.affine-list-rich-text-wrapper > div {*/
box-sizing: content-box; /* box-sizing: content-box;*/
color: var(--affine-highlight-color); /* color: var(--affine-highlight-color);*/
min-width: unset !important; /* min-width: unset !important;*/
max-width: 26px; /* max-width: 26px;*/
} /*}*/

97
packages/app/src/styles/theme.ts
View File

@ -1,49 +1,98 @@
import '@emotion/react'; import '@emotion/react';
import { AffineTheme, ThemeMode } from './types'; import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
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 lightTheme: AffineTheme = { export const lightTheme: AffineTheme = {
colors: { colors: {
primary: '#3A4C5C', primaryColor: '#6880FF',
highlight: '#7389FD',
disabled: '#9096A5', pageBackground: '#fff',
background: '#fff',
hoverBackground: '#F1F3FF', hoverBackground: '#F1F3FF',
popoverBackground: '#fff',
codeBackground: '#f2f5f9',
textColor: '#3A4C5C',
iconColor: '#9096A5',
linkColor: '#6880FF',
linkColor2: '#6880FF',
linkVisitedColor: '#ABB8FE',
popoverColor: '#4C6275',
codeColor: '#517ea6',
quoteColor: '#4C6275',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(104, 128, 255, 0.1)',
boxShadow:
' 0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04);',
}, },
font: { font: {
xs: '12px', xs: '12px',
sm: '16px', sm: '16px',
base: '18px', base: '18px',
family: `Avenir Next, ${basicFontFamily}`,
family2: `Roboto Mono, ${basicFontFamily}`,
}, },
}; };
export const darkTheme: AffineTheme = { export const darkTheme: AffineTheme = {
...lightTheme, ...lightTheme,
colors: { colors: {
primary: '#fff', primaryColor: '#6880FF',
highlight: '#7389FD',
disabled: '#9096A5', pageBackground: '#2c2c2c',
background: '#3d3c3f', hoverBackground: '#3C3C42',
hoverBackground: '#F1F3FF', popoverBackground: '#1F2021',
codeBackground: '#505662',
textColor: '#fff',
iconColor: '#9096A5',
linkColor: '#6880FF',
linkColor2: '#7D91FF',
linkVisitedColor: '#505FAB',
popoverColor: '#A9B1C6',
codeColor: '#BDDBFD',
quoteColor: '#A9B1C6',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(240, 242, 255, 0.8)',
boxShadow:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
}, },
}; };
export const globalThemeConstant = (mode: ThemeMode, theme: AffineTheme) => { export const globalThemeVariables: (
const isDark = mode === 'dark'; mode: ThemeMode,
theme: AffineTheme
) => AffineThemeCSSVariables = (mode, theme) => {
return { return {
'--page-background-color': theme.colors.background, '--affine-primary-color': theme.colors.primaryColor,
'--page-text-color': theme.colors.primary,
// editor style variables '--affine-page-background': theme.colors.pageBackground,
'--affine-primary-color': theme.colors.primary, '--affine-popover-background': theme.colors.popoverBackground,
'--affine-muted-color': '#a6abb7', '--affine-hover-background': theme.colors.hoverBackground,
'--affine-highlight-color': '#6880ff', '--affine-code-background': theme.colors.codeBackground,
'--affine-placeholder-color': '#c7c7c7',
'--affine-selected-color': 'rgba(104, 128, 255, 0.1)',
'--affine-font-family': '--affine-text-color': theme.colors.textColor,
'Avenir Next, 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', '--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-popover-color': theme.colors.popoverColor,
'--affine-code-color': theme.colors.codeColor,
'--affine-quote-color': theme.colors.quoteColor,
'--affine-selected-color': theme.colors.selectedColor,
'--affine-placeholder-color': theme.colors.placeHolderColor,
'--affine-font-family2': '--affine-box-shadow': theme.colors.boxShadow,
'Roboto Mono, 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',
'--affine-font-xs': theme.font.xs, // tiny
'--affine-font-sm': theme.font.sm, // small
'--affine-font-base': theme.font.base,
'--affine-font-family': theme.font.family,
'--affine-font-family2': theme.font.family2,
}; };
}; };

4
packages/app/src/styles/themeProvider.tsx
View File

@ -11,7 +11,7 @@ import {
ThemeProviderProps, ThemeProviderProps,
ThemeProviderValue, ThemeProviderValue,
} from './types'; } from './types';
import { lightTheme, darkTheme, globalThemeConstant } from './theme'; import { lightTheme, darkTheme, globalThemeVariables } from './theme';
import { SystemThemeHelper, localStorageThemeHelper } from './utils'; import { SystemThemeHelper, localStorageThemeHelper } from './utils';
export const ThemeContext = createContext<ThemeProviderValue>({ export const ThemeContext = createContext<ThemeProviderValue>({
@ -67,7 +67,7 @@ export const ThemeProvider = ({
<Global <Global
styles={css` styles={css`
:root { :root {
${globalThemeConstant(mode, themeStyle)} ${globalThemeVariables(mode, themeStyle) as {}}
} }
`} `}
/> />

55
packages/app/src/styles/types.ts
View File

@ -13,19 +13,66 @@ export type ThemeProviderValue = {
export interface AffineTheme { export interface AffineTheme {
colors: { colors: {
primary: string; primaryColor: string;
highlight: string;
disabled: string; pageBackground: string;
background: string; popoverBackground: string;
hoverBackground: string; hoverBackground: string;
codeBackground: string;
textColor: string;
linkColor: string;
// In dark mode, normal text`s (not bold) color
linkColor2: string;
linkVisitedColor: string;
iconColor: string;
popoverColor: string;
codeColor: string;
quoteColor: string;
placeHolderColor: string;
selectedColor: string;
boxShadow: string;
}; };
font: { font: {
xs: string; // tiny xs: string; // tiny
sm: string; // small sm: string; // small
base: string; base: string;
family: string;
family2: string;
}; };
} }
export interface AffineThemeCSSVariables {
'--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-text-color': AffineTheme['colors']['textColor'];
'--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-popover-color': AffineTheme['colors']['popoverColor'];
'--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-box-shadow': AffineTheme['colors']['boxShadow'];
'--affine-font-xs': AffineTheme['font']['xs']; // tiny
'--affine-font-sm': AffineTheme['font']['sm']; // small
'--affine-font-base': AffineTheme['font']['base'];
'--affine-font-family': AffineTheme['font']['family'];
'--affine-font-family2': AffineTheme['font']['family2'];
}
declare module '@emotion/react' { declare module '@emotion/react' {
export interface Theme extends AffineTheme {} export interface Theme extends AffineTheme {}
} }