Refactor liquid glass surfaces and dark mode styling
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.jsonnpm run build --prefix frontendnpm run typecheck --prefix word-addinnpm run build:e2e --prefix word-addinnpm 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.