feat: design system with light/dark themes and icon-first UI
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>
This commit is contained in:
MechaCat02
265
frontend/src/lib/styles/tokens.css
Normal file
265
frontend/src/lib/styles/tokens.css
Normal file
@@ -0,0 +1,265 @@
|
||||
/* Design tokens — see docs/design-system.md.
|
||||
Components consume tokens only; no raw hex or raw px in scoped styles. */
|
||||
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #f6f7f9;
|
||||
--surface-elevated: #ffffff;
|
||||
--border: #e3e5ea;
|
||||
--border-strong: #c8ccd4;
|
||||
--text: #16181d;
|
||||
--text-muted: #5b6168;
|
||||
--primary: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--primary-contrast: #ffffff;
|
||||
--primary-soft-bg: rgb(37 99 235 / 0.08);
|
||||
--danger: #b00020;
|
||||
--danger-soft-bg: #fff5f5;
|
||||
--success: #0a7d2c;
|
||||
--warning-soft-bg: #fff5d6;
|
||||
--warning-border: #d6a800;
|
||||
--focus-ring: #2563eb;
|
||||
--focus-ring-soft: rgb(37 99 235 / 0.25);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
|
||||
--shadow-md: 0 2px 8px rgb(0 0 0 / 0.08);
|
||||
|
||||
--font-stack: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
|
||||
--font-xs: 0.75rem;
|
||||
--font-sm: 0.875rem;
|
||||
--font-base: 1rem;
|
||||
--font-lg: 1.125rem;
|
||||
--font-xl: 1.5rem;
|
||||
--font-2xl: 2rem;
|
||||
|
||||
--leading-tight: 1.3;
|
||||
--leading-snug: 1.45;
|
||||
--leading-normal: 1.55;
|
||||
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 10px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
--transition: 120ms ease-out;
|
||||
|
||||
--icon-sm: 14px;
|
||||
--icon-md: 18px;
|
||||
--icon-lg: 22px;
|
||||
|
||||
--z-dropdown: 10;
|
||||
--z-sticky: 50;
|
||||
--z-modal: 100;
|
||||
--z-toast: 1000;
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
--bg: #0f1115;
|
||||
--surface: #161a21;
|
||||
--surface-elevated: #1c2129;
|
||||
--border: #2a2f37;
|
||||
--border-strong: #3a414d;
|
||||
--text: #e8eaed;
|
||||
--text-muted: #9aa0a6;
|
||||
--primary: #60a5fa;
|
||||
--primary-hover: #3b82f6;
|
||||
--primary-contrast: #0f1115;
|
||||
--primary-soft-bg: rgb(96 165 250 / 0.12);
|
||||
--danger: #f87171;
|
||||
--danger-soft-bg: #3a1620;
|
||||
--success: #4ade80;
|
||||
--warning-soft-bg: #3a2e10;
|
||||
--warning-border: #a37800;
|
||||
--focus-ring: #60a5fa;
|
||||
--focus-ring-soft: rgb(96 165 250 / 0.3);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 2px 8px rgb(0 0 0 / 0.5);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-stack);
|
||||
font-size: var(--font-base);
|
||||
line-height: var(--leading-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--text);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: var(--weight-semibold);
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-2xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-lg);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus-visible,
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible,
|
||||
[role='button']:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='search'],
|
||||
input[type='password'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
select,
|
||||
textarea {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 var(--space-3);
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
transition:
|
||||
border-color var(--transition),
|
||||
background var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
min-height: 6rem;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
line-height: var(--leading-snug);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input[type='text']:focus,
|
||||
input[type='search']:focus,
|
||||
input[type='password']:focus,
|
||||
input[type='number']:focus,
|
||||
input[type='email']:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
background: var(--surface-elevated);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-soft);
|
||||
}
|
||||
|
||||
input[aria-invalid='true'],
|
||||
select[aria-invalid='true'],
|
||||
textarea[aria-invalid='true'] {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
textarea:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 var(--space-3);
|
||||
height: 36px;
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text);
|
||||
transition:
|
||||
background var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--text-muted);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
font-size: var(--font-sm);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition-duration: 0ms !important;
|
||||
animation-duration: 0ms !important;
|
||||
}
|
||||
}
|
||||
67
frontend/src/lib/theme.svelte.ts
Normal file
67
frontend/src/lib/theme.svelte.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
export type Theme = 'system' | 'light' | 'dark';
|
||||
export type ResolvedTheme = 'light' | 'dark';
|
||||
|
||||
const STORAGE_KEY = 'mangalord-theme';
|
||||
|
||||
function readStored(): Theme {
|
||||
if (typeof localStorage === 'undefined') return 'system';
|
||||
const v = localStorage.getItem(STORAGE_KEY);
|
||||
return v === 'light' || v === 'dark' ? v : 'system';
|
||||
}
|
||||
|
||||
function systemPref(): ResolvedTheme {
|
||||
if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined') return 'light';
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
function resolve(value: Theme): ResolvedTheme {
|
||||
return value === 'system' ? systemPref() : value;
|
||||
}
|
||||
|
||||
function apply(resolved: ResolvedTheme) {
|
||||
if (typeof document === 'undefined') return;
|
||||
document.documentElement.setAttribute('data-theme', resolved);
|
||||
}
|
||||
|
||||
class ThemeStore {
|
||||
value: Theme = $state('system');
|
||||
resolved: ResolvedTheme = $state('light');
|
||||
private mql: MediaQueryList | null = null;
|
||||
private mqlListener: ((e: MediaQueryListEvent) => void) | null = null;
|
||||
|
||||
init() {
|
||||
if (typeof window === 'undefined') return;
|
||||
this.value = readStored();
|
||||
this.resolved = resolve(this.value);
|
||||
apply(this.resolved);
|
||||
this.mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
this.mqlListener = () => {
|
||||
if (this.value === 'system') {
|
||||
this.resolved = systemPref();
|
||||
apply(this.resolved);
|
||||
}
|
||||
};
|
||||
this.mql.addEventListener('change', this.mqlListener);
|
||||
}
|
||||
|
||||
set(next: Theme) {
|
||||
this.value = next;
|
||||
if (next === 'system') {
|
||||
if (typeof localStorage !== 'undefined') localStorage.removeItem(STORAGE_KEY);
|
||||
} else if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem(STORAGE_KEY, next);
|
||||
}
|
||||
this.resolved = resolve(next);
|
||||
apply(this.resolved);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.mql && this.mqlListener) {
|
||||
this.mql.removeEventListener('change', this.mqlListener);
|
||||
}
|
||||
this.mql = null;
|
||||
this.mqlListener = null;
|
||||
}
|
||||
}
|
||||
|
||||
export const theme = new ThemeStore();
|
||||
Reference in New Issue
Block a user