From 53ca0926771ca2a59e022ea590fe533b4cbf555a Mon Sep 17 00:00:00 2001 From: parsakhaz Date: Mon, 17 Aug 2026 23:27:46 -0700 Subject: [PATCH] Add Folio, Newsprint and Walnut editorial themes Three print-and-paper themes: Folio (cream paper & ink, light), Newsprint (cool grey stock, graphite, ink-blue accent, light) and Walnut (warm brown-black, parchment, brass accent, dark). Full token coverage incl. high-contrast blocks, terminal palettes and Monaco vars. - Export THEME_CLASSES and derive isLightTheme from it; DiffViewer, FileEditor and usePaneLogo no longer hardcode the two light ids - LogsView reads the theme's terminal palette instead of a fixed one - ThemeProvider stamps classes in a layout effect so descendants' effects read fresh tokens - SelectItem gains an optional description line; pickers describe the three new themes - Add vitest contrast gate (themeContrast.test.ts), index.html sync test and a Playwright screenshot spec; commit screenshots/themes/*.png --- frontend/index.html | 10 +- frontend/src/components/HomePage.tsx | 5 +- .../src/components/panels/diff/DiffViewer.tsx | 4 +- .../components/panels/editor/FileEditor.tsx | 4 +- .../components/panels/logPanel/LogsView.tsx | 41 +- .../categories/AppearanceSettings.tsx | 11 +- frontend/src/components/ui/Select.tsx | 20 +- frontend/src/contexts/ThemeContext.ts | 1 + frontend/src/contexts/ThemeProvider.tsx | 32 +- frontend/src/contexts/themeClasses.test.ts | 50 ++ frontend/src/contexts/themeContextValue.ts | 28 +- frontend/src/hooks/usePaneLogo.ts | 4 +- frontend/src/index.css | 34 +- frontend/src/styles/monaco-overrides.css | 24 + frontend/src/styles/themeContrast.test.ts | 260 ++++++++ frontend/src/styles/tokens/colors.css | 571 ++++++++++++++++++ frontend/src/styles/tokens/effects.css | 40 ++ frontend/src/types/config.ts | 2 +- main/src/types/config.ts | 4 +- screenshots/themes/appearance-picker.png | Bin 0 -> 117133 bytes screenshots/themes/folio.png | Bin 0 -> 137040 bytes screenshots/themes/newsprint.png | Bin 0 -> 136747 bytes screenshots/themes/walnut.png | Bin 0 -> 138755 bytes tests/theme-screenshots.spec.ts | 248 ++++++++ 24 files changed, 1329 insertions(+), 64 deletions(-) create mode 100644 frontend/src/contexts/themeClasses.test.ts create mode 100644 frontend/src/styles/themeContrast.test.ts create mode 100644 screenshots/themes/appearance-picker.png create mode 100644 screenshots/themes/folio.png create mode 100644 screenshots/themes/newsprint.png create mode 100644 screenshots/themes/walnut.png create mode 100644 tests/theme-screenshots.spec.ts diff --git a/frontend/index.html b/frontend/index.html index a8a8d31e..eab62959 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -11,7 +11,7 @@