From d10e581243eeca0fe6024f9b9bc6c6cf7b988baa Mon Sep 17 00:00:00 2001 From: "claude (blind_chess)" Date: Mon, 18 May 2026 21:22:50 -0400 Subject: [PATCH] fix(client): light outline on dark phantom glyphs for panel contrast Opponent (black) phantom pieces rendered near-invisible on the dark --panel background in the palette and Captures panel, and the black drag-ghost was low-contrast over dark areas. Black piece glyphs in those three spots now get a light text-shadow outline. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/client/src/lib/CaptureTally.svelte | 3 ++- packages/client/src/lib/Game.svelte | 4 +++- packages/client/src/lib/PhantomPalette.svelte | 3 ++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/client/src/lib/CaptureTally.svelte b/packages/client/src/lib/CaptureTally.svelte index abb4033..09bc5f0 100644 --- a/packages/client/src/lib/CaptureTally.svelte +++ b/packages/client/src/lib/CaptureTally.svelte @@ -75,7 +75,8 @@ } .pieces { flex: 1; font-size: 20px; line-height: 1; } .g-w { color: #fafafa; } - .g-b { color: #1a1a1a; } + /* Dark pieces need a light outline to read on the dark panel background. */ + .g-b { color: #1a1a1a; text-shadow: 0 0 2px var(--text), 0 0 2px var(--text); } .n { font-family: ui-monospace, monospace; font-size: 13px; diff --git a/packages/client/src/lib/Game.svelte b/packages/client/src/lib/Game.svelte index fd67ca1..0a6bd4e 100644 --- a/packages/client/src/lib/Game.svelte +++ b/packages/client/src/lib/Game.svelte @@ -337,5 +337,7 @@ text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); } .drag-ghost.piece-w { color: #fafafa; } - .drag-ghost.piece-b { color: #1a1a1a; } + /* A dark dragged piece needs a light outline (the base dark shadow above + does nothing for it) so it reads over dark areas of the page. */ + .drag-ghost.piece-b { color: #1a1a1a; text-shadow: 0 0 3px var(--text), 0 0 2px var(--text); } diff --git a/packages/client/src/lib/PhantomPalette.svelte b/packages/client/src/lib/PhantomPalette.svelte index fb48389..9f8db67 100644 --- a/packages/client/src/lib/PhantomPalette.svelte +++ b/packages/client/src/lib/PhantomPalette.svelte @@ -46,5 +46,6 @@ } .pp:hover { opacity: 1; } .pp-w { color: #fafafa; } - .pp-b { color: #1a1a1a; } + /* Dark pieces need a light outline to read on the dark panel background. */ + .pp-b { color: #1a1a1a; text-shadow: 0 0 2px var(--text), 0 0 2px var(--text); }