feat(ui): add sheet surface token between canvas and white cards
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 3m56s
CI / OCR Service Tests (pull_request) Successful in 26s
CI / Backend Unit Tests (pull_request) Successful in 4m8s
CI / fail2ban Regex (pull_request) Successful in 44s
CI / Semgrep Security Scan (pull_request) Successful in 23s
CI / Compose Bucket Idempotency (pull_request) Successful in 1m10s

The reading sheet used bg-surface (white), so the document cards inside
the article had the same background as the sheet itself. The spec's
three-level hierarchy is canvas → article panel (#FAFAF7) → white cards;
introduce --color-sheet (mode-aware) and use it on the article. Also
move JourneyItemCard from bg-white to bg-surface so dark mode remaps it,
and tint the curator annotation with bg-muted so it stands off the card.

Refs #797
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-10 22:32:10 +02:00
parent b926bdefde
commit 63acb5417f
7 changed files with 31 additions and 8 deletions

View File

@@ -55,7 +55,7 @@ async function handleDelete() {
<article
aria-labelledby="geschichte-title"
class="rounded-sm border border-line bg-surface px-5 py-6 shadow-sm sm:px-10 sm:py-10"
class="rounded-sm border border-line bg-sheet px-5 py-6 shadow-sm sm:px-10 sm:py-10"
>
<header class="mb-6">
{#if isJourney}

View File

@@ -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);
}
});

View File

@@ -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;