feat: use system-ui as macOS default font family

foray1010 · Apr 8, 2023 · e72305c · e72305c
1 parent 4e0d683
commit e72305c
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 7 deletions.
diff --git a/.size-limit.json b/.size-limit.json
@@ -13,10 +13,10 @@
   },
   {
     "path": "build/production/js/options.js",
-    "limit": "5.37 kB"
+    "limit": "5.42 kB"
   },
   {
     "path": "build/production/js/popup.js",
-    "limit": "13.82 kB"
+    "limit": "13.85 kB"
   }
 ]
diff --git a/src/core/styles/globals.module.css b/src/core/styles/globals.module.css
@@ -28,7 +28,7 @@
 
   background-color: rgb(var(--bg-color-rgb));
   color: var(--main-font-color);
-  font-family: sans-serif;
+  font-family: system-ui, sans-serif;
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/src/core/utils/getOptionsConfig.ts b/src/core/utils/getOptionsConfig.ts
@@ -2,6 +2,7 @@ import webExtension from 'webextension-polyfill'
 
 import { OPTIONS, ROOT_ID } from '../constants/index.js'
 import type { OptionsConfig } from '../types/options.js'
+import isMac from './isMac.js'
 
 const getMessages = (messageKeys: readonly string[]) => {
   return messageKeys.map((k) => webExtension.i18n.getMessage(k))
@@ -54,11 +55,14 @@ export default async function getOptionsConfig(): Promise<OptionsConfig> {
     },
     [OPTIONS.FONT_FAMILY]: {
       type: 'string',
-      default: 'sans-serif',
+      // `system-ui` may not work well on some OS/language combinations, but macOS is fine
+      // see https://github.com/w3c/csswg-drafts/issues/3658
+      default: isMac() ? 'system-ui' : 'sans-serif',
       choices: [
-        'monospace',
+        'system-ui',
         'sans-serif',
         'serif',
+        'monospace',
         'Archivo Narrow',
         'Arial',
         'Comic Sans MS',

diff --git a/src/popup/utils/isMac.ts → src/core/utils/isMac.ts b/src/popup/utils/isMac.ts → src/core/utils/isMac.ts
diff --git a/src/popup/components/App/index.tsx b/src/popup/components/App/index.tsx
@@ -46,6 +46,7 @@ const AppWithOptions = withOptions(function InnerApp() {
           ?.split(',')
           .map((x) => x.trim())
           .filter(Boolean) ?? []),
+        'system-ui',
         'sans-serif',
       ]),
     ).join(','),

diff --git a/src/popup/components/BookmarkTrees/withKeyboardNav.tsx b/src/popup/components/BookmarkTrees/withKeyboardNav.tsx
@@ -1,5 +1,6 @@
 import type * as React from 'react'
 
+import isMac from '../../../core/utils/isMac.js'
 import withProviders from '../../../core/utils/withProviders.js'
 import { BOOKMARK_TYPES } from '../../constants/index.js'
 import { BASE_WINDOW } from '../../constants/windows.js'
@@ -11,7 +12,6 @@ import {
 } from '../../modules/bookmarks/utils/clickBookmark.js'
 import { useOptions } from '../../modules/options.js'
 import getLastMapKey from '../../utils/getLastMapKey.js'
-import isMac from '../../utils/isMac.js'
 import { useKeyBindingsEvent } from '../keyBindings/index.js'
 import {
   ListNavigationProvider,

diff --git a/src/popup/components/menu/MenuContainer.tsx b/src/popup/components/menu/MenuContainer.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import webExtension from 'webextension-polyfill'
 
+import isMac from '../../../core/utils/isMac.js'
 import withProviders from '../../../core/utils/withProviders.js'
 import { BOOKMARK_TYPES, OPEN_IN_TYPES } from '../../constants/index.js'
 import { MENU_WINDOW } from '../../constants/windows.js'
@@ -16,7 +17,6 @@ import {
   openFolderInBrowser,
 } from '../../modules/bookmarks/methods/openBookmark.js'
 import sortBookmarksByName from '../../modules/bookmarks/methods/sortBookmarksByName.js'
-import isMac from '../../utils/isMac.js'
 import { ClipboardAction, useClipboard } from '../clipboard/index.js'
 import { useEditorContext } from '../editor/index.js'
 import { FloatingWindow } from '../floatingWindow/index.js'