themes-earthen/manifest.yaml
Alex Dunmow 8b8fb4d65d feat(earthen): Wave A theme lane — 49 overrides, 7 templates, seed (WO-TF-016)
Deliver the full conservation-nonprofit theme per OVERRIDE-CONTRACT (Wave A).

- 49 mandatory builtin overrides in templates/overrides/earthen/ (chrome,
  marketing, primitives, commerce, blog family, auth surface, page-suggestions),
  re-skinned from the frozen builtins into botanical/paper-grain chrome with
  all content fields, custom tags, provider vars, HTMX/auth wiring and JS
  preserved verbatim. Stale button/card/image/text/heading overrides fixed to
  the new field contract (link/style/label, media/text via {% img %}).
- 7 page templates: default, full-width, landing, article, blog-index, contact,
  auth.
- Blocks rework: impact_metrics/partner_logos/botanical_divider/footer converted
  to builtin overrides (deleted as theme blocks); donation_cta and field_note
  kept; impact_report added. Persona blocks now 3.
- 5 presets (all 19 tokens; mossbed/sage-morning/ember-loam are dual-mode).
- Bundled Fraunces + Work Sans woff2 (OFL) in assets/fonts/; fonts.json,
  RECOMMENDED_FONTS.md, RECOMMENDED_ICONS.md; required_icon_packs=[lucide].
- Seed: home/about/blog(3 posts)/contact/login as Rootline Trust, contact-form
  formConfig.targetTable=contact_submissions + row_inserted email-admins workflow.
- Themed email-safe wrapper; on-theme master pages; CSS-first botanical motion.

Verified: make (build) exit 0, make archive-check exit 0, check-safety exit 0.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 11:13:01 +08:00

227 lines
8.2 KiB
YAML

