alexei.dolgolyov
5dcadd1c20
Warm, friendly redesign replacing the generic cold-shadcn look. Built as a swappable token bundle so other presets can be added later; dark mode and the user-tunable accent hue are retained. Foundation - app.css: warm cream (light) + "dusk" (dark) token system; terracotta accent (default hue 16); pastel --room-* palette; vivid --status-* (dots/bars) plus AA-legible --status-*-ink (text); soft warm shadows; --radius 1rem; font tokens - Fonts: Fraunces (display) + Figtree (body), self-hosted in static/fonts (no Google CDN) so offline/LAN installs work; system-ui fallbacks kept - h1/h2/h3 render in Fraunces via base layer Chrome and surfaces - Sidebar, Header, home, AppCard/BoardCard, BoardHeader, sections, favorites - 29 widgets + integration renderers: cozy card shells, room-palette charts - Default background is a static warm "cozy" glow (mesh demoted, rAF gated on prefers-reduced-motion) System-wide - Status colors tokenized (no raw bg/text-*-500 or status hex); success/warning to status tokens, categorical to room palette, errors to destructive - Inputs rounded-xl; buttons rounded-xl; cards/dialogs rounded-[1.4rem]; soft-shadow vocabulary only; focus-visible:ring-primary/30 - Forms, admin tables (now cozy cards), dialogs, popovers, auth screens a11y: reduced-motion guards; darker status "ink" text for AA on cream. Known tradeoff: terracotta primary + white button text ~2.96:1 (signature color, user-tunable). Verified: svelte-check 0/0, build ok, 274 tests pass, eslint 0 errors. Design refs + system sheet in design-mockups/.
76 lines
2.1 KiB
Svelte
76 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { t } from 'svelte-i18n';
|
|
import { fade, scale } from 'svelte/transition';
|
|
|
|
interface Props {
|
|
title: string;
|
|
message: string;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
destructive?: boolean;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
let {
|
|
title,
|
|
message,
|
|
confirmLabel,
|
|
cancelLabel,
|
|
destructive = true,
|
|
onConfirm,
|
|
onCancel
|
|
}: Props = $props();
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.key === 'Escape') onCancel();
|
|
}
|
|
</script>
|
|
|
|
<svelte:window onkeydown={handleKeydown} />
|
|
|
|
<!-- Backdrop -->
|
|
<div
|
|
class="fixed inset-0 z-[60] flex items-center justify-center bg-black/30 backdrop-blur-sm"
|
|
role="button"
|
|
tabindex="-1"
|
|
onclick={onCancel}
|
|
onkeydown={(e) => e.key === 'Enter' && onCancel()}
|
|
transition:fade={{ duration: 120 }}
|
|
>
|
|
<!-- Dialog -->
|
|
<div
|
|
class="mx-4 w-full max-w-sm rounded-[1.4rem] border border-border bg-card p-6 shadow-[var(--shadow-lift)]"
|
|
onclick={(e) => e.stopPropagation()}
|
|
onkeydown={(e) => e.stopPropagation()}
|
|
transition:scale={{ start: 0.95, duration: 150 }}
|
|
role="alertdialog"
|
|
tabindex="-1"
|
|
aria-labelledby="confirm-dialog-title"
|
|
aria-describedby="confirm-dialog-message"
|
|
>
|
|
<h2 id="confirm-dialog-title" class="mb-2 font-display text-lg font-semibold text-foreground">{title}</h2>
|
|
<p id="confirm-dialog-message" class="mb-5 text-sm leading-relaxed text-muted-foreground">{message}</p>
|
|
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onclick={onCancel}
|
|
class="rounded-xl border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
|
|
>
|
|
{cancelLabel ?? ($t('common.cancel') ?? 'Cancel')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick={onConfirm}
|
|
class="rounded-xl px-4 py-2 text-sm font-semibold shadow-[var(--shadow-soft)] transition-all hover:-translate-y-0.5
|
|
{destructive
|
|
? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
|
|
: 'bg-primary text-primary-foreground hover:bg-primary/90'}"
|
|
>
|
|
{confirmLabel ?? ($t('common.delete') ?? 'Delete')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|