Update illustration colors and add dot grid background by shaunandrews · Pull Request #3004 · Automattic/studio

shaunandrews · 2026-04-07T18:31:44Z

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

Sign out of WordPress.com (or use a fresh profile)
Select any local site, open the Sync tab
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
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
Hover over the dot grid area — crosses should repulse from cursor; clicking should produce a ripple

Sync tab — signed in

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

Preview tab — signed out

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

Preview tab — signed in

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

Color contrast

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

Reduced motion

Enable "Reduce motion" in macOS System Settings → Accessibility → Display
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

…grid background Rebuild the Sync tab illustration SVG with proper light/dark mode color switching. Update the Preview tab browser chrome to use light colors in light mode. Add an interactive DotGrid canvas component behind both illustrations with a radial gradient mask for a clean fade effect. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Extract shared IllustrationGrid component (DotGrid + radial mask) used by both Sync and Preview tabs - Replace hardcoded SVG colors with CSS custom properties (--color-frame-surface, --color-frame-bg, etc.) so illustrations adapt automatically to theme changes - Scope SVG class names with short prefixes (sti-, sds-) to avoid collisions - Add basic tests for DotGrid and IllustrationGrid components Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

When reduced motion is preferred, render a static grid with no intro animation, hover repulsion, or click ripples. Mouse event listeners are not attached at all. The grid still responds to resize and color scheme changes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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 · 2026-04-08T08:52:44Z

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 · 2026-04-09T12:00:10Z

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

wojtekn · 2026-04-09T12:06:38Z

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

katinthehatsite · 2026-04-10T08:37:15Z

I will double-check this now on Windows. I think it would be nice to add it to release since it addresses accessibility concerns but we should definitely fix the scrollbars if they are present.

wpmobilebot · 2026-04-10T08:58:17Z

📊 Performance Test Results

Comparing 4fa37d0 vs trunk

app-size

Metric	trunk	`4fa37d0`	Diff	Change
App Size (Mac)	1276.55 MB	1276.59 MB	+0.04 MB	⚪ 0.0%

site-editor

Metric	trunk	`4fa37d0`	Diff	Change
load	1950 ms	1883 ms	67 ms	🟢 -3.4%

site-startup

Metric	trunk	`4fa37d0`	Diff	Change
siteCreation	8156 ms	8169 ms	+13 ms	⚪ 0.0%
siteStartup	4160 ms	4168 ms	+8 ms	⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

katinthehatsite · 2026-04-10T09:17:47Z

Actually, I also see the same problem with macOS:

…color-iterations

katinthehatsite · 2026-04-10T09:19:33Z

@wojtekn I pushed a fix for the scrollbars, could you please re-test again? I don't see them on macOS anymore but would be curious to confirm on WIndows

wojtekn · 2026-04-10T11:05:24Z

@katinthehatsite it works well on Windows now, thanks for the fix.

