# Design Extraction Guide

Extract design tokens from WordPress themes for use in EmDash.

## CSS Variable Extraction

### Finding Design Tokens in Classic Themes

Look in these files (in order of priority):

1. **`style.css`** - Main stylesheet, often has custom properties
2. **`assets/css/custom-properties.css`** - Some themes separate variables
3. **`inc/customizer.php`** - Default values for customizer options
4. **`functions.php`** - Inline styles with defaults

Common patterns to search for:

```css
/* Root variables */
:root {
  --primary-color: #0073aa;
  --font-family: 'Open Sans', sans-serif;
}

/* Theme-specific prefixes */
--theme-name-color-primary
--wp--preset--color--primary
```

### Finding Design Tokens in Block Themes (theme.json)

Block themes (WordPress 5.9+) store design tokens in `theme.json`:

```json
{
	"settings": {
		"color": {
			"palette": [
				{ "slug": "primary", "color": "#0073aa", "name": "Primary" },
				{ "slug": "secondary", "color": "#23282d", "name": "Secondary" }
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "'Open Sans', sans-serif",
					"slug": "body",
					"name": "Body"
				}
			],
			"fontSizes": [{ "size": "1rem", "slug": "medium", "name": "Medium" }]
		},
		"spacing": {
			"units": ["px", "em", "rem", "%"],
			"spacingSizes": [{ "size": "1rem", "slug": "20", "name": "Small" }]
		},
		"layout": {
			"contentSize": "650px",
			"wideSize": "1200px"
		}
	}
}
```

Convert to EmDash CSS variables:

```css
:root {
	/* Colors from theme.json palette */
	--color-primary: #0073aa;
	--color-secondary: #23282d;

	/* Typography */
	--font-body: "Open Sans", sans-serif;
	--font-size-medium: 1rem;

	/* Layout */
	--content-width: 650px;
	--wide-width: 1200px;

	/* Spacing */
	--space-20: 1rem;
}
```

## Color Extraction

### From Live Site

Use browser DevTools or automation:

1. **Background colors**: `document.body.style.backgroundColor`
2. **Text colors**: Inspect body, headings, links
3. **Accent colors**: Buttons, links, highlights

Common elements to check:

- Body background and text
- Header/footer backgrounds
- Link colors (normal, hover, visited)
- Button colors (primary, secondary)
- Border colors
- Selection highlight

### Common Color Mapping

| WP Pattern       | EmDash Variable   |
| ---------------- | ------------------- |
| Background       | `--color-base`      |
| Text             | `--color-contrast`  |
| Primary brand    | `--color-primary`   |
| Secondary brand  | `--color-secondary` |
| Accent/highlight | `--color-accent-1`  |
| Muted text       | `--color-muted`     |
| Border           | `--color-border`    |
| Error            | `--color-error`     |
| Success          | `--color-success`   |

## Typography Extraction

### Font Families

Check for:

1. Google Fonts in `<head>` - `fonts.googleapis.com`
2. `@font-face` declarations in CSS
3. Font files in `assets/fonts/` or `fonts/`
4. Customizer settings for typography

Extract the stack:

```css
/* WP theme might have */
font-family: "Playfair Display", Georgia, serif;

/* Convert to EmDash */
:root {
	--font-heading: "Playfair Display", Georgia, serif;
}
```

### Font Sizes

Common patterns:

```css
/* WP theme */
body {
	font-size: 18px;
}
h1 {
	font-size: 2.5em;
}
h2 {
	font-size: 2em;
}

/* EmDash with clamp for responsiveness */
:root {
	--font-size-base: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
	--font-size-xl: clamp(1.75rem, 1vw + 1.5rem, 2rem);
	--font-size-xxl: clamp(2.15rem, 2vw + 1.5rem, 3rem);
}
```

### Line Height and Spacing

```css
/* Extract these values */
line-height: 1.6;
letter-spacing: -0.01em;
```

## Spacing System

### Identify the Scale

Look for consistent spacing values:

