fix(app): show selected workspace in light theme (#3922)

Co-authored-by: Will Daubney <16829568+wdaubney@users.noreply.github.com>

packages/app/e2e/browser/appearance-theme-picker.spec.ts

@@ -18,6 +18,33 @@ test("shows Pure black in the appearance picker", async ({ page }, testInfo) =>
   });
 });
 
+test("keeps the selected workspace visible in Light", async ({ page }, testInfo) => {
+  const workspace = await seedWorkspace({
+    repoPrefix: "light-selected-workspace-",
+    title: "Selected workspace",
+  });
+
+  try {
+    await page.addInitScript(() => {
+      localStorage.setItem("@paseo:app-settings", JSON.stringify({ theme: "light" }));
+    });
+    await gotoAppShell(page);
+
+    const row = page.getByTestId(`sidebar-workspace-row-${getServerId()}:${workspace.workspaceId}`);
+    await expect(row).toBeVisible({ timeout: 30_000 });
+    await row.click();
+
+    await expect(row).toHaveAttribute("aria-selected", "true");
+    await expect(row).toHaveCSS("background-color", "rgb(228, 228, 231)");
+    await page.screenshot({
+      path: testInfo.outputPath("light-selected-workspace.png"),
+      fullPage: true,
+    });
+  } finally {
+    await workspace.cleanup();
+  }
+});
+
 test("keeps the selected workspace visible in Pure black", async ({ page }, testInfo) => {
   const workspace = await seedWorkspace({
     repoPrefix: "pure-black-selected-workspace-",

packages/app/src/styles/theme.test.ts

@@ -68,13 +68,16 @@ describe("Pure black theme", () => {
 });
 
 describe("Sidebar interaction surfaces", () => {
-  it.each([lightTheme, darkTheme])(
-    "derives hover and selection from the surface scale",
-    (theme) => {
-      expect(theme.colors.surfaceSidebarHover).toBe(theme.colors.surface1);
-      expect(theme.colors.surfaceSidebarSelected).toBe(theme.colors.surface2);
-    },
-  );
+  it("keeps Light selection distinct from the sidebar surface", () => {
+    expect(lightTheme.colors.surfaceSidebarHover).toBe(lightTheme.colors.surface1);
+    expect(lightTheme.colors.surfaceSidebarSelected).toBe(lightTheme.colors.surface3);
+    expect(lightTheme.colors.surfaceSidebarSelected).not.toBe(lightTheme.colors.surfaceSidebar);
+  });
+
+  it("derives Dark hover and selection from the first two raised surfaces", () => {
+    expect(darkTheme.colors.surfaceSidebarHover).toBe(darkTheme.colors.surface1);
+    expect(darkTheme.colors.surfaceSidebarSelected).toBe(darkTheme.colors.surface2);
+  });
 });
 
 describe("Built-in light theme", () => {

packages/app/src/styles/theme.ts

@@ -254,7 +254,7 @@ export function buildLightSemanticColors(tint: LightThemeConfig) {
     surfaceDiffEmpty: tint.surfaceDiffEmpty,
     surfaceSidebar: tint.surfaceSidebar,
     surfaceSidebarHover: tint.surface1,
-    surfaceSidebarSelected: tint.surface2,
+    surfaceSidebarSelected: tint.surface3,
     surfaceWorkspace: tint.surface0,
     interactionHighlight: "rgba(0, 0, 0, 0.06)",