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>

Author: 4 people

apps/studio/src/components/content-tab-previews.tsx

@@ -5,6 +5,7 @@ import { useI18n } from '@wordpress/react-i18n';
 import { PropsWithChildren } from 'react';
 import { ArrowIcon } from 'src/components/arrow-icon';
 import Button from 'src/components/button';
+import { IllustrationGrid } from 'src/components/illustration-grid';
 import offlineIcon from 'src/components/offline-icon';
 import { ScreenshotDemoSite } from 'src/components/screenshot-demo-site';
 import { Tooltip } from 'src/components/tooltip';
@@ -32,7 +33,7 @@ function EmptyGeneric( {
 }: PropsWithChildren< { selectedSite: SiteDetails } > ) {
 	const { __ } = useI18n();
 	return (
-		<div className="p-8 flex justify-between max-w-3xl gap-4">
+		<div className="p-8 flex justify-between max-w-3xl gap-4 overflow-hidden">
 			<div className="flex flex-col">
 				<div className="a8c-subtitle mb-1">{ __( 'Share a preview of your Studio site' ) }</div>
 				<div className="w-[40ch] text-frame-text-secondary a8c-body">
@@ -69,9 +70,9 @@ function EmptyGeneric( {
 				</div>
 				{ children }
 			</div>
-			<div className="flex flex-col shrink-0 items-end">
+			<IllustrationGrid>
 				<ScreenshotDemoSite site={ selectedSite } />
-			</div>
+			</IllustrationGrid>
 		</div>
 	);
 }