Skip to content

feat(web): adopt USWDS civic design system, word-level redline diffs, and bump LTS deps - #274

Merged
williamzujkowski merged 2 commits into
mainfrom
feat/uswds-visual-refactor
Oct 6, 2026
Merged

williamzujkowski merged 2 commits into
mainfrom
feat/uswds-visual-refactor

Conversation

@williamzujkowski

Copy link
Copy Markdown
Collaborator

Summary

This PR modernizes the US Code Tracker website with an authoritative civic design system, statutory reading enhancements, and dependency upgrades.

1. USWDS 3.x & Civic Tech Design System

  • Civic Disclosure Banner (CivicBanner.astro): USWDS usa-banner disclosure banner clarifying independence from government agencies while explaining the verifiable House OLRC XML source and transparent Git version control.
  • USWDS Color & Typographic Tokens (global.css): Calibrated official USWDS blue-warm-70v (#1A4480), blue-warm-80 (#112F4E), state-blue (#005EA2), mint-50 (#0F6E56), and warm parchment neutrals (#FAF9F6, #F0EDE8) to guarantee WCAG 2.2 AAA readability without eye glare.
  • USWDS Summary Box (SummaryBox.astro): Replaces the statute metadata bar with a structured usa-summary-box featuring legal status tags (In Force, Repealed, Transferred), reading time estimates, OLRC deep links, and a 1-click clipboard citation copy button with toast feedback.
  • USWDS Side Navigation (BaseLayout.astro): Added active state indicators (border-l-3 border-state-blue), section counts, and polished Public Sans navigation.
  • Hero & Homepage (index.astro): 4-pillar architectural cards, tabular metric cards, and recent amendment cards.

2. Legal Reading & Statutory Diff UX

  • Word-Level Legal Redline (DiffViewer.svelte): Intraline word-level LCS tokenization that highlights exact statutory phrasing changes with <del class="diff-del">/ <ins class="diff-add">, rather than whole-paragraph line diffs.
  • Split Side-by-Side Mode: Toggle between Unified Legal Redline, Side-by-Side (Split), and raw Git Patch.
  • Reader Accessibility Toolbar (ReadingToolbar.svelte): Allows readers to toggle Serif vs. Public Sans, scale font size (17px/19px/21px), and toggle reading measure (72ch vs. 92ch) with localStorage persistence.
  • "Hanging Rail" Subsection Guide Lines: Eliminates the mobile "pyramid of doom" indentation while providing subtle vertical guide rails on nested paragraphs (a), (1), (A), (i).

3. Dependency Modernization & Security

  • Upgraded Astro to 7.3.5 (resolving XSS advisory in Astro < 7.0.4).
  • Added override for postcss-selector-parser: 7.1.6 (resolving moderate ReDoS advisory).
  • Updated svelte (5.57.1), turbo (2.11.7), fast-xml-parser (5.11.2), sanitize-html (2.18.0).
  • Eliminated deprecated Astro z import and deprecated markdown.rehypePlugins options.
  • pnpm audit reports 0 known vulnerabilities.
  • pnpm test, pnpm run lint, and pnpm run typecheck pass 100%.

@williamzujkowski
williamzujkowski requested a review from a team as a code owner October 6, 2026 04:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant