feat(redesign): token foundation close-out + design handoff (#854) #884

marcel · 2026-06-16T17:16:52+02:00

marcel commented

2026-06-16 17:16:52 +02:00

Closes #854. Foundation for the Mappe Visual Redesign (milestone #15) — this must merge before the shared-primitive issues (#855–#862) fan out, because they consume these tokens and the design handoff.

What's in here

1. Design handoff as in-repo ground truth (design_handoff_familienarchiv_redesign/)
Every redesign issue cites this dir by repo-relative path; it now lives in-repo so the per-issue worktrees share one source of truth. Committed already aligned to the codebase + #854 resolutions (see below).

2. #854 token close-out (frontend/)

--radius-sm/md/full and --shadow-sm/md as first-class :root tokens in layout.css. Radius is theme-invariant; --shadow-sm/md get distinct, stronger dark values in both dark blocks (@media + [data-theme='dark'], kept in sync) since the light navy-on-sand shadow is invisible on dark surfaces.
$lib/shared/avatarPalette.ts — the canonical 10-color person/avatar palette as one exported constant (single source of truth for <Avatar>, #855). Guarded by avatarPalette.spec.ts (length 10, lowercase hex, distinct, WCAG AA).

Decisions worth a reviewer's eye

Avatar contrast (pre-authorized by #854/#855). Three §5 hues fail the ≥4.5:1 white-initials floor, so the avatar constant ships AA-darkened variants: sage #5a8a6a→#527e61 (3.98→4.65), amber #c17a00→#a46800 (3.47→4.61), sand #9a8040→#897239 (3.79→4.64). The bright originals remain the decorative tag-dot colors in layout.css (dots carry no text). Avatar palette ≠ tag palette by design.
No consumer rewiring. personFormat.ts, ReaderPersonChips, and tag dots are untouched — deferred to #855 per the issue.
Already-correct items. --c-tag-sand (not -sand-tag) and the theme localStorage key were already correct in layout.css/app.html; #854's "naming/theme-key" scope reduced to correcting the handoff docs (DESIGN_RULES §1/§4/§5, EPIC, _AUTHORING_KIT), done here.

Verification

avatarPalette.spec.ts — 4/4 green.
prettier --check + eslint — clean (full-tree pre-commit hook passed).

🤖 Generated with Claude Code

Closes #854. Foundation for the **Mappe Visual Redesign** (milestone #15) — this must merge before the shared-primitive issues (#855–#862) fan out, because they consume these tokens and the design handoff. ## What's in here **1. Design handoff as in-repo ground truth** (`design_handoff_familienarchiv_redesign/`) Every redesign issue cites this dir by repo-relative path; it now lives in-repo so the per-issue worktrees share one source of truth. Committed already aligned to the codebase + #854 resolutions (see below). **2. #854 token close-out** (`frontend/`) - `--radius-sm/md/full` and `--shadow-sm/md` as first-class `:root` tokens in `layout.css`. Radius is theme-invariant; `--shadow-sm/md` get distinct, **stronger dark values in both dark blocks** (`@media` + `[data-theme='dark']`, kept in sync) since the light navy-on-sand shadow is invisible on dark surfaces. - `$lib/shared/avatarPalette.ts` — the canonical **10-color** person/avatar palette as one exported constant (single source of truth for `<Avatar>`, #855). Guarded by `avatarPalette.spec.ts` (length 10, lowercase hex, distinct, WCAG AA). ## Decisions worth a reviewer's eye - **Avatar contrast (pre-authorized by #854/#855).** Three §5 hues fail the ≥4.5:1 white-initials floor, so the avatar constant ships **AA-darkened variants**: sage `#5a8a6a→#527e61` (3.98→4.65), amber `#c17a00→#a46800` (3.47→4.61), sand `#9a8040→#897239` (3.79→4.64). The bright originals remain the **decorative tag-dot colors** in `layout.css` (dots carry no text). Avatar palette ≠ tag palette by design. - **No consumer rewiring.** `personFormat.ts`, `ReaderPersonChips`, and tag dots are untouched — deferred to #855 per the issue. - **Already-correct items.** `--c-tag-sand` (not `-sand-tag`) and the `theme` localStorage key were already correct in `layout.css`/`app.html`; #854's "naming/theme-key" scope reduced to correcting the **handoff docs** (DESIGN_RULES §1/§4/§5, EPIC, _AUTHORING_KIT), done here. ## Verification - `avatarPalette.spec.ts` — 4/4 green. - `prettier --check` + `eslint` — clean (full-tree pre-commit hook passed). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

marcel added 2 commits 2026-06-16 17:16:53 +02:00

docs(redesign): add Mappe design handoff as milestone-15 ground truth da4d7f37ff

The binding visual spec for the Mappe Visual Redesign (milestone #15): DESIGN_RULES.md,
_AUTHORING_KIT.md, EPIC.md, and the pixel-ground-truth prototypes/*.dc.html. Every
redesign issue (#853–#882) cites this directory by repo-relative path, so it must live
in-repo for the per-issue worktrees to share one source of truth.

Docs are committed already aligned to the codebase + #854 resolutions: the live token
name is --c-tag-sand (not --c-tag-sand-tag), the theme key is localStorage['theme']
(not fa-theme), and §5 notes the AA-darkened avatar swatches shipped in avatarPalette.ts.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

feat(redesign): close out design-token foundation (#854 )

CI / Unit & Component Tests (pull_request) Successful in 5m1s

Details

CI / OCR Service Tests (pull_request) Successful in 26s

Details

CI / Backend Unit Tests (pull_request) Successful in 6m32s

Details

CI / fail2ban Regex (pull_request) Successful in 46s

Details

CI / Semgrep Security Scan (pull_request) Successful in 22s

Details

CI / Compose Bucket Idempotency (pull_request) Successful in 1m8s

Details

SDD Gate / RTM Check (pull_request) Successful in 15s

Details

SDD Gate / Contract Validate (pull_request) Successful in 22s

Details

SDD Gate / Constitution Impact (pull_request) Successful in 19s

Details

d56d80617c

Completes DESIGN_RULES §1 so the rest of the Mappe shared components have a full token
substrate:

- Add --radius-sm/md/full and --shadow-sm/md as first-class :root tokens in layout.css.
  Radius is theme-invariant; --shadow-sm/md get distinct, stronger dark values in BOTH
  dark blocks (the @media and [data-theme='dark'] selectors stay in sync) because the
  light navy-on-sand shadow is invisible on dark surfaces.
- Add $lib/shared/avatarPalette.ts: the canonical 10-color person/avatar palette as a
  single exported constant (single source of truth for <Avatar>, issue #855). Three §5
  hues failed the >=4.5:1 white-initials contrast floor and ship as AA-darkened variants
  (sage #527e61, amber #a46800, sand #897239); the bright hues stay the decorative
  tag-dot colors in layout.css. Guarded by avatarPalette.spec.ts (length, hex, distinct,
  WCAG AA).

Tag-sand naming and the theme storage key were already correct in layout.css/app.html;
this only closed the remaining token gaps. No consumer rewiring (deferred to #855).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

marcel merged commit fa510f3991 into main

2026-06-16 17:17:29 +02:00

marcel deleted branch feat/issue-854-token-foundation

2026-06-16 17:17:31 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#884