Align the wizard with the docs theme; stepper sidebar - #144
Merged
Conversation
…ebar The embedded wizard read like a separate app bolted into the docs site. Make the shared jsPsych Docusaurus theme the single source of truth and redesign the wizard to fit the context it appears in. Typography - Unify on Lexend Variable (the theme's brand font) across the docs chrome, docs prose, and the wizard; the wizard loads the same @fontsource-variable/lexend package instead of Google-Fonts IBM Plex. - Drop the custom.css override that forced the docs back to a system stack. Color - Retokenize every wizard --c-* value to the theme's exact tokens and adopt its roles: green is the primary CTA, orange is a <=10% accent. - Fix docs-side stray hexes (#e8973a) to theme tokens. - Two-tier danger: base for fills/borders, contrast-foreground for error text so it clears WCAG AA. Embedded entry - Lean start screen when framed: drop the redundant logo/title/description and Psych-DS explainer (the site already provides them); keep the new/open choice. Full hero retained standalone. Sidebar - Blend the nav into the content surface (no separate zone; hairline dividers) and render the steps as a vertical flow: a connector line threading circular nodes (hollow -> accent ring -> green check), filled green through completed steps, with 1rem labels. Content - Remove the redundant fixed step-title bar (the sidebar's active step carries that context); inline the Variables "Expand all" toggle; keep a visually-hidden per-step heading for accessibility. Polish - Add a branded :focus-visible keyboard ring and prefers-reduced-motion support. DESIGN.md updated throughout to match. Verified: typecheck, lint, 269 frontend tests, and the wizard build all pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
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
1 participant
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.
The embedded wizard read like a separate app bolted into the docs site — different font, different accent colors, its own welcome hero, a nav that looked like a bullet list. This makes the shared jsPsych Docusaurus theme the single source of truth and redesigns the wizard to fit the context it appears in.
Typography
@fontsource-variable/lexendpackage instead of Google-Fonts IBM Plex Sans.custom.cssoverride that forced the docs back to a system font stack.Color
--c-*value to the theme's exact tokens and adopt its roles: green is the primary CTA, orange is a ≤10% accent.#e8973a) to theme tokens.Embedded entry
Sidebar
Content
Polish
:focus-visiblekeyboard ring andprefers-reduced-motionsupport.DESIGN.mdupdated throughout to match.Verification
Root typecheck, frontend lint (0 errors), 269 frontend tests, website typecheck, and the wizard build all pass.
Note
These changes are verified by build/lint/tests but have not yet had a visual pass in a browser — worth an eyeball of
/wizardin light/dark before merge.🤖 Generated with Claude Code