forked from mirror/crumbs-original
Frederic CabassutandClaude Opus 4.6
eb18242f5a
Replace hardcoded colors (gray-500, #b44, red-300/red-50/red-600, green-600) with CSS variables for theme consistency. Add --destructive, --error-*, --success-*, and --card-shadow variables to :root. Soften default card borders from --border to --border-subtle and add 8-bit style hard-offset shadows with hover effects. Apply accent-color for themed checkboxes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
23 lines
964 B
Svelte
23 lines
964 B
Svelte
<script lang="ts">
|
|
import { toasts, dismiss } from '$lib/stores/toast.js';
|
|
</script>
|
|
|
|
<div class="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-col gap-2">
|
|
{#each $toasts as toast (toast.id)}
|
|
<div
|
|
class="flex items-center gap-3 rounded-sm border px-4 py-3 shadow-[var(--card-shadow)] {toast.type === 'error' ? 'border-[var(--error-border)] bg-[var(--error-bg)] text-[var(--error-text)]' : toast.type === 'success' ? 'border-[var(--border-subtle)] bg-[var(--success-bg)] text-[var(--success-text)]' : 'border-[var(--border)] bg-[var(--text)] text-[var(--bg-base)]'}"
|
|
>
|
|
<span class="text-sm">{toast.text}</span>
|
|
{#if toast.action}
|
|
<button
|
|
onclick={() => { toast.action?.handler(); dismiss(toast.id); }}
|
|
class="text-sm font-semibold underline"
|
|
>
|
|
{toast.action.label}
|
|
</button>
|
|
{/if}
|
|
<button onclick={() => dismiss(toast.id)} class="ml-2 opacity-70 hover:opacity-100">×</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|