567d56bfa1
Adds a real design system to replace the per-route ad-hoc styling: - docs/design-system.md is the contract. Semantic CSS custom-property tokens (color/type/spacing/radii/shadows/z-index) with verified WCAG AA/AAA contrast ratios for both themes. - frontend/src/lib/styles/tokens.css defines :root tokens + a [data-theme="dark"] override + base element resets, a .form-field helper, and a global prefers-reduced-motion rule. - frontend/src/lib/theme.svelte.ts is a Svelte 5 runes store backing the theme state machine (system | light | dark). localStorage key 'mangalord-theme'; matchMedia subscription that re-resolves on OS theme change while in 'system' mode; init() / destroy() lifecycle wired from +layout.svelte. - frontend/src/app.html runs a synchronous inline script before %sveltekit.head% to set [data-theme] before first paint. No FOUC. - /settings gains a System / Light / Dark radiogroup (real fieldset + legend + radios with lucide icons). - Every route's <style> block is rewritten to consume tokens — home, auth, upload (drop-zone + page list), bookmarks, manga overview, reader. - @lucide/svelte icons replace ad-hoc text controls per the spec: Search (icon-only primary), LogOut (icon-only muted), Upload / Bookmarks / Settings nav inline icons, ChevronLeft/Right for the reader, ArrowUp/Down/Trash2 for the upload page list. The bookmark toggle keeps its '☆ Bookmark' / '★ Bookmarked' text verbatim. - Home search controls split into two rows: input + Search CTA on row 1, Sort (and future filters) on row 2. Accessibility: every icon-only button carries aria-label, every decorative SVG aria-hidden; existing image alt text preserved; focus-visible rings reach every interactive element including the visually-hidden theme radios; color is never the sole conveyor. Version bump 0.12.0 → 0.13.0 across backend/Cargo.toml and frontend/package.json (feat: → minor per CLAUDE.md). Bars: svelte-check 0/0, vitest 51/51, playwright 18/18, cargo test 88/88, clippy -D warnings clean. Two rounds of independent review; verdict ship-ready. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
94 lines
2.4 KiB
Svelte
94 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { register } from '$lib/api/auth';
|
|
import { session } from '$lib/session.svelte';
|
|
|
|
let username = $state('');
|
|
let password = $state('');
|
|
let error: string | null = $state(null);
|
|
let submitting = $state(false);
|
|
|
|
async function submit(e: SubmitEvent) {
|
|
e.preventDefault();
|
|
error = null;
|
|
submitting = true;
|
|
try {
|
|
const user = await register({ username, password });
|
|
session.setUser(user);
|
|
await goto('/');
|
|
} catch (e) {
|
|
error = (e as Error).message;
|
|
} finally {
|
|
submitting = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<h1>Register</h1>
|
|
<form onsubmit={submit} action="javascript:void(0)" data-testid="register-form">
|
|
<label class="form-field">
|
|
<span>Username</span>
|
|
<input
|
|
type="text"
|
|
bind:value={username}
|
|
autocomplete="username"
|
|
minlength="3"
|
|
maxlength="32"
|
|
required
|
|
data-testid="register-username"
|
|
/>
|
|
</label>
|
|
<label class="form-field">
|
|
<span>Password</span>
|
|
<input
|
|
type="password"
|
|
bind:value={password}
|
|
autocomplete="new-password"
|
|
minlength="8"
|
|
required
|
|
data-testid="register-password"
|
|
/>
|
|
</label>
|
|
<button class="primary" type="submit" disabled={submitting} data-testid="register-submit">
|
|
{submitting ? 'Registering…' : 'Register'}
|
|
</button>
|
|
{#if error}
|
|
<p class="form-error" role="alert" data-testid="register-error">{error}</p>
|
|
{/if}
|
|
</form>
|
|
<p class="hint">
|
|
Already have an account? <a href="/login">Log in</a>.
|
|
</p>
|
|
|
|
<style>
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
max-width: 24rem;
|
|
}
|
|
|
|
.primary {
|
|
background: var(--primary);
|
|
color: var(--primary-contrast);
|
|
border-color: var(--primary);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.primary:hover:not(:disabled) {
|
|
background: var(--primary-hover);
|
|
border-color: var(--primary-hover);
|
|
}
|
|
|
|
.form-error {
|
|
color: var(--danger);
|
|
font-size: var(--font-sm);
|
|
}
|
|
|
|
.hint {
|
|
margin-top: var(--space-3);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-sm);
|
|
}
|
|
</style>
|