kunthawat/moreminimore-redesign

Fork 0

Files

Matt Kane 43fcb9a131 first commit

2026-04-01 10:44:22 +01:00

7.2 KiB

Raw Blame History

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):

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

Common patterns to search for:

/* 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:

{
	"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:

: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:

Background colors: document.body.style.backgroundColor
Text colors: Inspect body, headings, links
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:

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

Extract the stack:

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

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

Font Sizes

Common patterns:

/* 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

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

Spacing System

Identify the Scale

Look for consistent spacing values:

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

Create a scale:

: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

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

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

Breakpoints

Common WordPress breakpoints:

/* 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:

/* 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)

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

Card Pattern

/* 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

/* 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:

// 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:

: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);
}

7.2 KiB Raw Blame History