Refactor liquid glass surfaces and dark mode styling

✅ merged · #377 · open-legal-products/mike ← open-legal-products/mike · opened 16d ago by willchen96 · merged 16d ago by willchen96 · self · +2,323-1,290 across 115 files · ↗ on GitHub

From the PR description

Summary

  • Consolidates liquid-glass styling into shared flat, subtle, float, modal, and translucent surface tiers.
  • Adds unified hover, selected, pressed, and modal-row interaction states with light and dark theme values.
  • Moves dark mode into a dedicated Settings > Appearance page and expands semantic dark-mode coverage across app surfaces.

What changed

  • Centralized surface backgrounds, borders, shadows, and interaction colors in shared web and Word add-in tokens.
  • Migrated tables, sidebars, side panels, inputs, dropdowns, pills, modal rows, chat overlays, auth screens, and workflow surfaces to the shared classes.
  • Preserved the original tab-pill selected treatment while standardizing other selected and hover states.
  • Added selected backgrounds to shared table-filter dropdowns and reduced Model Toggle rounding.
  • Added dark-mode-aware document, editor, citation, highlight, spreadsheet, and chat fade colors.
  • Consolidated MikeIcon into one shared implementation with thin web and Word adapters.
  • Replaced the citation verification information menu with an accessible popover.
  • Removed obsolete CFR/USC styling, unused color tokens, hard-coded focus fills, and the APP_SURFACE compatibility aliases.
  • Updated design-system documentation and regression coverage.

Why

Surface styling had diverged across features and many components carried copied light-only backgrounds, borders, and shadow recipes. Centralizing the material tiers and interaction states gives the app consistent depth, makes dark mode apply without component-by-component shadow overrides, and reduces future styling drift between the web app and Word add-in.

Testing performed

  • Targeted frontend Vitest suites for liquid surfaces, table filters, dropdowns, Model Toggle, citation verification, MikeIcon, settings, and modal interactions.
  • npx tsc --noEmit --project frontend/tsconfig.json
  • npm run build --prefix frontend
  • npm run typecheck --prefix word-addin
  • npm run build:e2e --prefix word-addin
  • npm run lint --prefix frontend (no errors; existing warnings remain)
  • git diff --check

Our analysis

Consolidate liquid-glass surface tiers — read the full analysis →

Think the analysis missed something the PR description covers?

Commits in this PR (2)

SHA Subject Author Date
2850ea66 refactor(frontend): consolidate liquid glass surfaces willchen96 2026-08-23 ↗ GitHub
a23287cb test(word-addin): update liquid glass assertions willchen96 2026-08-23 ↗ GitHub

Capture this PR into my fork

Download a Markdown prompt that tells Claude how to port every commit in this PR into your working tree. Run it via claude -p < capture-pull-377.md from inside the repo you want the changes in.

⬇ Download capture-pull-377.md