stwaidele/dorfteich
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 22 Wiki Activity

Define the missing --color-surface token; modals were transparent

Browse Source 
.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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fb2VzvcoBPHkjh8bZ6PzQn
This commit is contained in:
Claude Fable 5 2026-07-15 10:55:49 +02:00
parent 2d51a55119
commit e356d82d51
2 changed files with 7 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/e2e/import-vault.spec.ts
View File

@ -63,6 +63,9 @@ test('a pond admin imports an Obsidian vault through the settings dialog', async
await page.locator('.vault-import__open').click(); await page.locator('.vault-import__open').click();
const dialog = page.locator('.vault-import-dialog'); const dialog = page.locator('.vault-import-dialog');
await expect(dialog).toBeVisible(); 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({ await dialog.locator('input[type="file"]').setInputFiles({
name: 'vault.zip', name: 'vault.zip',

4
apps/web/src/styles/tokens.css
View File

@ -17,6 +17,10 @@
--color-text-muted: #616e7c; --color-text-muted: #616e7c;
--color-bg: #ffffff; --color-bg: #ffffff;
--color-bg-subtle: #f5f7fa; --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-border: #d9e2ec;
--color-accent: #2f6f4f; --color-accent: #2f6f4f;
--color-accent-contrast: #ffffff; --color-accent-contrast: #ffffff;