* Update Sync and Preview illustrations with dark mode support and dot grid background Rebuild the Sync tab illustration SVG with proper light/dark mode color switching. Update the Preview tab browser chrome to use light colors in light mode. Add an interactive DotGrid canvas component behind both illustrations with a radial gradient mask for a clean fade effect. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Extract IllustrationGrid wrapper, use CSS tokens in SVGs, add tests - Extract shared IllustrationGrid component (DotGrid + radial mask) used by both Sync and Preview tabs - Replace hardcoded SVG colors with CSS custom properties (--color-frame-surface, --color-frame-bg, etc.) so illustrations adapt automatically to theme changes - Scope SVG class names with short prefixes (sti-, sds-) to avoid collisions - Add basic tests for DotGrid and IllustrationGrid components Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Mock DotGrid in sync tests to fix canvas error in jsdom Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Respect prefers-reduced-motion in DotGrid When reduced motion is preferred, render a static grid with no intro animation, hover repulsion, or click ripples. Mouse event listeners are not attached at all. The grid still responds to resize and color scheme changes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Keep WP logo white in dark mode on blue browser, dedup resize logic Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Solve for strange sidebars --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com> Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* [skip ci] Code freeze: Update translatable strings for 1.7.8 * [skip ci] Code freeze: Add draft release notes for 1.7.8 * Add push/pull/import/export MCP tools for AI agents (#3022) Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * Sort studio code commands and subcommands alphabetically (#3027) * Moved the `code` command registration in `apps/cli/index.ts` so that top-level CLI commands appear in alphabetical order * Strip unnecessary fields in wpcom_request response (#3005) * Strip bloated plan.features from wpcom_request responses The WP.com /sites/{id} endpoint returns a plan object whose features sub-field alone is 60K+ characters, pushing the total response past Claude Code's ~100K character MCP tool result limit. The agent only needs product_slug, is_free, and expired to gate features, since the system prompt hardcodes what each plan tier can and can't do. Strip plan.features and keep only essential plan properties. * Also compact large array responses by stripping content and _links List endpoints like GET /templates can return 80K+ chars of block markup. Strip content and _links from array items when the response exceeds 80K chars — the agent can still identify items by slug/title and fetch individual ones for full content. * Add _fields prompt guidance and scope plan compaction as special case Add system prompt hint instructing the agent to use _fields on wp/v2 listing endpoints to minimize response sizes. Scope compactResponse() to only handle plan.features stripping with a clear comment that this is a special case (the API doesn't support sub-field filtering). Remove the generic array compaction in favor of prompt-driven field selection. * Add fields guidance for v1.1, rename stripOversizedFields Update system prompt to instruct the agent to use fields (v1.1) and _fields (wp/v2) to minimize response sizes, always including ID for v1.1 requests. Rename compactResponse to stripOversizedFields for clarity. * Remove indentation in JSON to save tokens * Fix dark mode visibility for error/success text in site list (#3034) * Fix dark mode onbiarding screen (#3025) Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> * Studio: Filter out deprecated warnings from fatal errors (#3018) * Filter out deprecated warnings from fatal errors * Ensure our error filtering approach is consistent with CLI * Apply changes to default exporter * Fix unit tests --------- Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> * [skip ci] Update translations * [skip ci] Bump version to 1.7.8-beta1 * CLI: ensure Studio root exists before starting code agent (#3039) * Ensure startAiAgent() checks whether ~/Studio exists before launching the Claude SDK. * Define a localeData type to fix lint error: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed. (ts 7056) * [skip ci] Bump version to 1.7.8-beta2 * Update illustration colors and add dot grid background (#3004) * Update Sync and Preview illustrations with dark mode support and dot grid background Rebuild the Sync tab illustration SVG with proper light/dark mode color switching. Update the Preview tab browser chrome to use light colors in light mode. Add an interactive DotGrid canvas component behind both illustrations with a radial gradient mask for a clean fade effect. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Extract IllustrationGrid wrapper, use CSS tokens in SVGs, add tests - Extract shared IllustrationGrid component (DotGrid + radial mask) used by both Sync and Preview tabs - Replace hardcoded SVG colors with CSS custom properties (--color-frame-surface, --color-frame-bg, etc.) so illustrations adapt automatically to theme changes - Scope SVG class names with short prefixes (sti-, sds-) to avoid collisions - Add basic tests for DotGrid and IllustrationGrid components Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Mock DotGrid in sync tests to fix canvas error in jsdom Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Respect prefers-reduced-motion in DotGrid When reduced motion is preferred, render a static grid with no intro animation, hover repulsion, or click ripples. Mouse event listeners are not attached at all. The grid still responds to resize and color scheme changes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Keep WP logo white in dark mode on blue browser, dedup resize logic Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Solve for strange sidebars --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com> Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> * Upgrade archiver to v7 to fix glob and inflight deprecation warnings (#3050) * CLI: upgrade archiver to v7 to fix glob and inflight deprecation warnings archiver@6 → archiver@7 pulls in archiver-utils@5 which uses glob@10 instead of glob@8, eliminating the glob and inflight deprecation warnings. @types/archiver@7 dropped followSymlinks from CoreOptions (it's still supported at runtime), so cast ArchiverOptions at call sites instead of patching node_modules. Also fixes the broken ProgressData named import which doesn't work with the export= module style in @types/archiver@7. * Studio: upgrade archiver to v7, drop @types/archiver patch Consistent with the CLI upgrade. Drops the @types+archiver+6.0.4 patch in favour of the same cast-based approach used in apps/cli. * Studio: remove obsolete archiver@6 runtime patch * Studio: Fix sync info icon color in dark mode (#3053) The info icons next to the push progress bar had no fill color class, defaulting to black which is invisible on the dark background. Add fill-frame-text-secondary to match the existing offline icon style. * Update CLI README with GIF and import/export/push/pull (#3029) * Update CLI README * Tweaks * More tweaks * Tweak * Wider * Enforce minimum node version in the CLI (#3049) * Enforce minimum node version in the CLI * Tweaks * Allow translations to load first * Fix sidebar top padding on Windows (#3026) * [skip ci] Update translations * [skip ci] Bump version to 1.7.8-beta3 --------- Co-authored-by: Riad Benguella <benguella@gmail.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com> Co-authored-by: Roberto Aranda <roberto.aranda@automattic.com> Co-authored-by: Bernardo Cotrim <bmmcotrim@gmail.com> Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com> Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> Co-authored-by: Jorge Costa <jorge.costa@developer.pt> Co-authored-by: Antonio Sejas <antonio@sejas.es> Co-authored-by: Shaun Andrews <shaun@automattic.com> Co-authored-by: Wojtek Naruniec <wojtek.naruniec@automattic.com> Co-authored-by: Gergely Csécsey <gergely.csecsey@automattic.com> Co-authored-by: Fredrik Rombach Ekelund <fredrik@f26d.dev> Co-authored-by: Volodymyr Makukha <nei.css@gmail.com>

shaunandrews and others added 5 commits April 7, 2026 14:31

Mock DotGrid in sync tests to fix canvas error in jsdom

e16c754

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Keep WP logo white in dark mode on blue browser, dedup resize logic

62d2fd8

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

shaunandrews marked this pull request as ready for review April 7, 2026 20:30

katinthehatsite approved these changes Apr 8, 2026

View reviewed changes

wojtekn assigned shaunandrews Apr 8, 2026

Merge branch 'trunk' into color-iterations

a247c53

Kateryna Kodonenko added 2 commits April 10, 2026 11:18

Solve for strange sidebars

a3e98da

Merge branch 'color-iterations' of github.com:Automattic/studio into …

4fa37d0

…color-iterations

wojtekn approved these changes Apr 10, 2026

View reviewed changes

wojtekn merged commit 817c962 into trunk Apr 10, 2026
10 checks passed

wojtekn deleted the color-iterations branch April 10, 2026 11:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update illustration colors and add dot grid background#3004

Update illustration colors and add dot grid background#3004
wojtekn merged 8 commits intotrunkfrom
color-iterations

shaunandrews commented Apr 7, 2026 •

edited

Loading

Uh oh!

katinthehatsite left a comment •

edited

Loading

Uh oh!

katinthehatsite commented Apr 8, 2026

Uh oh!

wojtekn commented Apr 9, 2026

Uh oh!

wojtekn commented Apr 9, 2026

Uh oh!

katinthehatsite commented Apr 10, 2026

Uh oh!

wpmobilebot commented Apr 10, 2026 •

edited

Loading

Uh oh!

katinthehatsite commented Apr 10, 2026

Uh oh!

katinthehatsite commented Apr 10, 2026

Uh oh!

wojtekn commented Apr 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

shaunandrews commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Before

After

Related issues

Proposed Changes

New components

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

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

Accessibility

Tests

Testing Instructions

Sync tab — signed out

Sync tab — signed in

Preview tab — signed out

Preview tab — signed in

Color contrast

Reduced motion

Pre-merge Checklist

Uh oh!

katinthehatsite left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

katinthehatsite commented Apr 8, 2026

Uh oh!

wojtekn commented Apr 9, 2026

Uh oh!

wojtekn commented Apr 9, 2026

Uh oh!

katinthehatsite commented Apr 10, 2026

Uh oh!

wpmobilebot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

Uh oh!

katinthehatsite commented Apr 10, 2026

Uh oh!

katinthehatsite commented Apr 10, 2026

Uh oh!

wojtekn commented Apr 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

shaunandrews commented Apr 7, 2026 •

edited

Loading

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

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

katinthehatsite left a comment •

edited

Loading

wpmobilebot commented Apr 10, 2026 •

edited

Loading