Jake
e857a814ad
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.
144 lines
4.2 KiB
Svelte
144 lines
4.2 KiB
Svelte
<script lang="ts">
|
|
import type { ToastSeverity } from "$lib/types/app";
|
|
// Renders the toast stack in the bottom-right of the viewport. Mount once
|
|
// at the app root (in +layout.svelte). Reads from the global toasts store.
|
|
//
|
|
// Severity colour mapping uses the brand palette via CSS variables already
|
|
// defined in app.css — no inline literals.
|
|
//
|
|
// Honours prefers-reduced-motion via the existing :root[data-reduce-motion]
|
|
// attribute that preferences.svelte.js sets.
|
|
import { toasts } from '$lib/stores/toasts.svelte.js';
|
|
import { X } from 'lucide-svelte';
|
|
|
|
function severityClass(severity: ToastSeverity) {
|
|
switch (severity) {
|
|
case 'success': return 'toast-success';
|
|
case 'info': return 'toast-info';
|
|
case 'warn': return 'toast-warn';
|
|
case 'error': return 'toast-error';
|
|
default: return 'toast-info';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="toast-viewport" aria-live="polite" aria-atomic="false">
|
|
{#each toasts.items as toast (toast.id)}
|
|
<div
|
|
class="toast {severityClass(toast.severity)}"
|
|
role={toast.severity === 'error' ? 'alert' : 'status'}
|
|
>
|
|
<div class="toast-body">
|
|
<div class="toast-title">{toast.title}</div>
|
|
{#if toast.body}
|
|
<div class="toast-msg">{toast.body}</div>
|
|
{/if}
|
|
</div>
|
|
<button
|
|
class="toast-close"
|
|
aria-label="Dismiss"
|
|
onclick={() => toasts.dismiss(toast.id)}
|
|
type="button"
|
|
>
|
|
<X size={14} aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.toast-viewport {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
z-index: 9999;
|
|
max-width: min(28rem, calc(100vw - 2rem));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast {
|
|
pointer-events: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
padding: 0.875rem 1rem;
|
|
border-radius: 0.5rem;
|
|
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>. */
|
|
animation: toast-slide-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
:global(html.reduce-motion) .toast { animation: none; }
|
|
|
|
@keyframes toast-slide-in {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
/* 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;
|
|
min-width: 0;
|
|
}
|
|
|
|
.toast-title {
|
|
font-weight: 600;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.4;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.toast-msg {
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
color: var(--text-muted, rgba(255, 255, 255, 0.7));
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.toast-close {
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted, rgba(255, 255, 255, 0.6));
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 100ms, color 100ms;
|
|
}
|
|
.toast-close:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: var(--text, #fff);
|
|
}
|
|
.toast-close:focus-visible {
|
|
outline: 2px solid var(--ember, #c87144);
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|