+
@@ -76,7 +78,6 @@ const InnerContainer = styled('div')({
boxShadow: '$panel',
maxWidth: 320,
color: '$text',
- fontFamily: '$ui',
fontSize: '$2',
textAlign: 'center',
display: 'flex',
@@ -90,11 +91,9 @@ const InnerContainer = styled('div')({
backgroundColor: '$hover',
padding: '$4',
borderRadius: '$2',
- fontFamily: '"Menlo", "Monaco", monospace',
fontWeight: 500,
},
'& p': {
- fontFamily: '$body',
lineHeight: 1.7,
padding: '$5',
margin: 0,
diff --git a/libs/components/board-draw/src/components/loading/loading.tsx b/libs/components/board-draw/src/components/loading/loading.tsx
index a0bf11dab1..1245cc0bb4 100644
--- a/libs/components/board-draw/src/components/loading/loading.tsx
+++ b/libs/components/board-draw/src/components/loading/loading.tsx
@@ -23,7 +23,6 @@ const StyledLoadingPanelContainer = styled('div')({
borderBottomLeftRadius: '12px',
borderBottomRightRadius: '12px',
padding: '8px 16px',
- fontFamily: 'var(--fonts-ui)',
fontSize: 'var(--fontSizes-1)',
boxShadow: 'var(--shadows-panel)',
backgroundColor: 'white',
diff --git a/libs/components/board-shapes/src/image-util/image-util.tsx b/libs/components/board-shapes/src/image-util/image-util.tsx
index 2becfdcc84..a19667d549 100644
--- a/libs/components/board-shapes/src/image-util/image-util.tsx
+++ b/libs/components/board-shapes/src/image-util/image-util.tsx
@@ -165,7 +165,6 @@ const Wrapper = styled('div')<{
}>({
pointerEvents: 'all',
position: 'relative',
- fontFamily: 'sans-serif',
fontSize: '2em',
height: '100%',
width: '100%',
diff --git a/libs/components/board-shapes/src/video-util/video-util.tsx b/libs/components/board-shapes/src/video-util/video-util.tsx
index 22b51284d4..37ad390c26 100644
--- a/libs/components/board-shapes/src/video-util/video-util.tsx
+++ b/libs/components/board-shapes/src/video-util/video-util.tsx
@@ -210,7 +210,6 @@ const Wrapper = styled('div')<{
}>({
pointerEvents: 'all',
position: 'relative',
- fontFamily: 'sans-serif',
fontSize: '2em',
height: '100%',
width: '100%',
diff --git a/libs/components/common/src/lib/text/plugins/link.tsx b/libs/components/common/src/lib/text/plugins/link.tsx
index 971d8dc62b..18e937566a 100644
--- a/libs/components/common/src/lib/text/plugins/link.tsx
+++ b/libs/components/common/src/lib/text/plugins/link.tsx
@@ -519,7 +519,6 @@ const styles = style9.create({
outline: 'none',
border: 'none',
padding: '0',
- fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif',
'::-webkit-input-placeholder': {
color: '#98acbd',
},
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx
index b527711217..3267c7d6f5 100644
--- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx
@@ -52,8 +52,6 @@ const CardContainer = styled('div')({
backgroundColor: '#fff',
border: '1px solid #E2E7ED',
borderRadius: '5px',
- overflow: 'hidden',
-
[CardActions.toString()]: {
opacity: '0',
},
diff --git a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx
index df3ab85abb..2614207a66 100644
--- a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx
+++ b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx
@@ -39,7 +39,6 @@ export type ExtendedTextUtils = SlateUtils & {
};
const TextBlockContainer = styled(Text)(({ theme }) => ({
lineHeight: theme.affine.typography.body1.lineHeight,
- fontFamily: theme.affine.typography.body1.fontFamily,
color: theme.affine.typography.body1.color,
letterSpacing: '0.1px',
a: {
diff --git a/libs/components/editor-blocks/src/components/upload/upload.tsx b/libs/components/editor-blocks/src/components/upload/upload.tsx
index d9a4ed6f0b..1fa2f20092 100644
--- a/libs/components/editor-blocks/src/components/upload/upload.tsx
+++ b/libs/components/editor-blocks/src/components/upload/upload.tsx
@@ -1,21 +1,23 @@
-import {
- useRef,
- ChangeEvent,
- ReactElement,
- useState,
- SyntheticEvent,
-} from 'react';
import DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined';
import {
- styled,
- SxProps,
- MuiTextField as TextField,
+ MuiBox as Box,
MuiButton as Button,
MuiClickAwayListener as ClickAwayListener,
- MuiTabs as Tabs,
+ MuiPopper,
MuiTab as Tab,
- MuiBox as Box,
+ MuiTabs as Tabs,
+ MuiTextField as TextField,
+ styled,
+ SxProps,
} from '@toeverything/components/ui';
+import {
+ ChangeEvent,
+ ReactElement,
+ SyntheticEvent,
+ useRef,
+ useState,
+ type MouseEvent,
+} from 'react';
const MESSAGES = {
ADD_AN_FILE: 'Add an file',
@@ -37,9 +39,10 @@ interface Props {
const styles: SxProps = {
position: 'absolute',
width: '600px',
- zIndex: 99,
- marginLeft: '50px',
- p: 1,
+ // maxWidth:'100%',
+ // The z-index of refPage is 200,
+ // so the z-index of upload need to be greater than it
+ zIndex: 201,
bgcolor: 'background.paper',
borderRadius: '4px',
textAlign: 'center',
@@ -84,21 +87,22 @@ export const Upload = (props: Props) => {
} = props;
const input_ref = useRef
(null);
const [upload_link, set_upload_link] = useState('');
-
- const [open, setOpen] = useState(firstCreate);
const type = ['file', 'image'].includes(uploadType) ? 'file' : 'link';
const [value, setValue] = useState(type);
+ const [anchorEl, setAnchorEl] = useState(null);
+ const open = Boolean(anchorEl);
+
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue);
};
- const handleClick = () => {
- setOpen(prev => !prev);
+ const handleClick = (event: MouseEvent) => {
+ setAnchorEl(anchorEl ? null : event.currentTarget);
};
const handleClickAway = () => {
- setOpen(false);
+ setAnchorEl(null);
};
const choose_file = () => {
if (input_ref.current) {
@@ -126,128 +130,126 @@ export const Upload = (props: Props) => {
savaLink(upload_link);
};
return (
-
-
-
- {defaultAddBtnText
- ? defaultAddBtnText
- : MESSAGES.ADD_AN_FILE}
-
+
+ {defaultAddBtnText ? defaultAddBtnText : MESSAGES.ADD_AN_FILE}
+ {
+ e.stopPropagation();
+ deleteFile();
+ }}
+ >
+
+
+
+ {open && (
+
+ {
e.stopPropagation();
- deleteFile();
}}
+ sx={styles}
>
-
-
-
- {open && (
-
- {
- e.stopPropagation();
- }}
- sx={styles}
+ value={value}
+ onChange={handleChange}
>
-
- {['file', 'image'].includes(uploadType) ? (
-
- ) : (
- ''
- )}
- {!['file', 'image'].includes(uploadType) ? (
-
- ) : (
- ''
- )}
-
-
- {value === 'file' ? (
-
-
-
-
+ {['file', 'image'].includes(uploadType) ? (
+
) : (
-
-
-
-
-
-
+ ''
)}
-
-
- )}
-
-
+ {!['file', 'image'].includes(uploadType) ? (
+
+ ) : (
+ ''
+ )}
+
+
+ {value === 'file' ? (
+
+
+
+
+ ) : (
+
+
+
+
+
+
+ )}
+
+
+ )}
+
);
};
diff --git a/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx b/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx
index b24d9825ef..5db1811a12 100644
--- a/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx
+++ b/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx
@@ -81,7 +81,6 @@ const styles = style9.create({
color: '#98ACBD',
fontSize: '12px',
lineHeight: '14px',
- fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif',
textAlign: 'justify',
letterSpacing: '1.5px',
},
diff --git a/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx
index 85ea1bcbda..cdca77484c 100644
--- a/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx
+++ b/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx
@@ -61,7 +61,6 @@ export const Menu = ({
};
const MenuUl = styled('ul')(({ theme }) => ({
- fontFamily: 'PingFang SC',
background: '#FFF',
color: '#4C6275',
fontWeight: '400',
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
index c7a34fb6fb..c462b40ed5 100644
--- a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
+++ b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
@@ -177,6 +177,5 @@ const styles = style9.create({
},
dropdownItemItext: {
color: '#4C6275',
- fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif',
},
});
diff --git a/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx b/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx
index 81856eba4f..d9aee2070c 100644
--- a/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx
+++ b/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx
@@ -251,7 +251,6 @@ const LinkModalContainerInput = styled('input')(({ theme }) => ({
outline: 'none',
border: 'none',
padding: '8px',
- fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif',
'::-webkit-input-placeholder': {
color: '#98acbd',
},
diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx
index e6ab719a5a..4c313afec2 100644
--- a/libs/components/layout/src/header/LayoutHeader.tsx
+++ b/libs/components/layout/src/header/LayoutHeader.tsx
@@ -4,7 +4,7 @@ import {
SideBarViewCloseIcon,
SideBarViewIcon,
} from '@toeverything/components/icons';
-import { IconButton, styled } from '@toeverything/components/ui';
+import { IconButton, styled, Tooltip } from '@toeverything/components/ui';
import { useTranslation } from '@toeverything/datasource/i18n';
import {
useCurrentEditors,
@@ -14,6 +14,7 @@ import {
import { useCallback, useMemo } from 'react';
import { EditorBoardSwitcher } from './EditorBoardSwitcher';
import { fsApiSupported } from './FileSystem';
+import { Logo } from './Logo';
import { CurrentPageTitle } from './Title';
export const LayoutHeader = () => {
@@ -44,23 +45,35 @@ export const LayoutHeader = () => {
-
+
- {t('Share')}
+
+
+ {t('Share')}
+
+
-
-
-
+
+
+
+
@@ -121,7 +134,7 @@ const StyledHeaderRoot = styled('div')(({ theme }) => {
};
});
-const FlexContainer = styled('div')({ display: 'flex' });
+const FlexContainer = styled('div')({ display: 'flex', alignItems: 'center' });
const TitleContainer = styled('div')(({ theme }) => {
return {
diff --git a/libs/components/layout/src/header/Logo/DiscordIcon.tsx b/libs/components/layout/src/header/Logo/DiscordIcon.tsx
new file mode 100644
index 0000000000..bae0c972a4
--- /dev/null
+++ b/libs/components/layout/src/header/Logo/DiscordIcon.tsx
@@ -0,0 +1,25 @@
+import { SvgIcon } from '@toeverything/components/ui';
+
+export const DiscordIcon = (props: any) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/libs/components/layout/src/header/Logo/InfoModal.tsx b/libs/components/layout/src/header/Logo/InfoModal.tsx
new file mode 100644
index 0000000000..590c40e1b7
--- /dev/null
+++ b/libs/components/layout/src/header/Logo/InfoModal.tsx
@@ -0,0 +1,94 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { MuiModal, styled } from '@toeverything/components/ui';
+import affineTextLogo from './affine-text-logo.png';
+import { ModalContent } from './ModalContent';
+
+interface ModalProps {
+ open: boolean;
+ onClose: () => void;
+}
+
+export const InfoModal = ({ open, onClose }: ModalProps) => {
+ return (
+
+
+
+
+
+ live demo
+
+ onClose?.()}>
+
+
+
+
+
+
+
+ );
+};
+
+const Container = styled('div')({
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: '60%',
+ maxWidth: '1000px',
+ minWidth: '840px',
+ borderRadius: '28px',
+ backgroundColor: '#fff',
+ padding: '48px 48px 40px 48px',
+
+ '&:focus-visible': {
+ outline: 0,
+ },
+});
+
+const Header = styled('div')({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+});
+
+const HeaderLeft = styled('div')({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+});
+
+const StyledImg = styled('img')({
+ height: '22px',
+});
+
+const LivedemoContainer = styled('span')(({ theme }) => ({
+ display: 'inline-block',
+ border: `1px solid ${theme.affine.palette.primary}`,
+ color: theme.affine.palette.primary,
+ fontSize: '16px',
+ lineHeight: '22px',
+ padding: '2px 10px',
+ borderRadius: '10px',
+ marginLeft: '18px',
+}));
+
+const CloseContainer = styled('div')(({ theme }) => ({
+ cursor: 'pointer',
+ width: '32px',
+ height: '32px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: '6px',
+
+ '&:hover': {
+ backgroundColor: '#EDF3FF',
+ },
+}));
+
+const Footer = styled('div')(({ theme }) => ({
+ textAlign: 'center',
+ fontSize: '14px',
+ lineHeight: '19px',
+ color: theme.affine.palette.primaryText,
+}));
diff --git a/libs/components/layout/src/header/Logo/Logo.tsx b/libs/components/layout/src/header/Logo/Logo.tsx
new file mode 100644
index 0000000000..9b1a8d139a
--- /dev/null
+++ b/libs/components/layout/src/header/Logo/Logo.tsx
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+import { InfoModal } from './InfoModal';
+import { LogoIcon } from './LogoIcon';
+
+export const Logo = () => {
+ const [open, setOpen] = useState(false);
+ return (
+ <>
+ setOpen(true)} />
+ setOpen(false)} />
+
+ );
+};
diff --git a/libs/components/layout/src/header/Logo/LogoIcon.tsx b/libs/components/layout/src/header/Logo/LogoIcon.tsx
new file mode 100644
index 0000000000..4702d45222
--- /dev/null
+++ b/libs/components/layout/src/header/Logo/LogoIcon.tsx
@@ -0,0 +1,9 @@
+import { LogoIcon as _LogoIcon } from '@toeverything/components/icons';
+import { styled } from '@toeverything/components/ui';
+
+export const LogoIcon = styled(_LogoIcon)(({ theme }) => {
+ return {
+ color: theme.affine.palette.primary,
+ cursor: 'pointer',
+ };
+});
diff --git a/libs/components/layout/src/header/Logo/ModalContent.tsx b/libs/components/layout/src/header/Logo/ModalContent.tsx
new file mode 100644
index 0000000000..e914c0b920
--- /dev/null
+++ b/libs/components/layout/src/header/Logo/ModalContent.tsx
@@ -0,0 +1,189 @@
+import GitHubIcon from '@mui/icons-material/GitHub';
+import { LogoIcon } from '@toeverything/components/icons';
+
+import RedditIcon from '@mui/icons-material/Reddit';
+import TelegramIcon from '@mui/icons-material/Telegram';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import { DiscordIcon } from './DiscordIcon';
+
+import { styled } from '@toeverything/components/ui';
+
+export const ModalContent = () => {
+ return (
+
+
+
+
+ Official Website AFFiNE.pro
+
+
+
+ Check Our Docs Open Source
+
+
+
+
+ Get in touch!
+ Join our community.
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const Container = styled('div')({
+ margin: '80px 0 100px 0',
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+});
+
+const RightContainer = styled('div')({
+ paddingRight: '132px',
+});
+
+const LeftContainer = styled('div')`
+ padding-left: 120px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ left: 158px;
+ display: block;
+ width: 122px;
+ height: 122px;
+ background-color: #dda82a;
+ opacity: 0.45;
+ filter: blur(78px);
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 330px;
+ left: 280px;
+ display: block;
+ width: 122px;
+ height: 122px;
+ background-color: #4461f2;
+ filter: blur(78px);
+ }
+`;
+
+// const LeftContainer = styled('div')({
+// paddingLeft: '132px',
+
+// '&::before': {
+// content: '*',
+// display: 'block',
+// width: '122px',
+// height: '122px',
+// backgroundColor: '#dda82a',
+// opacity: 0.45,
+// filter: 'blur(78px)',
+// },
+// });
+
+const LeftButtonContainer = styled('a')(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ color: theme.affine.palette.primary,
+ height: '110px',
+ cursor: 'pointer',
+ padding: '6px 24px 6px 28px',
+ borderRadius: '10px',
+ textDecoration: 'none',
+
+ '&:hover': {
+ backgroundColor: 'rgba(68, 97, 242, 0.1)',
+ },
+
+ '& + &': {
+ marginTop: '50px',
+ },
+}));
+
+const LeftGithubIcon = styled(GitHubIcon)({
+ fontSize: '50px !important',
+ cursor: 'pointer',
+});
+
+const LeftLogoIcon = styled(LogoIcon)({
+ fontSize: '50px !important',
+ cursor: 'pointer',
+});
+
+const LeftButtonText = styled('span')({
+ color: '#000',
+ fontSize: '24px',
+ lineHeight: '36px',
+ width: '180px',
+ marginLeft: '40px',
+ cursor: 'pointer',
+});
+
+const RightTitle = styled('div')({
+ paddingLeft: '24px',
+ marginBottom: '24px',
+ fontSize: '18px',
+ lineHeight: '25px',
+ color: '#000',
+});
+
+const Button = styled('a')(({ theme }) => ({
+ cursor: 'pointer',
+ padding: '6px 24px',
+ fontSize: '18px',
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ borderRadius: '10px',
+ color: theme.affine.palette.primary,
+ textDecoration: 'none',
+
+ '&:hover': {
+ backgroundColor: '#EDF3FF',
+ },
+
+ '& + &': {
+ marginTop: '8px',
+ },
+}));
+
+const ButtonText = styled('span')(({ theme }) => ({
+ marginLeft: '30px',
+ color: '#000100',
+}));
diff --git a/libs/components/layout/src/header/Logo/affine-text-logo.png b/libs/components/layout/src/header/Logo/affine-text-logo.png
new file mode 100644
index 0000000000..a136ab17fa
Binary files /dev/null and b/libs/components/layout/src/header/Logo/affine-text-logo.png differ
diff --git a/libs/components/layout/src/header/Logo/index.ts b/libs/components/layout/src/header/Logo/index.ts
new file mode 100644
index 0000000000..33af505338
--- /dev/null
+++ b/libs/components/layout/src/header/Logo/index.ts
@@ -0,0 +1 @@
+export { Logo } from './Logo';
diff --git a/libs/components/layout/src/header/Title.tsx b/libs/components/layout/src/header/Title.tsx
index dcd0c9e356..a71f84f00d 100644
--- a/libs/components/layout/src/header/Title.tsx
+++ b/libs/components/layout/src/header/Title.tsx
@@ -72,7 +72,11 @@ export const CurrentPageTitle = () => {
}, [pageTitle]);
return pageTitle ? (
-
+ window.location.reload()}
+ title={pageTitle}
+ >
{pageTitle}
) : null;
@@ -85,5 +89,12 @@ const ContentText = styled(Typography)(({ theme }) => {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
+ padding: '6px 12px',
+ cursor: 'pointer',
+ borderRadius: '5px',
+
+ '&:hover': {
+ backgroundColor: '#F5F7F8',
+ },
};
});
diff --git a/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx b/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx
index e2aeb949eb..561a05c948 100644
--- a/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx
+++ b/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx
@@ -7,7 +7,20 @@ type CommentsProps = {
resolveComment: (blockId: string, commentId: string) => void;
};
-export const Comments = ({
+export const Comments = (props: CommentsProps) => {
+ return Comment function coming soon...;
+};
+
+const StyledText = styled('div')(({ theme }) => {
+ return {
+ display: 'flex',
+ justifyContent: 'center',
+ color: theme.affine.palette.menu,
+ marginTop: theme.affine.spacing.lgSpacing,
+ };
+});
+
+export const BakComments = ({
activeCommentId,
resolveComment,
}: CommentsProps) => {
diff --git a/libs/components/ui/src/button/base-button.ts b/libs/components/ui/src/button/base-button.ts
index 5d1df09e5f..b719f73e42 100644
--- a/libs/components/ui/src/button/base-button.ts
+++ b/libs/components/ui/src/button/base-button.ts
@@ -4,7 +4,6 @@ import ButtonUnstyled, {
import { styled } from '../styled';
export const BaseButton = styled(ButtonUnstyled)`
- fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif',
font-size: 0.875rem;
border-radius: 8px;
padding: 4px 8px;
diff --git a/libs/components/ui/src/cascader/Cascader.tsx b/libs/components/ui/src/cascader/Cascader.tsx
index 7bf43413f2..ad96feff17 100644
--- a/libs/components/ui/src/cascader/Cascader.tsx
+++ b/libs/components/ui/src/cascader/Cascader.tsx
@@ -131,7 +131,6 @@ export function Cascader(props: CascaderProps) {
}
const MenuPaper = styled('div')(({ theme }) => ({
- fontFamily: 'PingFang SC',
background: '#FFF',
boxShadow: theme.affine.shadows.shadow1,
borderRadius: '10px 0px 10px 10px',
diff --git a/libs/components/ui/src/theme/theme.ts b/libs/components/ui/src/theme/theme.ts
index ad3576dba6..5e9a93e944 100644
--- a/libs/components/ui/src/theme/theme.ts
+++ b/libs/components/ui/src/theme/theme.ts
@@ -1,111 +1,3 @@
-// import { ThemeOptions } from '@mui/material/styles';
-/**
- * @deprecated Please use the new {@link ThemeOptions} type.
- */
-interface ThemeOptionsLegacy {
- palette: Palette;
- typography: Typography;
- shadows?: Shadows;
- border?: StringWithNone;
- spacing?: Spacing;
- shape?: Shape;
-}
-
-interface Shape {
- xsBorderRadius?: string;
- borderRadius?: string;
- smBorderRadius?: string;
- lgBorderRadius?: string;
-}
-interface Spacing {
- xsSpacing: string;
- smSpacing?: string;
- main?: string;
- lgSpacing?: string;
-}
-interface Palette {
- primary?: Action;
- success?: Action;
- info?: Action;
- error?: Action;
- warning?: Action;
- text?: Action;
-}
-interface Action {
- main: string;
- active?: string;
- hover?: string;
- hoverOpacity?: number;
- selected?: string;
- selectedOpacity?: number;
- disabled?: string;
- disabledOpacity?: number;
- disabledBackground?: string;
- focus?: string;
- focusOpacity?: number;
- activatedOpacity?: number;
-}
-interface Typography {
- fontSize?: string;
- fontFamily?: string;
- xsFontSize?: string;
- lgFontSize?: string;
- fontWeight?: number;
- xsFontWeight?: number;
- lineHeight?: string;
- lgFontWeight?: number;
- button?: Font;
- body1?: Font;
- body2?: Font;
- h1?: Font;
- h2?: Font;
- h3?: Font;
- h4?: Font;
- h5?: Font;
- page?: Font;
- quote?: Font;
- callout?: Font;
-}
-
-interface Shadows {
- none: 'none';
- shadow1: string;
-}
-
-type StringWithNone = [
- 'none',
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?,
- string?
-];
-interface Font {
- fontSize?: string;
- lineHeight?: string;
- fontFamily?: string;
- fontWeight?: number;
-}
-
export const Theme = {
palette: {
/**
@@ -166,6 +58,24 @@ export const Theme = {
textHover: '#ECF1FB',
},
typography: {
+ fontFamily: (
+ [
+ '-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',
+ ] as const
+ ).join(', '),
+
button: {
fontSize: '16px',
},
@@ -173,7 +83,6 @@ export const Theme = {
fontSize: '16px',
lineHeight: '22px',
fontWeight: 400,
- fontFamily: 'PingFang SC',
color: '#3A4C5C',
},
h1: {