[vitalNohj]

Closes #114.

Phone, before	Pocket's fonts	Fonts for a theme of your own	Phone, after

Desktop, before	Desktop, after: Inter, Iosevka with ligatures, 16.5 px

Fonts for a theme	Text size

What changes

Fonts for a theme, in Appearance (web/sheets/appearance.js, src/server/themes.ts, src/server/http/api.ts)

• The section is under the theme tools and always named after the theme in use: "Fonts for Reading".
• Text font: Geist, Inter, System Sans, JetBrains Mono, Fira Code, IBM Plex Mono, Iosevka, System Mono.
• Code font: JetBrains Mono, Fira Code, IBM Plex Mono, Iosevka, System Mono.
• Ligatures: on or off.
• A preview shows text, italics, and code with =>, !== and a comment.
• On the owner's themes, each choice is saved to the theme's fonts.css, which theme.css imports first. Its values win over the theme's own, so the menus always show what is in use.
  • It goes through a new owner-only PUT /api/themes/:id/fonts, which accepts only the fonts in the menus.
  • The existing theme live-update shows each change in every tab that uses the theme, with no reload.
  • A theme with only colors also gets the theme.json that a stylesheet needs.
• Pocket and Lantern show their fonts read-only, with Duplicate to change. This uses the existing Duplicate flow.
• Guests and viewers see no menus. They get the fonts by picking the theme.
• A theme's own CSS can still set --sans, --mono and --ligatures, as before.

The app's fonts (web/fonts/, web/style.css)

• @font-face rules for:
  • "Pocket Inter"
  • "Pocket Fira Code"
  • "Pocket IBM Plex Mono"
  • "Pocket Iosevka"
  • "Pocket Nerd Symbols"
  • JetBrains Mono's italic for "Pocket Mono"
• Each file comes from the project's own GitHub release and was checked against GitHub's SHA-256 digest. Licenses are included, and web/fonts/SOURCES.md lists where each file came from.
  • Fira Code 6.2
  • IBM Plex Mono variable 1.0.0
  • Inter 4.1
  • Iosevka 34.9.0 (unhinted, Regular/SemiBold/Bold and their italics)
  • Nerd Fonts 3.5.1 "Symbols Only" Mono, cut down to its icon ranges
• The Nerd Fonts icons are in the default --mono, after JetBrains Mono.
  • The icon file has a unicode-range, so a browser downloads it only when an icon shows.
  • Each icon is one character wide, so columns still line up.

Preload and re-fit (web/index.html, src/server/themes.ts, web/composer.js)

• The theme list now names the app's font files a theme uses. Before, it named only the theme's own files. index.html preloads them before the first paint, so a reload doesn't flash Geist or JetBrains Mono first.
• The message box and the status line now re-fit after the theme changes or a font finishes loading. Before, a wider font left the box too short until you typed again.

Text size (web/theme.js, web/sheets/appearance.js)

• Buttons for 13, 15, 17 and 20, plus a field for any size from 10 to 32 px, in half-pixel steps.
• A value outside the range is kept to it. Saved sizes from before still work.

Docs: docs/extensions/themes.md (the app's fonts and Fonts for), docs/extensions/reference/theme-surface.md, docs/features.md, and font credits in README.md.

Size: about 1,100 lines without the font files: roughly 500 of tests, about 220 of CSS, and the rest code and docs. A browser downloads only the fonts its theme uses. Iosevka is the largest, at about 3.4 MB for all six files.

Tests

• test/font-ui.test.ts (Chromium), 6 tests:
  • The default look keeps Geist and JetBrains Mono, with JetBrains Mono's real italic for comments.
  • A guest who picks the owner's theme gets its fonts and ligatures, preloaded on reload.
  • The message box re-fits when a theme's wider font loads. This fails without the composer.js change.
  • The Nerd Fonts icon file loads only for icons, and each icon is one character wide.
  • The owner's flow:
    • Pocket shows its fonts and Duplicate to change.
    • On a theme of the owner's, a pick shows at once and is still there after a reload.
  • A typed text size of 27.5 px is used and stays; 99 is kept to 32.
• test/themes.test.ts, 2 tests:
  • The app's fonts a theme uses are preloaded, and a font named only in a CSS comment is ignored. This fails without the themes.ts and index.html changes.
  • Saving fonts:
    • writes fonts.css, keeps the theme's own CSS, and imports fonts.css only once;
    • handles System Sans and System Mono;
    • refuses fonts not in the menus, and Pocket and Lantern;
    • leaves a colors-only theme usable.
• On main (0.19.0): all 392 tests pass. npm run check, ESLint and Prettier pass.
• Tried by hand on a live Pocket, phone and desktop sizes: duplicate Pocket, pick fonts on the copy, type a text size.