# Earthen theme — codeless .bnp manifest (WO-WZ-021 Phase B1).
# Synthesized into manifest.pb by `ninja plugin build` (no plugin.wasm).
theme_presets: presets.json
bundled_fonts: fonts.json
master_pages: master_pages.json
required_icon_packs: [lucide]
system_templates:
- key: earthen
title: Earthen
description: "Botanical nonprofit theme in moss, clay, sage and cream"
page_templates:
- system: earthen
key: default
title: Default
description: "Standard nonprofit page with header, main and footer"
slots: [header, main, footer]
- system: earthen
key: landing
title: Landing
description: "Mission hero plus CTA bands for campaigns and donation drives"
slots: [hero, main, cta, footer]
- system: earthen
key: article
title: Article
description: "Long-form storytelling with byline rail"
slots: [header, lede, main, aside, footer]
- system: earthen
key: full-width
title: Full Width
description: "Edge-to-edge imagery for reports and galleries"
slots: [header, main, footer]
- system: earthen
key: blog-index
title: Field Journal
description: "Blog index with a botanical masthead, featured and post-grid slots"
slots: [header, featured, main, footer]
- system: earthen
key: contact
title: Get in Touch
description: "Contact layout with an optional aside for hours and location"
slots: [header, main, aside, footer]
- system: earthen
key: auth
title: Members
description: "Centred auth shell with wordmark and a fern crest"
slots: [main, footer]
template_overrides:
# Chrome (4)
- { template: earthen, block: navbar }
- { template: earthen, block: footer }
- { template: earthen, block: utility-bar }
- { template: earthen, block: announcement-bar }
# Marketing (12)
- { template: earthen, block: hero }
- { template: earthen, block: feature-grid }
- { template: earthen, block: rich-section }
- { template: earthen, block: stats }
- { template: earthen, block: testimonial }
- { template: earthen, block: logo-strip }
- { template: earthen, block: pricing }
- { template: earthen, block: team }
- { template: earthen, block: faq }
- { template: earthen, block: timeline }
- { template: earthen, block: cta }
- { template: earthen, block: countdown }
# Primitives (11)
- { template: earthen, block: heading }
- { template: earthen, block: text }
- { template: earthen, block: rich-text }
- { template: earthen, block: image }
- { template: earthen, block: quote }
- { template: earthen, block: divider }
- { template: earthen, block: button }
- { template: earthen, block: card }
- { template: earthen, block: gallery }
- { template: earthen, block: video-embed }
- { template: earthen, block: audio-embed }
# Commerce / local (6)
- { template: earthen, block: menu-list }
- { template: earthen, block: event-list }
- { template: earthen, block: contact-form }
- { template: earthen, block: contact-card }
- { template: earthen, block: hours-location }
- { template: earthen, block: social-links }
# Blog family (12)
- { template: earthen, block: blog-hero }
- { template: earthen, block: featured-posts }
- { template: earthen, block: related-posts }
- { template: earthen, block: popular-posts }
- { template: earthen, block: category-list }
- { template: earthen, block: post-hero }
- { template: earthen, block: post-metadata }
- { template: earthen, block: author-bio }
- { template: earthen, block: author-bio-hero }
- { template: earthen, block: newsletter-signup }
- { template: earthen, block: breadcrumbs }
- { template: earthen, block: sidebar-nav }
# Auth surface (3)
- { template: earthen, block: auth-form }
- { template: earthen, block: password-reset-form }
- { template: earthen, block: auth-status }
# System (1)
- { template: earthen, block: page-suggestions }
email_wrappers:
- earthen
css:
input_css_append: |
/* Earthen — theme utilities injected via CSSManifest.InputCSSAppend. */
/* All colour values reference the 19-token HSL custom properties so they */
/* shift with the active preset (mossbed, clay-field, wet-loam). */
/* Paper grain backdrop — a single inline SVG noise pattern keeps page weight
inside the marketplace gate (≤ 81920 bytes). */
.bg-paper-grain {
background-color: hsl(var(--background));
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20seed%3D%274%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.36%200%200%200%200%200.32%200%200%200%200%200.24%200%200%200%200.05%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-size: 240px 240px;
}
/* Botanical hairline divider — used inside .botanical-rule sections. */
.botanical-rule > span {
display: inline-block;
}
/* Hand-drawn crayon underline on h2 — uses currentColor and primary token. */
.crayon-underline {
position: relative;
padding-bottom: 0.35em;
}
.crayon-underline::after {
content: "";
position: absolute;
left: 0;
right: auto;
bottom: 0;
height: 6px;
width: 2.5em;
background-color: hsl(var(--accent) / 0.4);
border-radius: 4px 8px 6px 12px;
transform: skewY(-1deg);
}
/* Botanical drop cap — applied to the first paragraph of .drop-cap-host. */
.drop-cap-host > p:first-of-type::first-letter,
.drop-cap > p:first-of-type::first-letter,
.drop-cap::first-letter {
font-family: var(--font-heading, "Fraunces", "Playfair Display", Georgia, serif);
color: hsl(var(--primary));
float: left;
font-size: 3.4em;
line-height: 0.85;
margin: 0.15em 0.18em 0 0;
font-weight: 600;
}
/* Tile selection (donation CTA) — uses primary ring when checked. */
.earthen-tile input[type="radio"]:checked + span {
color: hsl(var(--primary));
}
.earthen-tile:has(input[type="radio"]:checked) {
box-shadow: 0 0 0 2px hsl(var(--primary));
}
/* Partner logos — grayscale at rest, full colour on hover. */
.earthen-partner-img,
.earthen-partner-fallback {
filter: grayscale(1);
opacity: 0.85;
transition: filter 200ms ease, opacity 200ms ease;
}
.earthen-partner-tile:hover .earthen-partner-img,
.earthen-partner-link:hover .earthen-partner-img,
.earthen-partner-link:focus-visible .earthen-partner-img,
.earthen-partner-tile:hover .earthen-partner-fallback,
.earthen-partner-link:hover .earthen-partner-fallback {
filter: grayscale(0);
opacity: 1;
}
/* Paper-grain frame around field-note imagery. */
.earthen-paper-frame {
box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.6);
}
.earthen-paper-frame-inner {
box-shadow: 0 1px 2px hsl(var(--foreground) / 0.06);
}
/* Footer links — botanical underline on hover. */
.earthen-footer-link {
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 150ms ease, border-color 150ms ease;
}
.earthen-footer-link:hover,
.earthen-footer-link:focus-visible {
color: hsl(var(--primary-foreground));
border-bottom-color: hsl(var(--accent));
}
/* Buttons — focus ring follows the active preset. */
.earthen-button:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
/* Article aside — keeps the byline rail comfortable on mobile. */
.earthen-aside {
color: hsl(var(--muted-foreground));
}
/* Ensure article main column uses the Spectral body fallback. */
.earthen-article {
font-family: var(--font-body, "Spectral", Georgia, serif);
color: hsl(var(--foreground));
}
/* Divider glyph — softer stroke at rest. */
.earthen-glyph {
color: hsl(var(--primary));
}