frontend: Add Wireframes and Mockups#76
Open
ebouchut wants to merge 5 commits into
Open
Conversation
Reconstruct the theme discussion (held outside this repository's tooling) into a design document: AnuPpuccin (Catppuccin Latte/Mocha) as the default theme and Soft Paper (warm paper light, Catppuccin Frappe dark) as the generated alternate, with no runtime switching in v1. Every text-on- background pair carries a WCAG contrast ratio computed from the upstream palettes; light-mode accents that fail 4.5:1 are darkened and marked as adjusted. Includes the shared structural tokens (type, spacing, shape, focus) and how BEM components consume the tokens.
Add the AnuPpuccin (default) and Soft Paper (alternate) theme stylesheets, both defining the same design tokens on :root with dark variants via prefers-color-scheme, plus base.css holding the structural tokens and all BEM components written only against token names. Add static mockups (index gallery, home, login, register, dashboard) that mirror the future Thymeleaf structure: skip link, header/nav/main/footer landmarks, labelled forms, a register error state wired with aria-describedby and aria-invalid plus a role=alert summary, accessible progress bars, visible focus styles, and a CSS-only staggered reveal that is disabled under prefers-reduced-motion. Typography: Atkinson Hyperlegible for body text (designed for low-vision legibility), Sora for display, JetBrains Mono for the decorative code card. Verified in a headless browser: light (Latte) and dark (Mocha) renders, the accessibility tree (landmarks, alert role, labelled fields), and the computed aria-describedby association on the invalid email field.
Add the annotated design documentation for the mockups: - mockups-explained.md and its French counterpart mockups-explained-fr.md (kept in sync): a cross-file walkthrough of register.html and home.html covering the HTML structure (tags, ARIA wiring, RGAA 4.1 criteria) and the CSS (BEM convention, design tokens, specificity, layout idioms). - One companion doc per mockup page under docs/design/mockups/ explaining every tag, its attributes, its structural partners, the alternatives rejected, and the RGAA criteria it serves. - One companion doc per stylesheet explaining every rule (base.css) and every token with its upstream origin and WCAG contrast ratio (both theme files).
Add a Mockups and wireframes entry to the documentation list pointing at the public read-only Figma file (high-fidelity mockups on the AnuPpuccin theme plus low-fidelity wireframes), cross-referencing the HTML mockups and their study docs under docs/design/.
Add a Design subsection to Understanding the Codebase pointing frontend contributors at the read-only Figma file (wireframes and mockups), the browsable HTML mockups, and the design token and study docs, and stating the expectation that frontend changes follow the mockups, the design tokens, and the BEM convention.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## dev #76 +/- ##
=========================================
Coverage 75.58% 75.58%
Complexity 22 22
=========================================
Files 8 8
Lines 86 86
Branches 5 5
=========================================
Hits 65 65
Misses 16 16
Partials 5 5 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
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.
No description provided.