From e356d82d518b0863c6fe17b517746857f5a34c9e Mon Sep 17 00:00:00 2001 From: Claude Fable 5 Date: Wed, 15 Jul 2026 10:55:49 +0200 Subject: [PATCH] Define the missing --color-surface token; modals were transparent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .modal (and three other rules) referenced --color-surface without a fallback, but the token was never defined — the background declaration was silently dropped and every modal panel rendered see-through over the page. Define the token in tokens.css (white, matching the #fff fallbacks other rules already carried) and pin the vault-import dialog's opaque background in the e2e pack. Fixes #120 Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01Fb2VzvcoBPHkjh8bZ6PzQn --- apps/web/e2e/import-vault.spec.ts | 3 +++ apps/web/src/styles/tokens.css | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/apps/web/e2e/import-vault.spec.ts b/apps/web/e2e/import-vault.spec.ts index 1894fb0..546bc2b 100644 --- a/apps/web/e2e/import-vault.spec.ts +++ b/apps/web/e2e/import-vault.spec.ts @@ -63,6 +63,9 @@ test('a pond admin imports an Obsidian vault through the settings dialog', async await page.locator('.vault-import__open').click(); const dialog = page.locator('.vault-import-dialog'); await expect(dialog).toBeVisible(); + // #120: the panel must be opaque — --color-surface was undefined and the + // whole .modal background silently dropped, letting the page bleed through. + await expect(dialog).toHaveCSS('background-color', 'rgb(255, 255, 255)'); await dialog.locator('input[type="file"]').setInputFiles({ name: 'vault.zip', diff --git a/apps/web/src/styles/tokens.css b/apps/web/src/styles/tokens.css index 96b6fcc..ded77ef 100644 --- a/apps/web/src/styles/tokens.css +++ b/apps/web/src/styles/tokens.css @@ -17,6 +17,10 @@ --color-text-muted: #616e7c; --color-bg: #ffffff; --color-bg-subtle: #f5f7fa; + /* Elevated panels (modals, cards) — several rules already referenced this + * token with a #fff fallback; the fallback-less ones dropped their + * background entirely (#120). */ + --color-surface: #ffffff; --color-border: #d9e2ec; --color-accent: #2f6f4f; --color-accent-contrast: #ffffff;