+
@@ -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/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-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/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: {