Cover e2e theme variants and light surfaces

Author: pallyoung

packages/web/src/styles/base.css

@@ -485,18 +485,34 @@ textarea::placeholder {
   place-items: center;
   padding: var(--sp-8);
   background:
-    radial-gradient(circle at top, rgba(120, 215, 178, 0.08), transparent 36%),
-    radial-gradient(circle at bottom right, rgba(108, 182, 255, 0.1), transparent 34%),
-    linear-gradient(180deg, rgba(17, 24, 31, 0.92), rgba(10, 16, 20, 0.98));
+    radial-gradient(
+      circle at top,
+      color-mix(in srgb, var(--accent-green) 10%, transparent),
+      transparent 36%
+    ),
+    radial-gradient(
+      circle at bottom right,
+      color-mix(in srgb, var(--accent-blue) 12%, transparent),
+      transparent 34%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-page) 88%, var(--bg-surface) 12%),
+      var(--bg-page)
+    );
 }
 
 .app-loading-card {
   width: min(520px, 100%);
   padding: var(--sp-8);
   border: 1px solid var(--border);
   border-radius: var(--radius-2xl);
-  background: linear-gradient(180deg, rgba(17, 24, 31, 0.96), rgba(13, 20, 26, 0.94));
-  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.42);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--bg-surface) 98%, white 2%),
+    color-mix(in srgb, var(--bg-surface) 84%, var(--bg-page) 16%)
+  );
+  box-shadow: var(--shadow-xl);
 }
 
 .app-loading-kicker {

packages/web/src/styles/base.theme.test.ts

@@ -0,0 +1,36 @@
+// @vitest-environment node
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const stylesheet = readFileSync(`${process.cwd()}/src/styles/base.css`, "utf8");
+
+function getRuleBlock(selector: string) {
+  const matcher = /([^{}]+)\{([^}]*)\}/g;
+  let match: RegExpExecArray | null = null;
+  const normalizedSelector = selector.replace(/\s+/g, " ").trim();
+
+  while ((match = matcher.exec(stylesheet)) !== null) {
+    const selectors = match[1]
+      .replace(/\/\*[\s\S]*?\*\//g, "")
+      .split(",")
+      .map((entry) => entry.replace(/\s+/g, " ").trim());
+
+    if (selectors.includes(normalizedSelector)) {
+      return match[2];
+    }
+  }
+
+  throw new Error(`expected CSS rule for ${selector}`);
+}
+
+describe("base.css theme-sensitive shells", () => {
+  it("keeps the app loading shell on theme tokens instead of dark-only gradients", () => {
+    const shell = getRuleBlock(".app-loading-shell");
+    const card = getRuleBlock(".app-loading-card");
+
+    expect(shell).toContain("var(--bg-page)");
+    expect(shell).not.toContain("rgba(17, 24, 31, 0.92)");
+    expect(card).toContain("var(--bg-surface)");
+    expect(card).not.toContain("rgba(17, 24, 31, 0.96)");
+  });
+});

packages/web/src/styles/components.css

@@ -5914,7 +5914,11 @@ textarea.input {
   border-radius: 14px;
   box-shadow: var(--shadow-lg);
   overflow: hidden;
-  background: linear-gradient(180deg, rgba(17, 24, 31, 0.96), rgba(11, 18, 24, 0.99));
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--bg-terminal) 96%, white 4%),
+    color-mix(in srgb, var(--bg-terminal) 88%, var(--bg-page) 12%)
+  );
 }
 
 .terminal-toolbar {
@@ -6284,7 +6288,11 @@ textarea.input {
 }
 
 .session-terminal {
-  background: linear-gradient(180deg, rgba(11, 18, 24, 0.98), rgba(9, 15, 20, 1));
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--bg-terminal) 98%, white 2%),
+    color-mix(in srgb, var(--bg-terminal) 90%, var(--bg-page) 10%)
+  );
 }
 
 .workspace-empty-content,

packages/web/src/styles/components.theme.test.ts

