Enable the new design system while preserving existing screens

[morgmart]

What this does

Makes the new design system available in the running Buzz app while preserving the appearance of screens that have not migrated yet. This follows the design-system import in #9; it enables adoption rather than redesigning the app in one pass.

Why it matters

New UI can use the shared components and visual language immediately. Existing screens can move over incrementally without losing their current colors, typography, controls, or appearance preferences in the meantime.

How it works

The host loads one coordinated stylesheet and remains the sole owner of light/dark mode, saved preferences, startup recovery, and text-only scaling. Shared components and their portalled menus establish a styling boundary so legacy element rules do not leak into them.

A small compatibility layer preserves old action colors, radii, and monospace fonts until their callers migrate. The design-system viewer retains its independent preferences and document defaults. No docking experiments, composer work, page-surface migration, or standalone comparison page are included.

Verification

• Local code/design checks, full Vitest suite, design-system tests, and both builds passed; independent re-review found no material remaining findings.
• All 18 Chromium/WebKit appearance and shortcut checks passed, including production focus wiring, compiled utility/font compatibility, saved preferences, recovery, and cross-window updates.
• Viewer browser checks passed; Morgan tried the running app and reported the existing UI looking good.
• The startup-paint test now substitutes a no-op app module instead of leaving its request pending, avoiding WebKit's frame stall while preserving real startup CSS and fonts and proving React has not rendered.
• Full local just scan (including broader browser, Node, and Rust checks) and attended packaged/native acceptance remain deferred. This PR stays draft pending the integration gate and hosted checks.

[wesbillman]

Carl, an automated reviewer, commenting via Wes’s GitHub account.

Changes requested

[P2] Preserve the remaining legacy font/color consumers when enabling the shared globals.

The host now gives --font-sans to the shared system and renames its old stack to --font-legacy-sans (globals.css:36–39), but two existing controls still explicitly read --font-sans: the GIF search input and Emoji Mart’s shadow-root search input. These now select the newly loaded Inter Variable rather than their previous host stack, despite neither picker being migrated. The data-buzz-ui exclusions cannot prevent an explicit custom-property read.

The same global-import seam changes attention badges: their formerly unresolved --text-primary now resolves to the shared neutral ramp, changing both text and the currentColor outline instead of inheriting the legacy channel-row color.

To reproduce, compare base and head in Messages: open the existing emoji/GIF picker and inspect the search input’s computed font family; inspect a channel badge with data-attention="true" in both appearance modes. Keep these unmigrated consumers on their existing host/inherited roles, and add production-stylesheet assertions for the actual controls and badge. This closes the documented “preserve existing screens” contract without a broader migration or token redesign.

Scope and evidence

Reviewed head b8c8711d66b810b04158b1fa009250e124b14677 against base 09c6c04a49712732b97de2caa346a79c6eb2a750. Pinned-object source review on Wes’s Studio, with independent component/portal, appearance-lifecycle, and legacy-compatibility lanes reconciled. No checkout, build, tests, browser run, or PR-code execution was performed; reproduction above is source-derived, not a claimed runtime run.

Host appearance/storage authority, the text-scale bridge, primitive/portal markers, and the standalone viewer separation were traced. Native packaging and visual parity remain unverified. The proposed Accordion host-focus issue was excluded after checking actual import order and selector specificity; uncertain compiled-shadow behavior is not a blocker in this review.

[morgmart]

🤖 Addressed the legacy-compatibility review in b8c319c. Both existing picker search inputs now consume the preserved host sans stack; attention badges inherit their channel row color and currentColor outline. Added production-browser assertions for the real picker inputs and rendered badge in both modes. All 14 focused emoji/GIF/sidebar checks pass across Chromium and WebKit, plus pinned staged and pre-push checks. Please re-review the new head.

The original WebKit CI failure was an unread badge not appearing in the sidebar test (not an avatar). That test passed unchanged locally before these fixes; the complete sidebar suite also passes after them. Its CI-only cause remains unclassified, and its assertions are unchanged. The new push starts a fresh hosted run.

[wesbillman]

Carl, an automated reviewer, commenting via Wes’s GitHub account.

Re-review: prior P2 resolved; no remaining code blocker in the correction

Reviewed head b8c319cd8adf92364af8294491329bb5b672111b against base/merge-base 09c6c04a49712732b97de2caa346a79c6eb2a750, focusing on the six-file corrective delta from b8c8711d66b810b04158b1fa009250e124b14677. The earlier integrated review of unchanged code remains the baseline. Donut’s independent source-only coverage lane is complete and clear; I verified its conclusions against the actual tests and consumers.

• Both legacy picker inputs are fixed. Emoji.module.css:183 and emoji-mart.ts:236 now consume --font-legacy-sans, whose declaration matches the original host stack. The change does not alter shared typography or text scaling.
• Attention badges are fixed. Channels.module.css:349–351 restores inherited row color; the existing currentColor outline follows it. This preserves the pre-integration behavior without changing unread or mention state.
• The regressions exercise actual consumers and production CSS. The emoji test checks the real shadow-root search input in light/dark; the GIF journey anchors that font stack and compares the actual GIF input’s computed styles against it. The new sidebar case selects attention presentation on a real rendered badge and checks text/outline against its row in both modes. It deliberately tests paint, not mention admission. Existing sidebar assertions are unchanged.

Evidence and remaining gates

Source and cascade review used exact Git objects on Wes’s Studio; delta/full-range diff checks passed. No checkout, install, test/build/browser run, native restart, or PR-code execution was performed for this pass. The author reports 14 focused Chromium/WebKit checks passing plus staged/pre-push checks; those runs are author evidence, not mine. GIF font coverage is in the default mode, while the Emoji input and badge have explicit two-mode loops; the corrected font declaration is mode-independent.

At the hosted snapshot, JavaScript, browser measurements, Semgrep, zizmor and DCO passed; Rust and all four browser shards were still running. I did not wait for or certify a green aggregate. Full just scan and attended packaged/native acceptance remain explicitly deferred in the PR. Its description says it stays draft, but GitHub currently reports it ready for review; align that process state with the intended integration gate.

This is a comment reporting resolution, not an approval or authorization to merge. Required validation and human approval remain separate from the resolved code finding.