fix(ui): remove side-stripe borders in favour of subtle bg tints

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.
This commit is contained in:
2026-05-07 09:18:54 +01:00
parent 360e5457dc
commit e857a814ad
5 changed files with 30 additions and 23 deletions

View File

@@ -504,10 +504,10 @@
{:else}
<div class="relative">
<button
class="w-full flex items-center gap-1.5 px-2 py-1.5 text-left text-[11px]
class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-md text-left text-[11px]
{activeListId === list.id
? 'border-l-2 border-accent text-text font-medium bg-accent/5'
: 'border-l-2 border-transparent text-text-secondary hover:bg-hover hover:text-text'}"
? 'text-text font-medium bg-accent/10'
: 'text-text-secondary hover:bg-hover hover:text-text'}"
onclick={() => { activeListId = list.id; contextMenuListId = null; }}
ondblclick={() => { if (!list.builtIn && !sidebarCollapsed) startRenaming(list); }}
oncontextmenu={(e) => { if (!list.builtIn) toggleContextMenu(e, list.id); }}