@the-smithy/create-hearth-site 0.19.0 → 0.21.0

package/template/src/hearth/theme/defaults.ts

@@ -0,0 +1,510 @@
+/*
+ * Every slot Hearth's code draws, and the Tailwind classes it starts with. Don't edit this file in a site: set the
+ * slots you want to change in src/theme/index.ts, which replaces them (or extends them with a function).
+ *
+ * Each slot styles one element on its own, so a slot's classes never fight another's. Variants come from the
+ * element's state, set as attributes by the code, so they're plain Tailwind variants in the slot:
+ *   on-dark:          on an inverse or accent ground (sections with a dark tone, the hero, the footer)
+ *   data-[size=full]: data-[size=small]:  data-[width=narrow]:  data-[columns=4]:  data-[fit=contain]:
+ *   data-highlight:   data-cancelled:  data-full:  data-flip:  aria-invalid:  aria-[current=page]:  has-checked:
+ *   in-data-[…]:      the same, set on an ancestor (Tailwind's in-* variant)
+ * Slots named `tone` aren't classes: they pick the ground (default, muted, inverse or accent) a block sits on.
+ * Slots under `text` are the words the code shows (labels, buttons), for sites that word them differently.
+ */
+
+const card = "rounded-2xl bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0";
+const kicker = "text-sm font-semibold uppercase tracking-[0.18em] opacity-75";
+const sectionTitle = "text-[clamp(28px,3.4vw,40px)] font-bold leading-tight tracking-tight";
+const pageTitle = "text-[clamp(32px,4vw,48px)] font-bold tracking-tight";
+const primary =
+  "inline-block w-fit rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90 on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm";
+const secondary =
+  "inline-block w-fit rounded-lg border-[1.5px] border-current/40 px-6 py-3.5 font-medium hover:border-current data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm";
+const more = "font-semibold underline underline-offset-4 after:content-['_→']";
+const inlineLink = "font-semibold text-highlight underline underline-offset-4 on-dark:text-current";
+const prose = "prose text-lg";
+const divided = "divide-y divide-line border-y border-line";
+const input = "block w-full rounded-lg border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger";
+const choice = "size-5 accent-accent";
+
+export const defaults = {
+  /* ─── The page around the content ─── */
+  page: {
+    body: "flex min-h-dvh flex-col bg-bg font-sans text-ink antialiased",
+    skipLink: "sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-surface focus:px-4 focus:py-2",
+    main: "flex-1",
+    /** Headings of the pages the code serves: /events, /fundraisers, /donate, thank-you pages, 404. */
+    title: `mb-10 ${pageTitle}`,
+    lead: "-mt-6 mb-10 max-w-2xl text-lg opacity-85",
+    back: more,
+    notFound: "py-12",
+  },
+  header: {
+    /** The header's ground: `tones` colors it, and inverse or accent turn on on-dark: inside it. */
+    tone: "default",
+    root: "relative z-30 border-b border-line",
+    announcement: "bg-accent px-4 py-2 text-center text-sm font-semibold text-accent-ink",
+    inner: "mx-auto flex max-w-site items-center justify-between gap-x-8 gap-y-3 px-4 py-4 sm:px-6",
+    brand: "flex min-w-0 items-center gap-3 text-xl font-bold",
+    logo: "h-10 w-auto",
+    names: "flex flex-col",
+    tagline: "text-sm font-normal text-muted-ink on-dark:text-current on-dark:opacity-75",
+    nav: "hidden flex-wrap items-center justify-end gap-x-6 gap-y-1 font-medium md:flex",
+    link: "py-2 hover:text-highlight aria-[current=page]:text-highlight",
+    cta: "rounded-lg bg-accent px-4 py-2 font-semibold text-accent-ink hover:opacity-90",
+  },
+  /** The menu on phones: a button that opens the links full screen. */
+  mobileNav: {
+    root: "md:hidden",
+    toggle: "inline-flex min-h-11 items-center rounded-lg px-4 font-semibold ring-1 ring-line",
+    dialog: "m-0 h-dvh max-h-none w-full max-w-none bg-bg p-0 text-ink backdrop:bg-black/40",
+    top: "flex items-center justify-between gap-4 border-b border-line px-4 py-4",
+    title: "text-xl font-bold",
+    close: "inline-flex min-h-11 items-center rounded-lg px-4 font-semibold ring-1 ring-line",
+    nav: "flex flex-col px-4 py-4",
+    link: "border-b border-line py-4 text-2xl font-semibold aria-[current=page]:text-highlight",
+    cta: "mt-8 inline-block rounded-lg bg-accent px-6 py-3.5 text-center font-semibold text-accent-ink",
+  },
+  footer: {
+    /** The footer's ground (it sets on-dark: for everything in it). */
+    tone: "inverse",
+    root: "",
+    inner: "mx-auto grid max-w-site gap-10 px-4 py-12 sm:grid-cols-3 sm:px-6",
+    about: "flex flex-col gap-2",
+    name: "text-lg font-bold",
+    tagline: "opacity-80",
+    address: "whitespace-pre-line not-italic opacity-80",
+    contact: "opacity-80 hover:opacity-100",
+    nav: "flex flex-col gap-2",
+    link: "opacity-80 hover:opacity-100",
+    social: "flex flex-col gap-2",
+    socialLink: "opacity-80 hover:opacity-100",
+    copyright: "mx-auto max-w-site px-4 pb-8 text-sm opacity-60 sm:px-6",
+  },
+
+  /* ─── Shared pieces ─── */
+  /** A full-width band: `tones` colors it, `inner` holds the content width and spacing. */
+  section: {
+    root: "",
+    inner: "mx-auto max-w-site px-4 py-16 sm:px-6 sm:py-20",
+  },
+  tones: {
+    default: "bg-bg text-ink",
+    muted: "bg-muted text-ink",
+    inverse: "bg-inverse text-inverse-ink",
+    accent: "bg-accent text-accent-ink",
+  },
+  /** Eyebrow, heading and intro over most blocks. */
+  heading: {
+    root: "mb-10 max-w-3xl",
+    eyebrow: `mb-3 ${kicker}`,
+    title: sectionTitle,
+    intro: "mt-4 text-lg leading-relaxed opacity-85",
+  },
+  /** Words marked *like this* in headings. */
+  emphasis: {
+    mark: "text-highlight on-dark:text-current on-dark:underline on-dark:decoration-2 on-dark:underline-offset-4",
+  },
+  button: { primary, secondary },
+  /** Rich text from Hearth anywhere it isn't given its own slot; `.prose` in hearth.css styles what's inside. */
+  markdown: { root: prose },
+
+  /* ─── Blocks ─── */
+  hero: {
+    root: "relative overflow-hidden bg-inverse text-inverse-ink",
+    image: "absolute inset-0 size-full object-cover opacity-35",
+    inner: "relative mx-auto max-w-site px-4 py-16 sm:px-6 sm:py-20 data-[size=full]:py-28 sm:data-[size=full]:py-36",
+    logo: "mb-6 h-20 w-auto sm:h-24",
+    eyebrow: "mb-4 text-sm font-semibold uppercase tracking-[0.18em] opacity-80",
+    title: "max-w-4xl text-[clamp(36px,5vw,64px)] font-bold leading-[1.05] tracking-tight",
+    emphasis: "underline decoration-2 underline-offset-[6px]",
+    body: "mt-5 max-w-2xl text-lg leading-relaxed opacity-85 sm:text-xl",
+    actions: "mt-8 flex flex-wrap gap-3",
+  },
+  richText: { body: `${prose} data-[width=narrow]:max-w-3xl` },
+  mediaText: {
+    grid: "grid items-center gap-10 md:grid-cols-2",
+    text: "md:in-data-[image=left]:order-2",
+    body: prose,
+    actions: "mt-6",
+    image: "aspect-[4/3] w-full rounded-xl object-cover data-[fit=contain]:aspect-auto data-[fit=contain]:max-h-96 data-[fit=contain]:object-contain",
+  },
+  stats: {
+    tone: "inverse",
+    list: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+    item: "flex flex-col-reverse",
+    label: "mt-2 opacity-80",
+    value: "text-5xl font-bold",
+  },
+  cardGrid: {
+    list: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3",
+    card: `flex flex-col gap-3 p-7 ${card}`,
+    image: "mb-2 aspect-[16/10] w-full rounded-lg object-cover",
+    title: "text-xl font-semibold",
+    body: "leading-relaxed opacity-80",
+    link: `mt-auto pt-2 ${more}`,
+  },
+  projects: {
+    showcaseList: "grid gap-14",
+    gridList: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3",
+    showcaseItem: "grid items-center gap-8 md:grid-cols-2",
+    gridItem: `flex flex-col gap-3 p-7 ${card}`,
+    /** Showcase items alternate sides: odd ones carry data-flip. */
+    image: "aspect-[16/10] w-full rounded-xl object-cover object-top in-data-[layout=grid]:mb-2 md:in-data-[flip]:order-2",
+    text: "flex flex-col gap-3",
+    top: "flex flex-wrap items-center gap-3",
+    name: "text-xl font-semibold",
+    status: "rounded-full bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink",
+    role: "text-sm font-semibold uppercase tracking-[0.12em] opacity-75",
+    description: "prose text-lg leading-relaxed opacity-80",
+    stack: "flex flex-wrap gap-2",
+    stackItem: "rounded-md bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0",
+    link: `mt-auto pt-2 ${more}`,
+  },
+  pricing: {
+    list: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3 data-[count=many]:lg:grid-cols-4",
+    plan: `flex flex-col gap-4 p-7 ${card} data-highlight:ring-2 data-highlight:ring-accent`,
+    highlight: "self-start rounded-full bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink",
+    name: "text-xl font-semibold",
+    price: "",
+    amount: "text-4xl font-bold tracking-tight",
+    period: "ml-1 opacity-75",
+    description: "leading-relaxed opacity-80",
+    features: "grid gap-2 opacity-90",
+    feature: "flex gap-2.5",
+    check: "text-highlight before:content-['✓'] on-dark:text-current",
+    actions: "mt-auto pt-2",
+    footnote: "prose mt-8 max-w-3xl text-sm opacity-80",
+  },
+  cta: {
+    row: "flex flex-wrap items-center justify-between gap-8",
+    text: "max-w-2xl",
+    title: "text-[clamp(28px,3.4vw,40px)] font-bold leading-tight",
+    body: "mt-3 text-lg opacity-85",
+    actions: "flex flex-wrap gap-3",
+    /** With an image: the image fills the band under a dark overlay. */
+    imageRoot: "relative overflow-hidden text-white",
+    image: "absolute inset-0 size-full object-cover",
+    overlay: "relative bg-black/55",
+    overlayInner: "mx-auto max-w-site px-4 py-20 sm:px-6 sm:py-24",
+  },
+  faq: {
+    list: `max-w-3xl ${divided}`,
+    item: "group",
+    question: "flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold [&::-webkit-details-marker]:hidden",
+    icon: "text-highlight transition before:content-['+'] group-open:rotate-45",
+    answer: "prose pb-5 text-lg opacity-85",
+  },
+  quote: {
+    figure: "flex max-w-3xl flex-col gap-6",
+    text: "text-2xl font-semibold leading-snug before:content-['“'] after:content-['”'] sm:text-3xl",
+    caption: "flex items-center gap-4",
+    image: "size-14 rounded-full object-cover",
+    name: "block font-semibold",
+    role: "block opacity-75",
+  },
+  gallery: {
+    list: "grid gap-4 sm:grid-cols-2 data-[columns=3]:lg:grid-cols-3 data-[columns=4]:lg:grid-cols-4",
+    image: "aspect-[4/3] w-full rounded-xl object-cover",
+    caption: "mt-2 text-sm opacity-75",
+  },
+  video: {
+    figure: "max-w-4xl",
+    frame: "aspect-video overflow-hidden rounded-xl bg-inverse",
+    caption: "mt-3 opacity-75",
+  },
+  embed: {
+    figure: "data-[width=narrow]:max-w-2xl data-[width=wide]:max-w-4xl",
+    frame: "rounded-xl",
+    caption: "mt-3 opacity-75",
+  },
+  people: {
+    list: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3",
+    person: "flex flex-col gap-3",
+    image: "aspect-square w-full rounded-2xl object-cover",
+    name: "text-xl font-semibold",
+    role: "opacity-75",
+    bio: "leading-relaxed opacity-85",
+  },
+  logos: {
+    list: "flex flex-wrap items-center gap-x-12 gap-y-6",
+    link: "block opacity-85 hover:opacity-100",
+    image: "h-10 w-auto",
+    name: "text-lg font-semibold",
+  },
+  location: {
+    grid: "grid gap-10 md:grid-cols-2",
+    details: "flex flex-col gap-4 text-lg",
+    name: "text-xl font-semibold",
+    address: "whitespace-pre-line not-italic",
+    hours: "whitespace-pre-line",
+    notes: "prose text-lg opacity-80",
+    directions: inlineLink,
+    map: "aspect-[4/3]",
+  },
+  locations: {
+    grid: "grid gap-10 data-map:md:grid-cols-[2fr_3fr]",
+    map: "aspect-[4/3] md:sticky md:top-24 md:order-2 md:aspect-auto md:h-[min(36rem,80vh)]",
+    list: divided,
+    /** The list when no place has a map pin. */
+    listNoMap: `${divided} grid gap-x-10 sm:grid-cols-2 sm:divide-y-0 sm:border-y-0`,
+    item: "flex flex-col gap-2 py-6",
+    name: "text-xl font-semibold",
+    address: "whitespace-pre-line not-italic",
+    hours: "whitespace-pre-line",
+    notes: "whitespace-pre-line opacity-80",
+    links: "mt-1 flex flex-wrap gap-x-6 gap-y-2",
+    link: inlineLink,
+  },
+  /** The map in Location and Locations blocks (MapLibre with OpenStreetMap tiles). */
+  map: {
+    /** A MapLibre style URL: swap it to restyle the map itself. */
+    style: "https://tiles.openfreemap.org/styles/liberty",
+    frame: "relative overflow-hidden rounded-xl bg-muted [&_.maplibregl-map]:font-sans [&_.maplibregl-popup-close-button]:size-8 [&_.maplibregl-popup-close-button]:text-xl",
+    pin: "block size-6 rounded-full border-[3px] border-white bg-highlight shadow-md",
+    popup: "grid gap-1 pr-4 font-sans text-sm text-ink",
+    popupLink: "font-semibold text-highlight underline underline-offset-4",
+    failed: "absolute inset-0 grid place-items-center p-6 text-center opacity-80",
+  },
+  schedule: {
+    list: `max-w-3xl ${divided}`,
+    item: "grid gap-1 py-5 sm:grid-cols-[10rem_1fr] sm:gap-6",
+    time: "font-semibold text-highlight on-dark:text-current",
+    title: "text-lg font-semibold",
+    details: "mt-1 opacity-80",
+  },
+  formBlock: { wrap: "max-w-2xl" },
+  collectionList: {
+    cards: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3",
+    card: "relative flex flex-col overflow-hidden rounded-2xl bg-surface ring-1 ring-line",
+    image: "aspect-[16/10] w-full object-cover",
+    body: "flex flex-1 flex-col gap-2 p-6",
+    date: "text-sm font-semibold text-highlight",
+    title: "text-xl font-semibold",
+    /** The title link covers the whole card. */
+    link: "after:absolute after:inset-0 hover:underline",
+    summary: "leading-relaxed opacity-85",
+    tags: "mt-auto flex flex-wrap gap-2 pt-2",
+    tag: "rounded-full bg-muted px-3 py-1 text-xs font-semibold",
+    list: `max-w-3xl ${divided}`,
+    listItem: "py-5",
+    listLink: "text-lg font-semibold hover:underline",
+    listMeta: "mt-1 opacity-80",
+    listDate: "font-semibold",
+    empty: "text-lg opacity-75",
+    more: `mt-8 inline-block ${more}`,
+  },
+
+  /* ─── Events ─── */
+  eventCard: {
+    list: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3",
+    card: "relative flex flex-col overflow-hidden rounded-2xl bg-surface ring-1 ring-line",
+    image: "aspect-[16/9] w-full object-cover",
+    body: "flex flex-1 flex-col gap-2 p-6",
+    date: "text-sm font-semibold text-highlight",
+    cancelled: "mr-2 rounded bg-danger px-1.5 py-0.5 text-white",
+    title: "text-xl font-semibold",
+    link: "after:absolute after:inset-0 hover:underline",
+    place: "opacity-75",
+    summary: "leading-relaxed opacity-85",
+    actions: "relative z-10 mt-auto pt-2",
+    empty: "text-lg opacity-75",
+  },
+  upcomingEvents: { more: `mt-8 inline-block ${more}` },
+  pastEvents: { tone: "muted" },
+  eventSpotlight: {
+    tone: "muted",
+    grid: "grid items-center gap-10 md:grid-cols-2",
+    label: `mb-3 ${kicker}`,
+    title: "text-[clamp(28px,3.4vw,40px)] font-bold leading-tight",
+    date: "mt-3 text-lg font-semibold text-highlight",
+    place: "mt-1 opacity-80",
+    summary: "mt-4 text-lg opacity-85",
+    actions: "mt-6",
+    image: "aspect-[4/3] w-full rounded-xl object-cover",
+  },
+  /** An event's page (/events/… and events in collections). */
+  event: {
+    header: "bg-muted",
+    headerInner: "mx-auto grid max-w-site items-center gap-10 px-4 py-16 sm:px-6 md:grid-cols-2",
+    details: "flex flex-col gap-4",
+    collection: kicker,
+    title: "text-[clamp(32px,4.4vw,52px)] font-bold leading-tight tracking-tight",
+    image: "aspect-[4/3] w-full rounded-xl object-cover",
+    /** When the event's blocks start with a hero: the band under it with the date, place and buttons. */
+    band: "bg-muted",
+    bandInner: "mx-auto flex max-w-site flex-wrap items-center justify-between gap-6 px-4 py-8 sm:px-6",
+    bandDetails: "flex flex-col gap-2",
+    cancelled: "w-fit rounded bg-danger px-2 py-1 text-sm font-semibold text-white",
+    when: "text-lg font-semibold text-highlight",
+    where: "",
+    placeName: "block font-semibold",
+    address: "block opacity-80",
+    online: "block font-semibold",
+    summary: "text-lg opacity-85",
+    actions: "flex flex-wrap items-center gap-3",
+    /** The Volunteer button beside Register. */
+    volunteer: "w-fit rounded-lg px-6 py-3.5 font-semibold ring-2 ring-current hover:opacity-80",
+    /** The Register and Volunteer sections at the foot of the page. */
+    section: "mx-auto max-w-site scroll-mt-8 px-4 py-16 sm:px-6",
+    sectionInner: "max-w-2xl",
+    sectionTitle: "mb-2 text-2xl font-bold",
+    sectionNote: "mb-2 opacity-80",
+    sectionIntro: "mb-2 whitespace-pre-line opacity-85",
+    form: "mt-6",
+  },
+  /** The Register button (or why there isn't one) on event cards and pages. */
+  registration: {
+    note: "font-semibold opacity-75 data-[size=small]:text-sm",
+  },
+  volunteerSignup: {
+    wrap: "max-w-2xl",
+    title: "mb-2 text-2xl font-bold",
+    event: "mb-2 font-semibold",
+    eventLink: "underline underline-offset-4 hover:opacity-80",
+    eventDate: "text-highlight on-dark:text-current",
+    intro: "mb-2 whitespace-pre-line opacity-85",
+    note: "mb-2 opacity-80",
+    form: "mt-6",
+    closed: "opacity-80",
+  },
+
+  /* ─── Giving ─── */
+  progress: {
+    root: "flex flex-col gap-2",
+    amounts: "text-base data-[size=large]:text-2xl",
+    raised: "font-bold",
+    goal: "opacity-75",
+    bar: "h-2.5 overflow-hidden rounded-full bg-line",
+    fill: "h-full rounded-full bg-accent",
+    donors: "text-sm opacity-75",
+  },
+  fundraiserCard: {
+    list: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3",
+    card: "relative flex flex-col overflow-hidden rounded-2xl bg-surface ring-1 ring-line",
+    image: "aspect-[16/9] w-full object-cover",
+    body: "flex flex-1 flex-col gap-3 p-6",
+    completed: "w-fit rounded bg-muted px-2 py-0.5 text-sm font-semibold",
+    title: "text-xl font-semibold",
+    link: "after:absolute after:inset-0 hover:underline",
+    summary: "leading-relaxed opacity-85",
+    progress: "mt-auto pt-2",
+    empty: "text-lg opacity-75",
+  },
+  fundraiserGrid: { more: `mt-8 inline-block ${more}` },
+  fundraiserSpotlight: {
+    tone: "muted",
+    grid: "grid items-center gap-10 md:grid-cols-2",
+    details: "flex flex-col gap-4",
+    label: kicker,
+    title: "text-[clamp(28px,3.4vw,40px)] font-bold leading-tight",
+    summary: "text-lg opacity-85",
+    actions: "flex flex-wrap gap-3 pt-2",
+    learnMore: "rounded-lg px-6 py-3.5 font-semibold ring-1 ring-line hover:bg-surface",
+    image: "aspect-[4/3] w-full rounded-xl object-cover",
+  },
+  donate: {
+    wrap: "max-w-2xl",
+    supporting: "mb-6 font-semibold",
+  },
+  /** A fundraiser's page (/fundraisers/…). */
+  fundraiser: {
+    header: "bg-muted",
+    headerInner: "mx-auto grid max-w-site items-center gap-10 px-4 py-16 sm:px-6 md:grid-cols-2",
+    details: "flex flex-col gap-4",
+    label: kicker,
+    title: "text-[clamp(32px,4.4vw,52px)] font-bold leading-tight tracking-tight",
+    summary: "text-lg opacity-85",
+    actions: "flex flex-wrap gap-3",
+    image: "aspect-[4/3] w-full rounded-xl object-cover",
+    give: "max-w-2xl",
+    giveTitle: "mb-6 text-2xl font-bold",
+    completedTitle: "mb-8 text-2xl font-bold",
+  },
+
+  /* ─── Forms (contact form, volunteer sign-up, registration, donations) ─── */
+  form: {
+    root: "space-y-6",
+    alert: "rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-danger",
+    success: "rounded-xl bg-accent p-6 text-lg font-semibold text-accent-ink",
+    row: "grid gap-5 sm:grid-cols-2",
+    field: "block",
+    label: "mb-1.5 block font-semibold",
+    optional: "ml-1 font-normal opacity-70",
+    input,
+    error: "mt-1.5 block text-sm text-danger",
+    check: "flex items-center gap-3",
+    checkbox: choice,
+    legend: "mb-3 font-semibold",
+    /** Shifts and tickets: a card per choice. */
+    options: "space-y-3",
+    option: "flex cursor-pointer items-start gap-3 rounded-lg p-4 ring-1 ring-line has-checked:ring-2 has-checked:ring-accent has-disabled:cursor-not-allowed has-disabled:opacity-50",
+    optionInput: `mt-1 ${choice}`,
+    optionText: "flex-1",
+    optionTitle: "flex flex-wrap justify-between gap-2 font-semibold",
+    optionMeta: "font-normal opacity-80",
+    optionDetail: "mt-0.5 block opacity-80",
+    /** Donation amounts: radio buttons drawn as pills. */
+    amounts: "flex flex-wrap gap-3",
+    amount:
+      "cursor-pointer rounded-lg px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent",
+    customAmount: "mt-4 block max-w-xs",
+    hint: "mt-2 text-sm opacity-75",
+    submit: "rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90 disabled:opacity-60",
+    note: "text-sm opacity-75",
+  },
+
+  /** A Form block set to an Ember form: Ember draws it in its own frame, so it takes values, not classes (colors come from the tokens). */
+  emberForm: { radius: "8px", fontSize: "16px", gap: "20px" },
+
+  /* ─── Share (events and fundraisers) ─── */
+  share: {
+    button: "inline-flex w-fit items-center gap-2 rounded-lg px-5 py-3 font-semibold ring-1 ring-current/40 hover:ring-current",
+    dialog: "m-auto w-[min(32rem,calc(100%-2rem))] rounded-2xl bg-surface p-0 text-ink shadow-2xl backdrop:bg-black/50",
+    top: "flex items-center justify-between gap-4 border-b border-line px-5 py-4",
+    title: "text-xl font-bold",
+    close: "grid size-11 place-items-center rounded-lg hover:bg-muted",
+    body: "space-y-5 p-5",
+    message: input,
+    copy: "grid gap-2 sm:grid-cols-2",
+    copyButton: "rounded-lg bg-accent px-4 py-3 font-semibold text-accent-ink hover:opacity-90",
+    status: "min-h-5 text-center text-sm font-semibold",
+    targetsLabel: "mb-2 text-sm font-semibold opacity-75",
+    targets: "grid grid-cols-2 gap-2 sm:grid-cols-3",
+    target: "inline-flex min-h-11 items-center justify-center rounded-lg px-3 text-sm font-semibold ring-1 ring-line hover:ring-current",
+  },
+
+  /* ─── Words ─── */
+  text: {
+    directions: "Get directions",
+    allEvents: "All events",
+    allFundraisers: "All fundraisers",
+    allEntries: "All {collection}",
+    noEvents: "No upcoming events right now. Check back soon.",
+    noFundraisers: "No fundraisers right now. Check back soon.",
+    noEntries: "Nothing here yet. Check back soon.",
+    eventDetails: "Event details",
+    register: "Register",
+    registrationClosed: "Registration closed",
+    soldOut: "Sold out",
+    comingSoon: "Registration coming soon",
+    cancelled: "Cancelled",
+    cancelledEvent: "This event is cancelled",
+    online: "Online",
+    onlineAndInPerson: "Online and in person",
+    volunteer: "Volunteer",
+    volunteerClosed: "Volunteer sign-up for this event has closed.",
+    supports: "This event supports {fundraiser}.",
+    ticketsSupport: "Ticket sales support {fundraiser}.",
+    donate: "Donate",
+    learnMore: "Learn more",
+    supporting: "Supporting: {fundraiser}",
+    giveTo: "Give to {fundraiser}",
+    completed: "Completed",
+    menu: "Menu",
+    close: "Close",
+    share: "Share",
+    visitProject: "Visit {name}",
+    mapFailed: "The map couldn't load.",
+  },
+};

