Merge pull request #462 from toeverything/fix/font

Fix/windows font

libs/components/account/src/error.tsx

@@ -1,7 +1,6 @@
 import style9 from 'style9';
 
-import { keyframes } from '@emotion/react';
-import { MuiBox as Box } from '@toeverything/components/ui';
+import { keyframes, MuiBox as Box } from '@toeverything/components/ui';
 
 const styles = style9.create({
     container: {

libs/components/board-draw/src/components/error-fallback/error-fallback.tsx

@@ -35,7 +35,9 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
                 <pre>
                     <code>{error.message}</code>
                 </pre>
-                <div>
+                <div
+                    style={{ display: 'flex', justifyContent: 'space-evenly' }}
+                >
                     <button onClick={copyError}>Copy Error</button>
                     <button onClick={refreshPage}>Refresh Page</button>
                 </div>
@@ -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,

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',

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%',

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%',

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',
         },

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: {

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',
     },

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',

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',
     },
 });

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',
     },

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;

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',

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: {