From e857a814ad975453e4be0ab334c2677f37b8d9b6 Mon Sep 17 00:00:00 2001 From: Jake Date: Thu, 7 May 2026 09:18:54 +0100 Subject: [PATCH] fix(ui): remove side-stripe borders in favour of subtle bg tints MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Side-stripe borders (border-left: 2px or 3px in an accent colour, with the rest of the element having no border) are the textbook AI-coded-IDE "selected-state" pattern. The brand vocabulary is colour-tint and chevron, not stripe-and-fill. Replaced eight sites: - VirtualSegmentList active/match/default segment rows: bg-accent/10, bg-warning/10, hover:bg-hover (drop the stripes; bg-warning bumped /5 → /10 so it's visible without the stripe doing the work). - viewer/+page.svelte: same pattern as VirtualSegmentList. - TasksPage profile-list tabs: bg-accent/10 + font-medium for active, hover:bg-hover for inactive. rounded-md added so the tint follows the row outline. - ToastViewport: replaced border-left + variant colour with full 1px border + bg tint + border-color tint (color-mix() with the matching semantic token at 35% / 10%). Also removed the orphan --moss / --signal / --ember tokens — they were not defined in app.css and fell back to hex literals. - preview/+page.svelte: dropped the phase-coloured left stripe and the borderColorClass derivation; the header already has a pulsing dot / animated bars / spinner for each phase, so the stripe was redundant. --- src/lib/components/ToastViewport.svelte | 27 +++++++++++++++----- src/lib/components/VirtualSegmentList.svelte | 6 ++--- src/lib/pages/TasksPage.svelte | 6 ++--- src/routes/preview/+page.svelte | 8 +----- src/routes/viewer/+page.svelte | 6 ++--- 5 files changed, 30 insertions(+), 23 deletions(-) diff --git a/src/lib/components/ToastViewport.svelte b/src/lib/components/ToastViewport.svelte index a12fa2c..e56924f 100644 --- a/src/lib/components/ToastViewport.svelte +++ b/src/lib/components/ToastViewport.svelte @@ -66,9 +66,9 @@ gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 0.5rem; - background: var(--surface, #1a1a1a); - color: var(--text, #fff); - border-left: 3px solid var(--moss, #4a7a4a); + background: var(--color-bg-card); + color: var(--color-text); + border: 1px solid var(--color-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); /* Slide in from right; honours reduce-motion via the existing class that preferences.svelte.js applies to . */ @@ -81,10 +81,23 @@ to { transform: translateX(0); opacity: 1; } } - .toast-info { border-left-color: var(--moss, #4a7a4a); } - .toast-success { border-left-color: var(--moss, #4a7a4a); } - .toast-warn { border-left-color: var(--signal, #d4a017); } - .toast-error { border-left-color: var(--ember, #c87144); } + /* Severity styling tints the whole surface and border in the matching + semantic colour. Brand-aligned: no side stripes, no decorative + accents. The body text and dismiss button still read against the + tinted background because the tints are at low alpha. */ + .toast-info, + .toast-success { + background: color-mix(in oklch, var(--color-success) 10%, var(--color-bg-card)); + border-color: color-mix(in oklch, var(--color-success) 35%, var(--color-border)); + } + .toast-warn { + background: color-mix(in oklch, var(--color-warning) 10%, var(--color-bg-card)); + border-color: color-mix(in oklch, var(--color-warning) 35%, var(--color-border)); + } + .toast-error { + background: color-mix(in oklch, var(--color-danger) 10%, var(--color-bg-card)); + border-color: color-mix(in oklch, var(--color-danger) 35%, var(--color-border)); + } .toast-body { flex: 1; diff --git a/src/lib/components/VirtualSegmentList.svelte b/src/lib/components/VirtualSegmentList.svelte index e6894da..d94f66c 100644 --- a/src/lib/components/VirtualSegmentList.svelte +++ b/src/lib/components/VirtualSegmentList.svelte @@ -159,10 +159,10 @@
onSeekToTime(seg.start)} ondblclick={() => onStartEditing(idx)} diff --git a/src/lib/pages/TasksPage.svelte b/src/lib/pages/TasksPage.svelte index 236190f..be48904 100644 --- a/src/lib/pages/TasksPage.svelte +++ b/src/lib/pages/TasksPage.svelte @@ -504,10 +504,10 @@ {:else}