package/template/src/hearth/theme/index.ts

@@ -0,0 +1,31 @@
+import { defaults } from "./defaults";
+
+/*
+ * How the site looks, slot by slot. Every element Hearth's code draws takes its classes from one slot here, so a site
+ * restyles it in src/theme/index.ts without touching this folder. `defaults` holds every slot and what it starts as.
+ */
+
+export type Theme = typeof defaults;
+
+/** A slot's new classes, or a function of the default's classes (to add to them: (base) => `${base} uppercase`). */
+export type SlotOverride = string | ((base: string) => string);
+
+export type ThemeOverrides = { [Part in keyof Theme]?: { [Slot in keyof Theme[Part]]?: SlotOverride } };
+
+/** The site's theme: the defaults with its own slots in their place. Missing parts and slots keep the default. */
+export function defineTheme(overrides: ThemeOverrides = {}): Theme {
+  const theme = structuredClone(defaults) as Record<string, Record<string, string>>;
+  for (const [part, slots] of Object.entries(overrides)) {
+    if (!theme[part]) throw new Error(`Theme: there's no part "${part}". See src/hearth/theme/defaults.ts for the parts.`);
+    for (const [slot, value] of Object.entries(slots ?? {})) {
+      if (!(slot in theme[part])) throw new Error(`Theme: "${part}" has no slot "${slot}". See src/hearth/theme/defaults.ts.`);
+      if (value !== undefined) theme[part][slot] = typeof value === "function" ? value(theme[part][slot]) : value;
+    }
+  }
+  return theme as Theme;
+}
+
+/** Class names joined, skipping empty ones. */
+export const cx = (...classes: (string | false | null | undefined)[]) => classes.filter(Boolean).join(" ");
+
+export { defaults };