feat: add font style setting (#3092)

apps/web/src/atoms/settings.ts

@@ -15,6 +15,7 @@ export type AppSetting = {
   clientBorder: boolean;
   fullWidthLayout: boolean;
   windowFrameStyle: 'frameless' | 'NativeTitleBar';
+  fontStyle: 'Sans' | 'Serif' | 'Mono';
   dateFormat: DateFormats;
   startWeekOnMonday: boolean;
   enableBlurBackground: boolean;
@@ -37,10 +38,20 @@ export const dateFormatOptions: DateFormats[] = [
   'dd MMMM YYYY',
 ];
 
+export const fontStyleOptions: {
+  key: AppSetting['fontStyle'];
+  value: string;
+}[] = [
+  { key: 'Sans', value: 'var(--affine-font-sans-family)' },
+  { key: 'Serif', value: 'var(--affine-font-serif-family)' },
+  { key: 'Mono', value: 'var(--affine-font-mono-family)' },
+];
+
 export const AppSettingAtom = atomWithStorage<AppSetting>('AFFiNE settings', {
   clientBorder: false,
   fullWidthLayout: false,
   windowFrameStyle: 'frameless',
+  fontStyle: 'Sans',
   dateFormat: dateFormatOptions[0],
   startWeekOnMonday: false,
   enableBlurBackground: true,

apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -8,6 +8,7 @@ import { useCallback } from 'react';
 
 import {
   type AppSetting,
+  fontStyleOptions,
   useAppSetting,
   windowFrameStyleOptions,
 } from '../../../../../atoms/settings';
@@ -48,6 +49,46 @@ export const ThemeSettings = () => {
   );
 };
 
+const FontFamilySettings = () => {
+  const [appSettings, setAppSettings] = useAppSetting();
+  return (
+    <RadioButtonGroup
+      width={250}
+      className={settingWrapper}
+      defaultValue={appSettings.fontStyle}
+      onValueChange={useCallback(
+        (key: AppSetting['fontStyle']) => {
+          const value = fontStyleOptions.find(option => option.key === key)
+            ?.value;
+
+          setAppSettings({ fontStyle: key });
+
+          document
+            .querySelector('html')
+            ?.style.setProperty('--affine-font-family', value || null);
+        },
+        [setAppSettings]
+      )}
+    >
+      {fontStyleOptions.map(({ key, value }) => {
+        return (
+          <RadioButton
+            key={key}
+            bold={true}
+            value={key}
+            data-testid="system-font-style-trigger"
+            style={{
+              fontFamily: value,
+            }}
+          >
+            {key}
+          </RadioButton>
+        );
+      })}
+    </RadioButtonGroup>
+  );
+};
+
 export const AppearanceSettings = () => {
   const t = useAFFiNEI18N();
 
@@ -72,6 +113,12 @@ export const AppearanceSettings = () => {
         >
           <ThemeSettings />
         </SettingRow>
+        <SettingRow
+          name={t['Font Style']()}
+          desc={t['Choose your font style']()}
+        >
+          <FontFamilySettings />
+        </SettingRow>
         <SettingRow
           name={t['Display Language']()}
           desc={t['Select the language for the interface.']()}

packages/component/package.json

@@ -36,7 +36,7 @@
     "@radix-ui/react-toast": "^1.1.4",
     "@toeverything/hooks": "workspace:*",
     "@toeverything/plugin-infra": "workspace:*",
-    "@toeverything/theme": "^0.7.2",
+    "@toeverything/theme": "^0.7.4",
     "@vanilla-extract/dynamic": "^2.0.3",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.9",

packages/i18n/src/resources/en.json

@@ -403,5 +403,7 @@
   "Unpublished hint": "Once published to the web, visitors can view the contents through the provided link.",
   "Members hint": "Manage members here, invite new member by email.",
   "Workspace Settings with name": "{{name}}'s Settings",
-  "You can customize your workspace here.": "You can customise your workspace here."
+  "You can customize your workspace here.": "You can customise your workspace here.",
+  "Font Style": "Font Style",
+  "Choose your font style": "Choose your font style"
 }

yarn.lock

@@ -115,7 +115,7 @@ __metadata:
     "@radix-ui/react-toast": ^1.1.4
     "@toeverything/hooks": "workspace:*"
     "@toeverything/plugin-infra": "workspace:*"
-    "@toeverything/theme": ^0.7.2
+    "@toeverything/theme": ^0.7.4
     "@types/react": ^18.2.14
     "@types/react-datepicker": ^4.11.2
     "@types/react-dnd": ^3.0.2
@@ -11276,10 +11276,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/theme@npm:^0.7.2":
+"@toeverything/theme@npm:^0.7.4":
-  version: 0.7.2
+  version: 0.7.4
-  resolution: "@toeverything/theme@npm:0.7.2"
+  resolution: "@toeverything/theme@npm:0.7.4"
-  checksum: dbe67919686b345b9f5fc9eefb38439b559c998eeca598b996b0d95b8f5bedc2a998b7635b945ab8079eb5b65734d43ffd4f5d2ec3b983d86fc12aeb23c84bd9
+  checksum: e1f6f8c9648ee3c253cb9726d5b1b2c96870415b4959c82696804e2b3dbf3fdecc94fd07b6536311c92529d48e3c1dbc04209d197de087e41014a6ade0b788cf
   languageName: node
   linkType: hard