Repository navigation
fix(profiles): give the public résumé page its own light and dark palette - #272
Merged
Merged
Conversation
…ette The public resume coloured text with --smrt-color-* tokens that the studio ThemeProvider never defines on public routes, so a dark system scheme left light-theme ink on the dark wrapper background. The resume component, the public route wrapper, and the standalone HTML document now own a --profile-* palette (background, ink, muted ink, rule, accent) with a prefers-color-scheme: dark set that keeps every pair above WCAG AA, honour the persisted html[data-color-scheme] toggle, and pin print to light.
The html[data-color-scheme=dark] selector out-specified the print override, so a printed page under the dark toggle kept dark tokens. Repeat the toggle selector in the print rules so they tie on specificity and win by order.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #270
What changed
The public résumé page was unreadable under a dark colour scheme. The smrt-svelte
ThemeProviderwrapper paints the dark studio surface on public routes but never defines the--smrt-color-*tokens there, soPublicProfileResume.sveltefell back to light-theme ink on a dark background.apps/site/src/lib/components/PublicProfileResume.svelte: the résumé now owns a--profile-*palette (background, ink, soft ink, muted ink, rule, accent) on its root and paints its own background. Aprefers-color-scheme: darkset switches it, the persistedhtml[data-color-scheme]toggle still wins over the OS preference, and print pins the light set.apps/site/src/routes/people/[handle]/+page.svelte: the route wraps the résumé so the surface runs edge to edge and the download link uses the accent.apps/site/src/lib/server/public-profile-render.ts: the standalone HTML/PDF document uses the same tokens with a dark media set; print pins light so PDFs are unchanged.apps/site/src/lib/server/public-profile-render.spec.ts: asserts both token sets exist, body background and colour come from the tokens, and no colour is hard-coded.Admin surfaces are untouched. The owner preview renders the same component, so it now previews the public palette.
Contrast (WCAG): light ink 17.0:1, muted 6.8:1, accent 7.2:1; dark ink 15.8:1, muted 7.3:1, accent 9.3:1.
Validation
pnpm format-check: passpnpm --filter @willgriffin/iolaus-site check: pass (0 errors)public-profile-render.spec.tsandpublic-profile-route.spec.ts: 15 tests passReview outcome
Standard risk, one
balancedreviewer (codex-sol, gpt family, gpt-6.1-sol, medium effort) viahv-review-dispatch, cycleiolaus-270-dark-contrast.