#!/usr/bin/env python3
"""
Devlin Checkout Geo Flash — WordPress.org listing asset generator.
Design tokens and layout follow docs/DESIGN-SYSTEM.md §7 exactly.
Produces the authoritative icon, banner, screenshot PNGs, and SVG sources for
submission directly in the .wordpress-org folder root.
Run: python3 .wordpress-org/generate_assets.py
Requires: cairosvg (pip install cairosvg)
"""
import pathlib
import sys
import cairosvg
sys.dont_write_bytecode = True
ROOT = pathlib.Path(__file__).parent
# ── Design tokens (DESIGN-SYSTEM.md §7.1) ─────────────────────────────────
PAPER = "#f7f1e3"
PAPER_STR = "#efe4d0"
PAPER_LT = "#fffcf7"
INK = "#1c2220"
MUTED = "#5c665d"
ACCENT = "#8b5e34"
ACCENT_S = "#4d2f1b"
GREEN = "#375947"
RED = "#b44f2f"
WARN = "#b1772f"
# WP admin chrome colours
WP_DARK = "#1d2327"
WP_BLUE = "#2271b1"
WP_MUTED = "#a8b1b8"
WP_WHITE = "#ffffff"
WP_BODY = "#f0f0f1"
WP_SUB_BG = "#101517"
# Storefront / toast colours
SF_BG = "#f9fafb"
TOAST_BG = "#ffffff"
TOAST_BD = "#e5e7eb"
TOAST_EYE = "#6b7280"
TOAST_TTL = "#111827"
TOAST_SHAD = "rgba(15,23,42,0.12)"
# Fonts (DESIGN-SYSTEM.md §7.2 – system stacks, no remote dependencies)
F_SERIF = "Iowan Old Style, Georgia, serif"
F_MONO = "American Typewriter, Courier New, monospace"
F_SANS = "Avenir Next, Segoe UI, sans-serif"
def export(svg: str, src_name: str, sizes: list) -> None:
"""Write SVG source and export PNGs at the requested output sizes."""
p = ROOT / src_name
p.write_text(svg, encoding="utf-8")
for w, h, out in sizes:
op = ROOT / out
cairosvg.svg2png(url=str(p), write_to=str(op), output_width=w, output_height=h)
print(f" created {out} ({w}×{h}, ~{op.stat().st_size // 1024} KB)")
# ════════════════════════════════════════════════════════════════════════════
# ICON — 512×512 lightning bolt mark on warm cream
# ════════════════════════════════════════════════════════════════════════════
def icon_svg() -> str:
WP_BLUE = "#2271b1"
WP_WHITE = "#ffffff"
return f"""\
"""
# ════════════════════════════════════════════════════════════════════════════
# BANNER — 1544×500 (brand left, admin mockup right)
# ════════════════════════════════════════════════════════════════════════════
def banner_svg() -> str:
W, H = 1544, 500
CX, CY, CW, CH = 632, 40, 840, 420
CR = 4
WP_DARK = "#1d2327"
WP_BODY = "#f0f0f1"
WP_BLUE = "#2271b1"
WP_WHITE = "#ffffff"
WP_MUTED = "#a8b1b8"
F_SANS = "Avenir Next, Segoe UI, sans-serif"
return f"""\
"""
# ════════════════════════════════════════════════════════════════════════════
# SCREENSHOT 1 — 1280×960 WordPress admin plugin page
# ════════════════════════════════════════════════════════════════════════════
def screenshot1_svg() -> str:
"""WordPress admin screenshot showing the native WooCommerce admin page."""
W, H = 1280, 960
# --- chrome dimensions ---
BAR_H = 32
SIDE_W = 160
CX, CY = SIDE_W, BAR_H
CW, CH = W - SIDE_W, H - BAR_H
# --- content layout ---
PX = CX + 20 # page left padding
PW = CW - 40 # page content width
TABS_Y = CY + 12
H1_Y = TABS_Y + 32 + 14
SHELL_Y = H1_Y + 42
# --- card dimensions ---
SC_Y, SC_H = SHELL_Y, 272 # settings card
GR_Y, GR_H = SC_Y + SC_H + 14, 196 # grid row
GL_W = int(PW * 0.60) # runtime card width
GR_W = PW - GL_W - 14 # preview card width
# --- native WP/WC tokens ---
BD = "#c3c4c7"
BODY_BG = "#f0f0f1"
CARD_BG = "#fff"
H1_COL = "#1d2327"
TXT = "#1d2327"
MUT = "#50575e"
BLUE = "#2271b1"
BLUE_LT = "#e8f0fb"
GREEN = "#00a32a"
GRN_BG = "#edfaef"
GRN_BD = "#b8e6be"
LBL = "#1d2327"
# card helper
def card(x, y, w, h):
return (
f'' )
# label / value row helper
def row(th_text, td_el, y, TH_W=190):
return f"""
{th_text}
{td_el}"""
return f"""\
"""
# ════════════════════════════════════════════════════════════════════════════
# SCREENSHOT 2 — 1280×960 WooCommerce storefront + toast
# ════════════════════════════════════════════════════════════════════════════
def screenshot2_svg() -> str:
"""WooCommerce storefront shop page with toast notification."""
W, H = 1280, 960
# Toast dimensions and position (bottom-right, ~380px wide)
TW, TH = 380, 76
TX = W - TW - 20
TY = H - TH - 20
# Header bar dimensions
HDR_H = 72
# Nav bar (below header)
NAV_H = 44
# Storefront elements
STORE_COL_1 = 280 # sidebar width
MAIN_X = STORE_COL_1
MAIN_W = W - STORE_COL_1 - 32
GRID_COLS = 3
PROD_W = (MAIN_W - 40) // GRID_COLS # ~380
PROD_H = 320
def product_card(col, row):
x = MAIN_X + col * (PROD_W + 16)
y = HDR_H + NAV_H + 60 + row * (PROD_H + 24)
return f"""\
Add to cart"""
products = "\n".join(
product_card(c, r)
for r in range(2)
for c in range(GRID_COLS)
if (r * GRID_COLS + c) < 5 # show 5 products
)
return f"""\
"""
# ════════════════════════════════════════════════════════════════════════════
# MAIN — export all assets
# ════════════════════════════════════════════════════════════════════════════
if __name__ == "__main__":
print("Generating Devlin Checkout Geo Flash WordPress.org assets …\n")
export(
icon_svg(), "icon.svg",
[
(128, 128, "icon-128x128.png"),
(256, 256, "icon-256x256.png"),
],
)
export(
banner_svg(), "banner.svg",
[
(772, 250, "banner-772x250.png"),
(1544, 500, "banner-1544x500.png"),
],
)
export(
screenshot1_svg(), "screenshot-admin.svg",
[
(1280, 960, "screenshot-1.png"),
],
)
export(
screenshot2_svg(), "screenshot-storefront.svg",
[
(1280, 960, "screenshot-2.png"),
],
)
print("\nDone. All assets written to .wordpress-org/")