diff --git a/docs/specs/geschichten-reader-journey-spec.html b/docs/specs/geschichten-reader-journey-spec.html index 93a5a384..19fe467a 100644 --- a/docs/specs/geschichten-reader-journey-spec.html +++ b/docs/specs/geschichten-reader-journey-spec.html @@ -641,7 +641,7 @@ Artikel-Container Article containermax-w-3xl mx-auto px-4 py-8zentriert, volle Breite auf Mobile - Article sheetrounded-sm border border-line bg-surface shadow-sm px-5 py-6 sm:px-10 sm:py-10Lesebogen-Panel auf dem Canvas (siehe Mockup); BackButton bleibt außerhalb + Article sheetrounded-sm border border-line bg-sheet shadow-sm px-5 py-6 sm:px-10 sm:py-10Lesebogen-Panel zwischen Canvas und weißen Karten (Token --color-sheet); BackButton bleibt außerhalb Story titlefont-family:var(--font-display);font-size:clamp(22px,4vw,32px);color:var(--navy)Fraunces, nicht fett Back button<BackButton /> aus $lib/components/BackButton.sveltehistory.back(); nicht <a href> Metazeile diff --git a/docs/specs/lesereisen-reader-spec.html b/docs/specs/lesereisen-reader-spec.html index bbaa59cf..68be7649 100644 --- a/docs/specs/lesereisen-reader-spec.html +++ b/docs/specs/lesereisen-reader-spec.html @@ -630,7 +630,7 @@ Seitenstruktur Bedingte Logik{#if geschichte.type === 'JOURNEY'} JourneyReader {:else} StoryReader {/if}in +page.svelte von /geschichten/[id] Artikel-Containermax-w-3xl mx-auto px-4 py-8gleich wie StoryReader - Artikel-Sheetrounded-sm border border-line bg-surface shadow-sm px-5 py-6 sm:px-10 sm:py-10Lesebogen-Panel auf dem Canvas, gleich wie Story (R-2); BackButton bleibt außerhalb + Artikel-Sheetrounded-sm border border-line bg-sheet shadow-sm px-5 py-6 sm:px-10 sm:py-10Lesebogen-Panel zwischen Canvas und weißen Karten (Token --color-sheet), gleich wie Story (R-2); BackButton bleibt außerhalb Journey-Badgeinline-flex px-2 py-px rounded-sm text-[10px] font-bold uppercase tracking-widest bg-orange-50 text-orange-700 border border-orange-200 mb-2über dem Titel; nicht für STORY Titelfont-serif text-3xl text-ink leading-tight mb-4gleich wie Story Metabarflex items-center gap-3 pb-4 border-b border-subtle mb-4gleich wie Story @@ -639,12 +639,12 @@ Intro (body)font-serif text-sm text-ink-2 italic leading-relaxed mb-6 pb-4 border-b border-dashed border-subtlenur rendern wenn body nicht leer; kein HTML-Rendering — plaintext Dokument-Item Item-Zeilemb-3kein flex nötig — Karte ist full-width - Dokumentkartebg-white border border-line rounded-sm p-3 + Dokumentkartebg-surface border border-line rounded-sm p-3 Brieftitelfont-serif text-sm text-ink leading-snug mb-0.5document.title Briefmetatext-xs text-ink-3 mb-2formatDate(document.documentDate) · "von X an Y" Brief öffnen Linkinline-flex items-center gap-1 text-xs font-semibold text-ink hover:text-primaryhref="/documents/{item.document.id}" Kuratoren-Annotation - Annotationmt-3 pl-3 border-l-2 border-mint bg-surface rounded-r-sm py-1.5 pr-2nur rendern wenn item.note vorhanden + Annotationmt-3 pl-3 border-l-2 border-brand-mint bg-muted rounded-r-sm py-1.5 pr-2nur rendern wenn item.note vorhanden Annotations-Texttext-xs italic text-ink-2 leading-relaxed Interlude-Item Interlude-Blockpl-3 border-l-2 border-orange-400 bg-orange-50 rounded-r-sm py-2 pr-3 my-4item.document === null diff --git a/frontend/src/lib/geschichte/JourneyItemCard.svelte b/frontend/src/lib/geschichte/JourneyItemCard.svelte index 534aaa8a..e2275afd 100644 --- a/frontend/src/lib/geschichte/JourneyItemCard.svelte +++ b/frontend/src/lib/geschichte/JourneyItemCard.svelte @@ -25,7 +25,7 @@ const hasNote = $derived(item.note != null && item.note.trim().length > 0);
-
+

{doc.title}

{#if metaLine} @@ -58,7 +58,7 @@ const hasNote = $derived(item.note != null && item.note.trim().length > 0); {#if hasNote} -
+

{item.note}

{/if} diff --git a/frontend/src/lib/geschichte/JourneyItemCard.svelte.spec.ts b/frontend/src/lib/geschichte/JourneyItemCard.svelte.spec.ts index a3901521..6b1ca318 100644 --- a/frontend/src/lib/geschichte/JourneyItemCard.svelte.spec.ts +++ b/frontend/src/lib/geschichte/JourneyItemCard.svelte.spec.ts @@ -118,6 +118,22 @@ describe('JourneyItemCard', () => { expect(note!.className).toContain('border-brand-mint'); }); + it('card uses the surface token, not bg-white, so dark mode remaps it', async () => { + render(JourneyItemCard, { props: { item: baseItem() } }); + + const card = document.querySelector('[class*="border-line"]'); + expect(card).not.toBeNull(); + expect(card!.className).toContain('bg-surface'); + expect(card!.className).not.toContain('bg-white'); + }); + + it('annotation block is tinted with bg-muted to stand off the white card', async () => { + render(JourneyItemCard, { props: { item: baseItem({ note: 'Ein wichtiger Brief' }) } }); + + const note = document.querySelector('[class*="border-l-2"]'); + expect(note!.className).toContain('bg-muted'); + }); + it('omits annotation block when note is blank or whitespace', async () => { render(JourneyItemCard, { props: { item: baseItem({ note: ' ' }) } }); diff --git a/frontend/src/routes/geschichten/[id]/+page.svelte b/frontend/src/routes/geschichten/[id]/+page.svelte index 52eaabeb..0c2b85ad 100644 --- a/frontend/src/routes/geschichten/[id]/+page.svelte +++ b/frontend/src/routes/geschichten/[id]/+page.svelte @@ -55,7 +55,7 @@ async function handleDelete() {
{#if isJourney} diff --git a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts index 966b102e..26f5bcd0 100644 --- a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts +++ b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts @@ -78,7 +78,8 @@ describe('geschichten/[id] page', () => { const article = document.querySelector('article'); expect(article).not.toBeNull(); - for (const cls of ['bg-surface', 'border-line', 'rounded-sm', 'shadow-sm']) { + // bg-sheet sits between the sand canvas and the white cards inside the article + for (const cls of ['bg-sheet', 'border-line', 'rounded-sm', 'shadow-sm']) { expect(article!.className).toContain(cls); } }); diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css index dfd048ff..2d2c08cd 100644 --- a/frontend/src/routes/layout.css +++ b/frontend/src/routes/layout.css @@ -34,6 +34,9 @@ --color-overlay: var(--c-overlay); --color-muted: var(--c-muted); + /* Reading sheet — article panel between canvas and the white cards it contains */ + --color-sheet: var(--c-sheet); + /* Borders */ --color-line: var(--c-line); --color-line-2: var(--c-line-2); @@ -106,6 +109,7 @@ --c-surface: #ffffff; --c-overlay: #ffffff; --c-muted: #f5f4ef; + --c-sheet: #fafaf7; /* between canvas and surface — spec .g-article value */ --c-line: #e4e2d7; --c-line-2: #eeede8; @@ -213,6 +217,7 @@ --c-surface: #011526; --c-overlay: #011e38; --c-muted: #011a30; + --c-sheet: #011222; /* between canvas and surface */ --c-line: #0d3358; --c-line-2: #092843; @@ -306,6 +311,7 @@ --c-surface: #011526; --c-overlay: #011e38; --c-muted: #011a30; + --c-sheet: #011222; /* between canvas and surface */ --c-line: #0d3358; --c-line-2: #092843;