jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Jake
2026-05-07 09:18:54 +01:00
parent 360e5457dc
commit e857a814ad
5 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/components/ToastViewport.svelte
View File

@@ -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 <html>. */
@@ -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;

6
src/lib/components/VirtualSegmentList.svelte
View File

@@ -159,10 +159,10 @@
<div
class="absolute left-0 right-0 group flex gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors
{activeSegmentIdx === idx
? 'bg-accent/10 border-l-2 border-accent'
? 'bg-accent/10'
: matchingSegments.has(idx)
? 'bg-warning/5 border-l-2 border-warning/40'
: 'border-l-2 border-transparent hover:bg-hover'}"
? 'bg-warning/10'
: 'hover:bg-hover'}"
style="top: {top}px"
onclick={() => onSeekToTime(seg.start)}
ondblclick={() => onStartEditing(idx)}

6
src/lib/pages/TasksPage.svelte
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); }}

8
src/routes/preview/+page.svelte
View File

@@ -183,16 +183,10 @@
: phase === "cleanup" ? "Cleaning up"
: "Final",
);
let borderColorClass = $derived(
phase === "final" ? "border-success"
: phase === "cleanup" ? "border-accent"
: "border-border",
);
</script>
<div
class="h-full w-full flex flex-col bg-bg text-text p-3 gap-2 border-l-2 {borderColorClass}"
style="transition: border-color var(--duration-ui) ease-out"
class="h-full w-full flex flex-col bg-bg text-text p-3 gap-2"
data-tauri-drag-region
>
<header class="flex items-center justify-between gap-2 text-[11px] text-text-secondary" data-tauri-drag-region>

6
src/routes/viewer/+page.svelte
View File

@@ -522,10 +522,10 @@
bind:this={segmentRefs[seg._idx]}
class="group flex gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors
{activeSegmentIdx === seg._idx
? 'bg-accent/10 border-l-2 border-accent'
? 'bg-accent/10'
: matchingSegments.has(seg._idx)
? 'bg-warning/5 border-l-2 border-warning/40'
: 'border-l-2 border-transparent hover:bg-hover'}"
? 'bg-warning/10'
: 'hover:bg-hover'}"
onclick={() => seekToTime(seg.start)}
ondblclick={() => startEditing(seg._idx)}
role="button"