Update illustration colors and add dot grid background

[shaunandrews]

Summary

Update illustrations on the Sync and Preview tabs with dark mode support, interactive dot grid backgrounds, and improved color contrast for accessibility.

Before

After

Related issues

• Fixes https://linear.app/a8c/issue/STU-1477/studio-fix-color-contrast-issues-for-accessibility

Proposed Changes

New components

• DotGrid (src/components/dot-grid.tsx) — Canvas-based animated cross-pattern grid with spring physics, hover repulsion, click ripples, and an intro reveal animation. Reads color from CSS color property and responds to prefers-color-scheme changes. Respects prefers-reduced-motion: reduce — renders a static grid with no animation or mouse interactions.
• IllustrationGrid (src/components/illustration-grid.tsx) — Wrapper that places a DotGrid behind any child content with a radial gradient mask (radial-gradient(circle, black 20%, transparent 65%)) and 120px bleed past the content edges.

Sync tab illustration (sync-tab-image.tsx)

• Replaced the old SVG (274×274 with base64-encoded cross-hatch pattern) with the updated 230×218 design
• Colors now use CSS custom properties: --color-frame-surface for browser content area, --color-frame-bg for dots, --color-frame-text for connector opacity, --color-frame-surface-alt for WP logos in dark mode
• SVG class names scoped with sti- prefix, filter IDs renamed to sti-shadow-top/sti-shadow-bottom
• Wrapped in IllustrationGrid for the dot grid background

Preview tab illustration (screenshot-demo-site.tsx)

• Browser chrome colors now use CSS tokens: --color-frame-surface for frame, --color-frame-surface-alt for toolbar, --color-frame-text-secondary for arrows
• Accent shape opacity bumps from 0.2 to 0.35 in dark mode
• SVG class names scoped with sds- prefix
• Wrapped in IllustrationGrid for the dot grid background

Accessibility

• Dark mode --color-frame-text-secondary changed from #949494 to #a0a0a0 in index.css for improved WCAG contrast ratio
• DotGrid respects prefers-reduced-motion: reduce — when enabled, renders a fully static grid with no intro animation, hover repulsion, or click ripples; mouse event listeners are not attached at all

Tests

• dot-grid.test.tsx — Verifies canvas renders, className and opacity props apply correctly (canvas getContext mocked for jsdom)
• illustration-grid.test.tsx — Verifies children render and DotGrid canvas is present
• Sync test suite (sync/tests/index.test.tsx) — Added DotGrid mock to prevent canvas errors in jsdom

Testing Instructions

Sync tab — signed out

1. Sign out of WordPress.com (or use a fresh profile)
2. Select any local site, open the Sync tab
3. Light mode: Verify the illustration shows a light gray browser content area, dark WP logo with 50% opacity, dark connector dots with subtle borders, and the dot grid fading in behind the illustration
4. Dark mode: Verify the browser content area turns dark (#1a1a1a-ish), WP logos turn light gray, connector/dots invert, and the dot grid adapts color automatically
5. Hover over the dot grid area — crosses should repulse from cursor; clicking should produce a ripple

Sync tab — signed in

6. Sign in and connect a site
7. Verify the connected sites list renders normally with no visual regressions

Preview tab — signed out

8. Sign out, open the Previews tab
9. Light mode: Browser chrome should be light gray with subtle toolbar, medium gray nav arrows
10. Dark mode: Browser chrome should be dark (#2C3338-ish), arrows lighter, accent shape more saturated
11. Dot grid should appear behind the illustration with the same radial fade

Preview tab — signed in

12. Sign in, verify the preview sites list and create button work normally

Color contrast

13. In dark mode, check that secondary text (descriptions, labels) throughout the app is comfortably readable — it should be noticeably lighter than before

Reduced motion

14. Enable "Reduce motion" in macOS System Settings → Accessibility → Display
15. Verify the dot grid appears immediately as a static pattern — no intro animation, no hover/click effects

Pre-merge Checklist

• Visual review in light mode
• Visual review in dark mode
• No regressions on Sync tab when signed in
• No regressions on Previews tab when signed in
• Secondary text contrast acceptable in dark mode
• Reduced motion renders static grid
• All component tests pass (npm test -- apps/studio/src/components/tests/ apps/studio/src/modules/sync/tests/)

🤖 Generated with Claude Code

[katinthehatsite]

The changes look good to me and the accessibility contrast is better as well 👍

I noticed one thing while testing: I think the dark mode onboarding screen looks slightly too grey compared to the light mode:

I will open a separate issue to handle this though so that we are not blocking these changes.

[katinthehatsite]

One sidenote: we should double-check how these new animations look on Windows. They look great to me on macOS but I am not sure the effect is the same on Windows.

[wojtekn]

On Mac, animation works, but the window gets unnecessary scrollbars on the smallest view:

[wojtekn]

I tested it on Windows - animation works well, but the issue with scrollbars also happens there.