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}