397 lines
7.2 KiB
Markdown
397 lines
7.2 KiB
Markdown
# 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);
|
|
}
|
|
```
|