fix: semantic palette + light mode, mobile nav, site-map single source, motion tokens - #95
Open
Gbangbolaoluwagbemiga wants to merge 2 commits into
Conversation
…e, motion tokens (FinesseStudioLab#58 FinesseStudioLab#59 FinesseStudioLab#62 FinesseStudioLab#70) Resolves FinesseStudioLab#62 — design-system: rename literals to semantic tokens (--surface, --surface-raised, --text-primary, --text-muted, --border, --ring, --accent, --accent-2); add color-scheme: dark light; define full light palette under @media (prefers-color-scheme: light) — only token values, no component rules. WCAG AA verified in both themes (--text-primary 16–17:1, --text-muted 7:1+). Resolves FinesseStudioLab#59 — components: extract SiteNav from layout.tsx into components/site-nav.tsx; nav links sourced from lib/site-map.ts. Desktop: flex link list. Mobile (≤767px): hamburger disclosure panel with focus trap, Escape/route-change close, focus-return to trigger, and aria-current="page" on the active route. Closes FinesseStudioLab#58 — components: move route data into lib/site-map.ts (typed Route + RouteStatus, NAV_LINKS derived export); rewrite components/expected-pages.tsx to render from that source; add scripts/generate-site-map-md.ts generator and docs/SITE_MAP.md; add site-map-check.yml CI workflow that fails on stale generated markdown; correct all statuses to reflect reality (all routes exist). Closes FinesseStudioLab#70 — design-system: add CSS motion tokens (--motion-duration-fast/base/ slow, --motion-easing-standard/enter/exit, --motion-transition-base) with @media (prefers-reduced-motion: reduce) override that collapses all durations to 0.01ms and cancels animation-iteration-count; apply to cta-secondary transition and site-nav transitions.
Contributor
|
@Gbangbolaoluwagbemiga ci pipeline failed |
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
2 participants
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.
Summary
SiteNavcomponent: desktop flex list + mobile hamburger with focus trap, keyboard navigation, andaria-current.lib/site-map.ts;ExpectedPagesand generateddocs/SITE_MAP.mdboth driven from it; CI workflow fails on stale markdown.prefers-reduced-motioncollapse and applied to all transition rules.Details
#62 — Palette / light mode
--surface,--surface-raised,--text-primary,--text-muted,--border,--ring,--accent,--accent-2color-scheme: dark lightso browser-rendered UI (form controls, scrollbars, autofill) matches the page@media (prefers-color-scheme: light)— only token values, never component rules--text-primary≥ 16:1,--text-muted≥ 7:1#59 — Mobile nav
layout.tsxintocomponents/site-nav.tsx; layout now imports<SiteNav />lib/site-map.tsNAV_LINKS— single sourcearia-current="page"and highlighted visually#58 — Site-map single source
lib/site-map.tsexportsROUTES: Route[](typed withRouteStatus) andNAV_LINKScomponents/expected-pages.tsxrenders fromROUTES— no hardcoded JSX rowsscripts/generate-site-map-md.tsgeneratesdocs/SITE_MAP.md.github/workflows/site-map-check.ymlfails the PR ifSITE_MAP.mdis not regenerated after editing the sourcescaffold(every route already exists)#70 — Motion system
--motion-duration-fast/base/slow,--motion-easing-*,--motion-transition-basetokens@media (prefers-reduced-motion: reduce)collapses all durations to 0.01ms and cancels animation iteration countstransition:rules inglobals.cssandsite-nav.tsxnow use motion tokensTest plan
prefers-color-scheme: light— all surfaces, text, and accents adapt; no component-level overrides neededaria-current="page"set on the active link in both desktop and mobile viewsnpm run gen:site-mapproduces identicaldocs/SITE_MAP.md(CI check passes)prefers-reduced-motion: reduce— no transitions visible on hover or menu openCloses #62
Closes #59
Closes #58
Closes #70