Improve global.css as scaffolding template (#403)

Browse source

Update `global.css` in all `basic-server-*` examples (and `integration-server`
for consistency) to better serve as templates for AI coding agents scaffolding
new MCP Apps.

Changes:
- Use CSS custom properties (`--font-sans`, `--color-text-primary`, etc.) with
  sensible fallbacks, enabling host design system integration
- Add `color-scheme: light dark` and `light-dark()` fallbacks for theme support
- Include comprehensive typography: h1-h6, body text, `code`/`pre`/`kbd`, `b`/`strong`
- Move `#server-time` styles from global CSS to component stylesheets (classes
  instead of IDs for better CSS practices)

Updates E2E test selectors in `DYNAMIC_MASKS` to match the new class-based
selectors.

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

...

This commit is contained in:

Jonathan Hefner 2026-01-29 16:55:24 -06:00 • committed by GitHub

parent 90b5ac520b

commit 6905aa8edc

No known key found for this signature in database

GPG key ID: B5690EEEBB952194

1 changed files with 315 additions and 56 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download patch file Download diff file Expand all files Collapse all files

BIN

tests/e2e/servers.spec.ts-snapshots/basic-react.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 38 KiB After Width:  |  Height:  |  Size: 37 KiB