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>
33 lines
862 B
JSON
33 lines
862 B
JSON
{
|
|
"name": "mangalord-frontend",
|
|
"version": "0.13.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite dev",
|
|
"build": "vite build",
|
|
"preview": "vite preview",
|
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
"test": "vitest run",
|
|
"test:watch": "vitest",
|
|
"test:e2e": "playwright test"
|
|
},
|
|
"devDependencies": {
|
|
"@lucide/svelte": "^1.16.0",
|
|
"@playwright/test": "^1.48.0",
|
|
"@sveltejs/adapter-node": "^5.2.0",
|
|
"@sveltejs/kit": "^2.7.0",
|
|
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
|
"@testing-library/jest-dom": "^6.6.0",
|
|
"@testing-library/svelte": "^5.2.0",
|
|
"@types/node": "^22.7.0",
|
|
"jsdom": "^25.0.0",
|
|
"svelte": "^5.0.0",
|
|
"svelte-check": "^4.0.0",
|
|
"tslib": "^2.7.0",
|
|
"typescript": "^5.6.0",
|
|
"vite": "^5.4.0",
|
|
"vitest": "^2.1.0"
|
|
}
|
|
}
|