marcel/familienarchiv
1
0
Fork 0
Code Issues 126 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Lesereise interlude is unreadable in dark mode — light text on light orange background #801

New Issue
Open
opened 2026-06-10 22:41:01 +02:00 by marcel · 0 comments
marcel commented 2026-06-10 22:41:01 +02:00
Owner
Copy Link

Problem

Found during visual verification of #797/#800: in dark mode, the journey interlude block keeps its hardcoded bg-orange-50 (light cream) while text-ink remaps to light sand — light-on-light, effectively unreadable. The LESEREISE badge on the detail header hardcodes the same raw orange utilities.

Root cause

JourneyInterlude.svelte uses border-orange-400 bg-orange-50 and the badge in geschichten/[id]/+page.svelte uses bg-orange-50 text-orange-700 border-orange-200 — raw Tailwind colors that don't remap. The mode-aware journey-* tokens (--color-journey-tint/-journey/-journey-border, dark values #3a2a1a/#e8862a/#7a4a1e) already exist and are used by GeschichteListRow/JourneyItemRow — the reader components just predate them.

Fix

  • JourneyInterlude.svelte: border-orange-400 bg-orange-50 → border-journey-border bg-journey-tint (keep text-ink, which is mode-aware)
  • geschichten/[id]/+page.svelte badge: border-orange-200 bg-orange-50 text-orange-700 → border-journey-border bg-journey-tint text-journey
  • Update the LR-2 impl-ref rows (Journey-Badge, Interlude-Block) in docs/specs/lesereisen-reader-spec.html

Acceptance criteria

  • Interlude readable in both modes (ink on journey-tint)
  • Badge uses the same journey tokens as the list badge
  • LR-2 impl-ref updated
## Problem Found during visual verification of #797/#800: in dark mode, the journey interlude block keeps its hardcoded `bg-orange-50` (light cream) while `text-ink` remaps to light sand — light-on-light, effectively unreadable. The LESEREISE badge on the detail header hardcodes the same raw orange utilities. ## Root cause `JourneyInterlude.svelte` uses `border-orange-400 bg-orange-50` and the badge in `geschichten/[id]/+page.svelte` uses `bg-orange-50 text-orange-700 border-orange-200` — raw Tailwind colors that don't remap. The mode-aware `journey-*` tokens (`--color-journey-tint/-journey/-journey-border`, dark values `#3a2a1a`/`#e8862a`/`#7a4a1e`) already exist and are used by `GeschichteListRow`/`JourneyItemRow` — the reader components just predate them. ## Fix - `JourneyInterlude.svelte`: `border-orange-400 bg-orange-50` → `border-journey-border bg-journey-tint` (keep `text-ink`, which is mode-aware) - `geschichten/[id]/+page.svelte` badge: `border-orange-200 bg-orange-50 text-orange-700` → `border-journey-border bg-journey-tint text-journey` - Update the LR-2 impl-ref rows (Journey-Badge, Interlude-Block) in `docs/specs/lesereisen-reader-spec.html` ## Acceptance criteria - [ ] Interlude readable in both modes (ink on journey-tint) - [ ] Badge uses the same journey tokens as the list badge - [ ] LR-2 impl-ref updated
marcel added the P1-highbugui labels 2026-06-10 22:41:07 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
P0-critical
Blocks a core user journey, causes data loss, or is a security/accessibility barrier. Work on this before P1+.
 P1-high
Significant friction on a main user journey; workaround exists but is non-obvious. Next up after P0.
 P2-medium
Noticeable improvement; doesn't block anything; schedule opportunistically.
 P3-later
Cosmetic or parking-lot work; fine to stay open indefinitely.
 audit
Read-only audit / assessment work; produces a report rather than changing code
 bug
Something isn't working
 cleanup
Removal of dead code, vague comments, naming violations, and scratch artifacts
 collaboration
We want to extend the family archive to have more collaboration tools
 conversation
descoped
We will do that later
 devops
documentation
README, ARCHITECTURE, GLOSSARY, CONTRIBUTING, per-domain docs
 epic
Marker for epic-level issues that group multiple child issues
 feature
file-upload
legibility
Codebase Legibility Refactor — preparing the codebase for human evaluation and bus-factor reduction
 needs-discussion
Has an open decision or design question that must be resolved before implementation can start.
 notification
person
phase-1: security
Security hygiene — must be done first
 phase-2: container-images
Production-ready multi-stage Docker images
 phase-3: prod-compose
Production compose overlay + Caddy reverse proxy
 phase-4: spring-prod-profile
Spring Boot production configuration profile
 phase-5: backups
Database and object storage backup strategy
 phase-6: deployment-docs
.env.example, DEPLOYMENT.md, runbook
 phase-7: monitoring
Prometheus, Loki, Grafana, Alertmanager
 refactor
Code restructuring without behaviour change
 security
test
ui
UI/UX and accessibility issues
 user
No Label P1-high bug ui
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Jens marcel
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: marcel/familienarchiv#801
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?