From 85ca310df6702f3274a9aac07541e04ed8edd46c Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Sat, 22 Aug 2026 14:18:21 +0200 Subject: [PATCH] fix(editor): give the timeline clip's delete icon the same dark-chip treatment as its label MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .tlClipDelete sits on the same fixed dark frosted-glass chip as .tlClipLabel right next to it (both `color-mix(in srgb, #080a0d 55%, transparent)`, deliberately theme-independent since they overlay an arbitrary video thumbnail) — but its icon used `color: var(--muted)`, the app's own theme-dependent secondary-text token, instead of the "light text on a dark overlay" token the sibling chip's own text already uses (`.tlClipName` is a flat `#fff` for the same reason). In light theme `--muted` is a medium slate gray, close enough in tone to the chip's blended backdrop to read as nearly invisible — reported directly against a real clip's delete button in the timeline. Switched to `--overlay-text`, the token design-tokens.css defines for exactly this pairing (already used for scene/PiP overlay captions). Co-Authored-By: Claude Sonnet 5 --- src/components/ai-edition/v4/EditorShellV4.module.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ai-edition/v4/EditorShellV4.module.css b/src/components/ai-edition/v4/EditorShellV4.module.css index df6af761a..1e313e34c 100644 --- a/src/components/ai-edition/v4/EditorShellV4.module.css +++ b/src/components/ai-edition/v4/EditorShellV4.module.css @@ -1626,7 +1626,12 @@ display: grid; place-items: center; border-radius: 7px; - color: var(--muted); + /* The chip itself is a fixed dark frosted-glass overlay regardless of + theme (it sits on top of an arbitrary video thumbnail), so its icon + needs the "light text on a dark overlay" token, not --muted — which + is tuned for the app's own light/dark surfaces and reads as + near-invisible against this chip in light theme. */ + color: var(--overlay-text); background: color-mix(in srgb, #080a0d 55%, transparent); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px);