fix(site): shared design tokens and WCAG AA fixes across catalog and template#84
Merged
Conversation
…template [skip version] The catalog and the tool-site template shared a design language but no source, so they drifted on type scale, hover colors, and the variable set (C2). Several light-mode pairs also failed WCAG AA: link hover at 1.85:1 (catalog) and 2.72:1 (template), and muted tag text at 2.74:1 (A2). Neither surface had a main landmark or skip link (A1), the catalog lacked canonical and Twitter tags (S1), and the theme toggles did not expose their state to assistive tech (A3). - New site-template/tokens.css is the single source for the shared, non-themeable tokens (neutral palette, text colors, radius, type scale, link hover). The template embeds it via a Jinja include; the catalog mirrors it in its inline :root. tests/test_design_tokens.py enforces both. Per-tool themeable values (accent, hero gradient, background) stay per-surface. Type scale and hover are now reconciled through --hero-h1, --stat-size, and --link-hover. - A2: light-mode link hover now uses --accent (#7c3aed, 5.7:1) on both surfaces and the catalog's light --text-muted is #5b6470 (5.35:1 on tinted backgrounds). All three previously-failing pairs now pass AA. - A1: both surfaces wrap content in <main id="main"> with a visually-hidden skip link. - S1: catalog head gains canonical, og:url, and Twitter card tags. - A3: both theme toggles set an aria-label reflecting the current state. Verified by rendering both surfaces in light and dark (no visual regression), recomputing the failing contrast pairs (all now >= 4.5:1), and a token parity test. Full suite: 242 passed, 1 skipped. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: TMHSDigital <TMHospitalityStrategies@gmail.com>
github-actions
Bot
added
the
documentation
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
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.
Summary
Shared design tokens and accessibility from
site-audit.md: C2, A2, A3, A1 (catalog-side), S1 (catalog-side). No VERSION bump ([skip version]).Findings addressed
site-template/tokens.cssis the single source for the shared, non-themeable tokens (neutral palette, text colors, radius, type scale, link hover). The template embeds it via{% include 'tokens.css' %}; the catalog mirrors it in its inline:root.tests/test_design_tokens.pyenforces both. Type scale and hover are reconciled through--hero-h1,--stat-size,--link-hover. Per-tool themeable values (accent, hero gradient, background) stay per-surface; container widths are documented as intentionally distinct (catalog card grid vs tool reading column).--accent(#7c3aed, 5.7:1) on both surfaces; catalog light--text-mutedis #5b6470 (5.35:1 on tinted backgrounds). The three previously-failing pairs (1.85, 2.72, 2.74) now pass AA.<main id="main">with a visually-hidden skip link.canonical,og:url, and Twitter card tags.aria-labelreflecting the current state.Verification
sync --checkpass. Full suite: 242 passed, 1 skipped.innerHTML, no Jinja leftovers).🤖 Generated with Claude Code