Phase 2: Design Extraction

Extract design tokens from the WordPress theme source and live demo.

2.1 Analyze the Live Site

Use agent-browser to extract computed styles:

agent-browser eval "(() => {
  const body = getComputedStyle(document.body);
  const header = document.querySelector('header, .site-header');
  return JSON.stringify({
    body: {
      fontFamily: body.fontFamily,
      fontSize: body.fontSize,
      color: body.color,
      background: body.backgroundColor,
    },
    header: header ? {
      background: getComputedStyle(header).backgroundColor,
      height: getComputedStyle(header).height,
    } : null,
  }, null, 2);
})()"

2.2 Extract Design Tokens

Read the theme's CSS files. Look for:

style.css           # Main stylesheet (has theme header)
assets/css/         # Additional stylesheets
theme.json          # Block themes (WP 5.9+) - structured design tokens

CSS Variable Mapping

WP Pattern	EmDash Variable
Body font family	`--font-body`
Heading font	`--font-heading`
Primary color	`--color-primary`
Background	`--color-base`
Text color	`--color-contrast`
Content width	`--content-width`

Block Theme (theme.json)

Block themes store design tokens in theme.json:

{
	"settings": {
		"color": {
			"palette": [{ "slug": "primary", "color": "#0073aa", "name": "Primary" }]
		},
		"typography": {
			"fontFamilies": [{ "fontFamily": "'Open Sans', sans-serif", "slug": "body" }]
		},
		"layout": {
			"contentSize": "650px",
			"wideSize": "1200px"
		}
	}
}

2.3 Create Base Layout

Create src/layouts/Base.astro with:

Extracted CSS variables in :root
Header/footer structure matching WP theme
Font loading (Google Fonts or local)
Responsive breakpoints

CSS Variables Template

:root {
	/* Colors */
	--color-base: #ffffff;
	--color-contrast: #1a1a1a;
	--color-primary: #0073aa;
	--color-accent: #ff6b35;
	--color-muted: #6b7280;
	--color-border: #e5e7eb;

	/* Typography */
	--font-body: system-ui, sans-serif;
	--font-heading: Georgia, serif;

	/* Font sizes */
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: clamp(2.5rem, 5vw, 3rem);

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;

	/* Layout */
	--content-width: 720px;
	--wide-width: 1200px;
	--header-height: 80px;
}

See references/design-extraction.md for detailed extraction techniques.

2.7 KiB Raw Blame History