feat(app): add Pure black theme (#3012)

* feat(app): add AMOLED and all four Catppuccin themes Add an AMOLED theme (pure black background) and the four official Catppuccin flavors (Latte light, Frappé/Macchiato/Mocha dark) to the appearance picker. Generalize the dark-theme builder to support a light surface variant, register the new themes with Unistyles, and patch all registered theme keys when applying font/syntax appearance settings. * fix(app): localize Catppuccin + AMOLED theme labels across language packs The initial theme commit pasted the English brand/flavor labels into every locale. Localize them following each pack's convention: transliterate Catppuccin and the coffee-flavor names into Arabic/Russian scripts, use katakana/hanzi equivalents in ja/zh-CN, and standard loanwords in fr/es/pt-BR. AMOLED is a universal acronym and stays as-is except where the pack transliterates (Arabic). * fix(app): make Latte terminal ANSI colors readable * test(app): cover appearance theme picker options * refactor(app): scope theme PR to AMOLED * refactor(app): rename AMOLED theme to Pure Black * fix(app): refine Pure black appearance * test(app): wait for sidebar toggle icon * test(app): remove hover timing race --------- Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>
2026-08-09 01:12:53 +02:00
parent 8f38d04919
commit c28836b4e5
25 changed files with 228 additions and 51 deletions
@@ -0,0 +1,36 @@
+import { expect, test } from "../support/fixtures";
+import { openSettingsSection } from "../support/helpers/settings";
+
+test("shows Pure black in the appearance picker", async ({ page }, testInfo) => {
+  await page.goto("/settings");
+  await expect(page.getByTestId("settings-sidebar")).toBeVisible();
+  await openSettingsSection(page, "appearance");
+
+  const themeTrigger = page.getByLabel("Theme: System", { exact: true });
+  await themeTrigger.click();
+  await expect(page.getByText("Pure black", { exact: true })).toBeVisible();
+  await page.screenshot({
+    path: testInfo.outputPath("appearance-theme-picker.png"),
+    fullPage: true,
+  });
+});
+
+test("applies the interface font size to settings text", async ({ page }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("@paseo:app-settings", JSON.stringify({ uiFontSize: 24 }));
+  });
+  await page.goto("/settings");
+  await expect(page.getByTestId("settings-sidebar")).toBeVisible();
+  await openSettingsSection(page, "appearance");
+
+  const sectionTitle = page.getByText("Theme", { exact: true }).first();
+  await expect(sectionTitle).toHaveCSS("font-size", "18px");
+
+  const fontSizeInput = page.getByLabel("Interface font size");
+  await expect(fontSizeInput).toHaveValue("24");
+  await fontSizeInput.fill("12");
+  await fontSizeInput.press("Tab");
+
+  await expect(fontSizeInput).toHaveValue("12");
+  await expect(sectionTitle).toHaveCSS("font-size", "9px");
+});