```css
/* Common WordPress patterns */
padding: 20px;
margin-bottom: 30px;
gap: 2rem;
```

Create a scale:

```css
:root {
	--space-10: 0.25rem; /* 4px */
	--space-20: 0.5rem; /* 8px */
	--space-30: 1rem; /* 16px */
	--space-40: 1.5rem; /* 24px */
	--space-50: 2rem; /* 32px */
	--space-60: 3rem; /* 48px */
	--space-70: 4rem; /* 64px */
	--space-80: 6rem; /* 96px */
}
```

## Layout Extraction

### Content Width

Find in:

- `.container`, `.wrapper`, `.site-content` max-width
- `theme.json` layout.contentSize
- Customizer settings

```css
/* WP theme */
.container {
	max-width: 1140px;
}
.content-area {
	max-width: 720px;
}

/* EmDash */
:root {
	--content-width: 720px;
	--wide-width: 1140px;
}
```

### Breakpoints

Common WordPress breakpoints:

```css
/* Find in theme CSS */
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
```

Document for use in Astro:

```css
/* EmDash breakpoints */
@media (max-width: 1024px) {
	/* Tablet landscape */
}
@media (max-width: 768px) {
	/* Tablet portrait */
}
@media (max-width: 640px) {
	/* Mobile */
}
```

## Component Patterns

### Header Pattern

Identify header structure:

- Logo position (left, center)
- Navigation style (horizontal, hamburger)
- Background (solid, transparent, sticky)

```css
/* Extract key values */
.site-header {
	height: 80px;
	background: #ffffff;
	position: sticky;
	top: 0;
	z-index: 100;
}
```

### Card Pattern

```css
/* WP card styles */
.post-card {
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* EmDash equivalent */
:root {
	--radius-card: 8px;
	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
}
```

### Button Pattern

```css
/* WP button */
.button,
.wp-block-button__link {
	padding: 12px 24px;
	border-radius: 4px;
	font-weight: 600;
	text-transform: uppercase;
}

/* EmDash */
.btn {
	padding: var(--space-30) var(--space-40);
	border-radius: var(--radius-button);
	font-weight: 600;
}
```

## Automated Extraction Script

For complex themes, consider a script approach:

```javascript
// Run in browser console on live WP site
const styles = getComputedStyle(document.body);
const tokens = {
	colors: {
		background: styles.backgroundColor,
		text: styles.color,
	},
	typography: {
		fontFamily: styles.fontFamily,
		fontSize: styles.fontSize,
		lineHeight: styles.lineHeight,
	},
};

// Check header
const header = document.querySelector("header, .site-header");
if (header) {
	const headerStyles = getComputedStyle(header);
	tokens.header = {
		background: headerStyles.backgroundColor,
		height: headerStyles.height,
	};
}

console.log(JSON.stringify(tokens, null, 2));
```

## Output Template

Final CSS variables for EmDash Base.astro:

```css
:root {
	/* Colors */
	--color-base: #ffffff;
	--color-contrast: #1a1a1a;
	--color-primary: #0073aa;
	--color-secondary: #23282d;
	--color-muted: #757575;
	--color-border: #e0e0e0;

	/* Typography */
	--font-body: "Open Sans", system-ui, sans-serif;
	--font-heading: "Playfair Display", Georgia, serif;
	--font-mono: "Fira Code", monospace;

	/* Font sizes */
	--font-size-small: 0.875rem;
	--font-size-base: 1rem;
	--font-size-large: 1.125rem;
	--font-size-xl: 1.5rem;
	--font-size-xxl: 2rem;
	--font-size-xxxl: 3rem;

	/* Spacing */
	--space-20: 0.5rem;
	--space-30: 1rem;
	--space-40: 1.5rem;
	--space-50: 2rem;
	--space-60: 3rem;
	--space-70: 4rem;
	--space-80: 6rem;

	/* Layout */
	--content-width: 720px;
	--wide-width: 1200px;

	/* Components */
	--radius-small: 4px;
	--radius-medium: 8px;
	--radius-large: 16px;
	--shadow-small: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
}
```