@@ -84,12 +84,20 @@ describe("components.css theme-sensitive surfaces", () => {
     const activeTab = getLastRuleBlock(".topbar-tab.active");
     const emptyCard = getLastRuleBlock(".workspace-empty-inner");
     const resolvingCard = getLastRuleBlock(".workspace-resolving-card");
+    const sessionTerminal = getLastRuleBlock(".session-terminal");
+    const bottomTerminalShell = getLastRuleBlock(
+      ".workspace-main-area > .bottom-terminal > .bottom-terminal"
+    );
 
     expect(topbar).toContain("var(--bg-surface)");
     expect(activeTab).toContain("var(--bg-active)");
     expect(activeTab).not.toContain("rgba(45, 63, 79, 0.92)");
     expect(emptyCard).toContain("var(--bg-surface)");
     expect(resolvingCard).toContain("var(--bg-surface)");
+    expect(sessionTerminal).toContain("var(--bg-terminal)");
+    expect(sessionTerminal).not.toContain("rgba(11, 18, 24, 0.98)");
+    expect(bottomTerminalShell).toContain("var(--bg-terminal)");
+    expect(bottomTerminalShell).not.toContain("rgba(17, 24, 31, 0.96)");
   });
 
   it("keeps quick actions sized to its label instead of icon-button width", () => {

packages/web/src/ui-preview/scene-metadata.test.ts

@@ -0,0 +1,23 @@
+// @vitest-environment node
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { THEME_IDS } from "../theme";
+import { UI_PREVIEW_SCENE_METADATA } from "./scene-metadata";
+
+const source = readFileSync(`${process.cwd()}/src/ui-preview/scene-metadata.ts`, "utf8");
+
+describe("ui preview scene metadata", () => {
+  it("covers every built-in theme for route-backed workspace scenes", () => {
+    expect(
+      UI_PREVIEW_SCENE_METADATA.filter(
+        (scene) =>
+          scene.source === "real-route" &&
+          (scene.id === "workspace-desktop" || scene.id === "workspace-mobile")
+      ).map((scene) => scene.themes)
+    ).toEqual([[...THEME_IDS], [...THEME_IDS]]);
+  });
+
+  it("enumerates concrete theme ids instead of dark/light buckets", () => {
+    expect(source).not.toContain('themeIdsForKinds("dark", "light")');
+  });
+});

packages/web/src/ui-preview/scene-metadata.ts

@@ -1,4 +1,4 @@
-import { THEME_IDS, type ThemeKind } from "../theme";
+import { THEME_IDS } from "../theme";
 
 export type UiPreviewSceneDevice = "desktop" | "mobile";
 export type UiPreviewSceneTheme = (typeof THEME_IDS)[number];
@@ -30,19 +30,10 @@ export interface UiPreviewSceneMetadata {
   };
 }
 
-const THEME_IDS_BY_KIND = {
-  dark: THEME_IDS.filter((themeId) => themeId.endsWith("-dark")),
-  light: THEME_IDS.filter((themeId) => themeId.endsWith("-light")),
-} satisfies Record<ThemeKind, readonly string[]>;
-
 function allThemeIds(): UiPreviewSceneTheme[] {
   return [...THEME_IDS] as UiPreviewSceneTheme[];
 }
 
-function themeIdsForKinds(...kinds: ThemeKind[]): UiPreviewSceneTheme[] {
-  return kinds.flatMap((kind) => THEME_IDS_BY_KIND[kind]) as UiPreviewSceneTheme[];
-}
-
 export const UI_PREVIEW_SCENE_METADATA: UiPreviewSceneMetadata[] = [
   {
     id: "welcome",
@@ -128,7 +119,7 @@ export const UI_PREVIEW_SCENE_METADATA: UiPreviewSceneMetadata[] = [
     source: "real-route",
     description: "Desktop workspace shell with seeded workspace, git status, and file tree.",
     devices: ["desktop"],
-    themes: themeIdsForKinds("dark", "light"),
+    themes: allThemeIds(),
     locales: ["zh", "en"],
     capture: { selector: ".workspace-page" },
   },
@@ -139,7 +130,7 @@ export const UI_PREVIEW_SCENE_METADATA: UiPreviewSceneMetadata[] = [
     source: "real-route",
     description: "Mobile workspace shell with seeded workspace and no active sessions.",
     devices: ["mobile"],
-    themes: themeIdsForKinds("dark", "light"),
+    themes: allThemeIds(),
     locales: ["zh", "en"],
     capture: { selector: "[data-testid='mobile-shell']" },
   },