@caltho/site-kit 0.2.9 → 0.2.11

package/dist/content/index.js

@@ -10,9 +10,11 @@
 // them with no further work.
 import { z } from "zod";
 import { checkStructure, describePath } from "../schema.js";
-import { lookProblems, lookSchema } from "./look.js";
-export { contrast, lookCss, lookProblems, lookVars } from "./look.js";
-export { checkStructure, describePath } from "../schema.js";
+import { presets } from "../sections/presets.js";
+import { buttonStyleName, COLOUR_ROLES, colourOf, isDark, lookProblems, lookSchema, swatchSlug } from "./look.js";
+export { COLOUR_ROLES, colourOf, contrast, HEADER_LAYOUTS, HEADER_STYLES, headerOf, isDark, KIT_FONTS, KIT_TYPE, lookCss, lookProblems, lookVars, swatchSlug, TYPE_ROLES, uploadedFontCss, buttonStyleClass, BUTTON_SIZES, MAX_BUTTON_STYLES, THEME_BUTTONS, } from "./look.js";
+export { fontFaceCss, fontFiles, googleFamily, googleFont, googleFonts, isFontName, servedAt } from "../fonts-google.js";
+export { blockLabel, checkStructure, describePath } from "../schema.js";
 export { z };
 // Fields carry an "x-ui" hint in the JSON Schema, so CalOS draws the right control: a text area, a
 // Markdown box, a picture picker.
@@ -33,16 +35,26 @@ export const href = z
     .string()
     .regex(/^(\/[\w\-./#?=&%]*|#[\w-]+|https?:\/\/\S+|tel:\+?[\d\s()-]+|mailto:\S+@\S+)$/, { error: HREF_HELP })
     .meta({ "x-error": HREF_HELP });
-export const link = z.object({ label: text, href, style: z.enum(["primary", "secondary"]).optional() });
+export const link = z.object({
+    label: text,
+    href,
+    // Main (the brand colour), quiet (an outline), or the accent colour: a button that stands out on a photo or a dark band.
+    style: z.enum(["primary", "secondary", "accent"]).optional().meta({ title: "Style", "x-labels": { primary: "Main", secondary: "Quiet", accent: "Accent colour" } }),
+});
 export const time = z.string().regex(/^([01]\d|2[0-3]):[0-5]\d$/, { error: "A time like 08:00 or 17:30" }).meta({ "x-error": "A time like 08:00 or 17:30" });
 export const DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 /** What every block has: a place on the page, for links like /#contact. */
 const blockBase = { id: z.string().regex(/^[a-z][\w-]*$/).optional() };
 /**
- * How a section sits on the page, for a site that offers it (defineSite's `placement`): its alignment,
- * width, spacing and the screens it shows on. The site's design says what each means at every width,
- * so a choice here stays sensible on a phone. CalOS shows it as the section's Layout. (A block's own
- * `layout`, a site's choice of how it's drawn, is a different thing and keeps its name.)
+ * How a section sits on the page, offered on every section (defineSite's `placement`, on unless a site
+ * turns it off): its alignment, width, spacing, the screens it shows on, and what's behind it. The
+ * site's design says what each means at every width, so a choice here stays sensible on a phone.
+ * CalOS shows it as the section's Layout. (A block's own `layout`, a site's choice of how it's drawn,
+ * is a different thing and keeps its name.)
+ *
+ * Its background is drawn by KitBlocks (../next/blocks.tsx) as a frame around the section: a colour
+ * (one of the page's, by its role, or one of the site's own, by its slug) and a photo, shaded so the
+ * words over it read.
  */
 export const placement = z
     .object({
@@ -50,9 +62,24 @@ export const placement = z
     width: z.enum(["narrow", "normal", "wide"]).default("normal").meta({ title: "Width" }),
     spacing: z.enum(["compact", "normal", "roomy"]).default("normal").meta({ title: "Spacing" }),
     show: z.enum(["all", "desktop", "phone"]).default("all").meta({ title: "Show on" }),
+    // A line across the page's full width above it, below it or both (a strip between two rules), quiet (the Look's line colour) or strong (its text colour).
+    lines: z.enum(["none", "top", "bottom", "both"]).optional().meta({ title: "Lines", "x-labels": { none: "None", top: "Above", bottom: "Below", both: "Above and below" } }),
+    lineColour: z.enum(["quiet", "strong"]).optional().meta({ title: "Line colour", "x-labels": { quiet: "Quiet", strong: "Strong" } }),
+    background: z
+        .object({
+        color: z
+            .string()
+            .regex(/^[a-z0-9]+(-[a-z0-9]+)*$/, { error: "One of the site's colours" })
+            .optional()
+            .meta({ title: "Colour", "x-ui": "swatch", "x-error": "One of the site's colours" }),
+        photo: image.optional().meta({ title: "Photo" }),
+        overlay: z.enum(["none", "light", "dark"]).default("dark").meta({ title: "Shade over the photo" }),
+    })
+        .optional()
+        .meta({ title: "Background" }),
 })
     .meta({ title: "Layout" });
-/** A section's placement as class names, only what differs from the usual: "place-align-center place-width-narrow", or "". */
+/** A section's placement as class names, only what differs from the usual: "place-align-center place-width-narrow", or "". Its background is the frame's (frameClass). */
 export function placementClass(block) {
     const l = block.placement ?? {};
     const usual = { align: "left", width: "normal", spacing: "normal", show: "all" };
@@ -61,6 +88,63 @@ export function placementClass(block) {
         .map((k) => `place-${k}-${l[k]}`)
         .join(" ");
 }
+/** The classes of the lines across a section's full width (KitBlocks wraps it in them), or "" for none. */
+export function linesClass(block) {
+    const l = block.placement?.lines;
+    if (!l || l === "none")
+        return "";
+    return ["kit-lines", `kit-lines-${l}`, block.placement?.lineColour === "strong" ? "kit-lines-strong" : ""].filter(Boolean).join(" ");
+}
+/** Whether a section has something behind it (a colour or a photo), and so a frame. */
+export function hasBackground(block) {
+    const b = block.placement?.background;
+    return Boolean(b && (b.color || b.photo?.src));
+}
+/** What a page's colours are when a site has no Look: a light page, its other colours dark. */
+const NO_LOOK = { "--look-page": "#ffffff", "--look-soft": "#f3f3f3", "--look-brand": "#111111", "--look-accent": "#111111", "--look-ink": "#111111" };
+/**
+ * Whether a section's background is dark, so its words go light: under a photo, by its shade (dark
+ * or none: light words; light: dark words); else by its colour's value in the Look (`vars`, from
+ * lookVars, at build and in the preview alike). A colour it can't find counts as light.
+ */
+export function backgroundIsDark(block, vars = {}) {
+    const b = block.placement?.background;
+    if (!b)
+        return false;
+    if (b.photo?.src)
+        return (b.overlay ?? "dark") !== "light";
+    if (!b.color)
+        return false;
+    const value = colourOf(b.color, { ...NO_LOOK, ...vars });
+    return value ? isDark(value) : false;
+}
+/**
+ * The classes of the frame KitBlocks draws around a section with a background, or "" for one
+ * without: `kit-frame`, its colour (`kit-bg-soft`, or `kit-bg-swatch-2` for the site's second own
+ * colour, found in `vars`), `kit-frame-photo kit-overlay-dark` under a photo, and `kit-frame-dark`
+ * when its words go light (backgroundIsDark). sections.css draws them from the Look's variables.
+ */
+export function frameClass(block, vars = {}) {
+    if (!hasBackground(block))
+        return "";
+    const b = block.placement.background;
+    const out = ["kit-frame"];
+    if (b.color) {
+        if (COLOUR_ROLES.includes(b.color))
+            out.push(`kit-bg-${b.color}`);
+        else {
+            const value = vars[`--look-swatch-${b.color}`];
+            const n = value ? Array.from({ length: 12 }, (_, i) => i + 1).find((i) => vars[`--look-swatch-${i}`] === value) : undefined;
+            if (n)
+                out.push(`kit-bg-swatch-${n}`);
+        }
+    }
+    if (b.photo?.src)
+        out.push("kit-frame-photo", `kit-overlay-${b.overlay ?? "dark"}`);
+    if (backgroundIsDark(block, vars))
+        out.push("kit-frame-dark");
+    return out.join(" ");
+}
 const address = z.object({
     street: text,
     locality: text,
@@ -111,7 +195,7 @@ const pageBase = (trailingSlash) => ({
 });
 /**
  * The site's menu, as its header draws it: the one edited in CalOS (its links in order, one picked out,
- * and the header's button), else the pages that have a menu label, in page order (and no button: the
+ * each with the links under it if it has any, and the header's button), else the pages that have a menu label, in page order (and no button: the
  * site's own default).
  */
 export function menuOf(site) {
@@ -133,10 +217,11 @@ export function defineSite(blocks, o = {}) {
     const names = Object.keys(blocks);
     if (!names.length)
         throw new Error("A site needs at least one kind of block");
+    const placed = o.placement ?? true;
     const union = z.discriminatedUnion("type", 
     // Each kind keeps what the site said of it (its title, for CalOS to call it by).
     names.map((type) => {
-        const kind = z.object({ type: z.literal(type), ...blockBase, ...(o.placement ? { placement: placement.optional() } : {}) }).extend(blocks[type].shape);
+        const kind = z.object({ type: z.literal(type), ...blockBase, ...(placed ? { placement: placement.optional() } : {}) }).extend(blocks[type].shape);
         const meta = blocks[type].meta();
         return meta ? kind.meta(meta) : kind;
     }));
@@ -153,8 +238,23 @@ export function defineSite(blocks, o = {}) {
         /** The header's links in order, and its button: edited as one list in CalOS. Left out, the pages' menu labels are used. */
         menu: z
             .object({
-            links: z.array(z.object({ label: text, href, emphasis: z.boolean().default(false).meta({ title: "Emphasize" }) })).max(10),
-            button: z.object({ label: text, href }).optional().meta({ title: "Button" }),
+            links: z
+                .array(z.object({
+                label: text,
+                href,
+                emphasis: z.boolean().default(false).meta({ title: "Emphasize" }),
+                children: z.array(z.object({ label: text, href })).max(8).optional().meta({ title: "Links under it" }),
+            }))
+                .max(10),
+            button: z
+                .object({
+                label: text,
+                href,
+                // Drawn in the theme's Main (the usual), Accent or Quiet, or one of the business's own button styles.
+                style: buttonStyleName.optional().meta({ title: "Style", "x-ui": "button-style" }),
+            })
+                .optional()
+                .meta({ title: "Button" }),
         })
             .optional()
             .meta({ title: "Menu" }),
@@ -172,6 +272,12 @@ export function defineSite(blocks, o = {}) {
         ...(o.look ? { look: lookSchema(o.look) } : {}),
         ...o.extend,
         pages: z.array(page).min(1),
+        /** Sections the business put together and named, to add again anywhere ("Package card"): CalOS offers them beside the site's own kinds. */
+        saved: z
+            .array(z.object({ name: text.meta({ title: "Name" }), block: union }))
+            .max(30)
+            .default([])
+            .meta({ title: "Saved sections" }),
     })
         .superRefine((site, ctx) => {
         const s = site;
@@ -180,6 +286,9 @@ export function defineSite(blocks, o = {}) {
         if (o.look)
             for (const i of lookProblems(s.look, o.look))
                 ctx.addIssue({ code: "custom", path: i.path, message: i.message });
+        if (placed)
+            for (const i of backgroundProblems(s, o.look))
+                ctx.addIssue({ code: "custom", path: i.path, message: i.message });
         o.refine?.(s, ctx);
     });
     return {
@@ -195,9 +304,33 @@ export function defineSite(blocks, o = {}) {
         csp: o.csp ?? {},
         share: o.share,
         look: o.look,
-        /** The declaration CalOS draws its editing forms from. */
-        jsonSchema: () => z.toJSONSchema(schema, { io: "input", unrepresentable: "any" }),
+        /**
+         * The declaration CalOS draws its editing forms from. A site with sections of the business's own
+         * (`own`) carries the ready-made ones it can start from, each one this site's schema takes, as
+         * `x-presets`: [{ key, name, description, block }].
+         */
+        jsonSchema: () => {
+            const json = z.toJSONSchema(schema, { io: "input", unrepresentable: "any" });
+            if (names.includes("own"))
+                json["x-presets"] = presets.filter((p) => union.safeParse(p.block).success);
+            return json;
+        },
+    };
+}
+/** A section's background naming a colour the site hasn't: one of the page's roles, or one of the Look's own colours by its slug. */
+function backgroundProblems(site, look) {
+    const palette = site.look?.palette ?? look?.palette ?? [];
+    const known = new Set([...COLOUR_ROLES, ...palette.map((s) => swatchSlug(s.name))]);
+    const out = [];
+    const check = (b, at) => {
+        const color = b.placement?.background?.color;
+        if (color && !known.has(color))
+            out.push({ path: [...at, "placement", "background", "color"], message: `"${color}" isn't one of the site's colours: choose another` });
     };
+    site.pages.forEach((p, i) => p.blocks.forEach((b, j) => check(b, ["pages", i, "blocks", j])));
+    const saved = site.saved ?? [];
+    saved.forEach((s, i) => s?.block && check(s.block, ["saved", i, "block"]));
+    return out;
 }
 /** Search results cut a title at about 60 characters and a description at about 160: said, not refused, since the page still works. */
 function lengthWarnings(site) {

package/dist/content/look.d.ts

@@ -1,4 +1,18 @@
 import { z } from "zod";
+export declare const TYPE_ROLES: readonly ["display", "h1", "h2", "h3", "body", "small"];
+export type TypeRole = (typeof TYPE_ROLES)[number];
+export type TypeStyle = {
+    size?: number;
+    weight?: 300 | 400 | 500 | 600 | 700;
+    tracking?: number;
+    leading?: number;
+};
+export type TypeScale = Partial<Record<TypeRole, TypeStyle>>;
+export type Swatch = {
+    name: string;
+    color: string;
+};
+export type Space = "compact" | "normal" | "roomy";
 export type LookOptions = {
     /** The fonts the site carries, by the name CalOS shows → the font-family it's drawn with. */
     fonts?: Record<string, string>;
@@ -8,19 +22,183 @@ export type LookOptions = {
     /** The site's own colours, used until others are chosen. */
     brand: string;
     accent?: string;
-    /** The page's background, which a brand colour must read against. */
+    /** The page's background, which a brand colour must read against (`background` is the older name). */
+    page?: string;
     background?: string;
+    /** The site's main text colour (a dark section's background). */
+    ink?: string;
+    /** Quieter text, lines and borders, a quiet section's background: worked out from page and ink when not given. */
+    muted?: string;
+    line?: string;
+    soft?: string;
+    /** Colours of the site's own, by name. */
+    palette?: Swatch[];
+    /** The site's type scale: px sizes, weights, tracking (em) and line height, by role. */
+    type?: TypeScale;
+    /** The content's width in px (800–1600). */
+    width?: number;
+    /** The space each side of the content, in px, on a wide screen (8–96; 40 unless said): half of it on a phone, growing with the screen between. A site's own sections and the kit's line up when its CSS reads --look-gutter. */
+    gutter?: number;
+    /** The space above and below each section. */
+    space?: Space;
     corners?: Corners;
     buttons?: Buttons;
+    /** The site's header, until the business chooses otherwise (headerOf). */
+    header?: HeaderLook;
+};
+/**
+ * The header: whether it stays at the top as the page scrolls, how it's set apart from the page
+ * (a line under it, nothing, the brand colour, or a bar floating over the page), and where the
+ * name and menu sit (name left and menu right, all centred, or name and menu together on the left).
+ */
+export type HeaderLook = {
+    sticky?: boolean;
+    style?: HeaderStyle;
+    layout?: HeaderLayout;
+    menuShows?: MenuShows;
+    menuStyle?: string;
+};
+/** The phone's menu button: what it shows (its icon, the word, both); its look is a button style (menuStyle). */
+export declare const MENU_SHOWS: readonly ["both", "icon", "word"];
+export type MenuShows = (typeof MENU_SHOWS)[number];
+/** A button style of the business's own: its colours by the theme's names, border, corners, size and lettering. */
+export type ButtonStyle = {
+    name: string;
+    /** Its fill: a role, a palette colour's slug, or "none" (an outline). */
+    fill?: string;
+    /** Its words' colour: a role or palette slug; else whichever of the page and text reads on the fill. */
+    text?: string;
+    border?: {
+        width?: number;
+        color?: string;
+    };
+    /** Its corners in px, or 999 for round ends. */
+    radius?: number;
+    size?: "small" | "medium" | "large";
+    weight?: number;
+    caps?: boolean;
+};
+export declare const BUTTON_SIZES: readonly ["small", "medium", "large"];
+/** How many styles of its own a site can have (the classes sections.css draws, kit-btn-1 to -8). */
+export declare const MAX_BUTTON_STYLES = 8;
+/** The theme's own, always there: a style of the business's can't take their names. */
+export declare const THEME_BUTTONS: readonly ["main", "accent", "quiet"];
+export declare const HEADER_STYLES: readonly ["line", "plain", "brand", "floating"];
+export declare const HEADER_LAYOUTS: readonly ["spread", "centered", "left"];
+export type HeaderStyle = (typeof HEADER_STYLES)[number];
+export type HeaderLayout = (typeof HEADER_LAYOUTS)[number];
+/** The header as it's drawn: what the business chose, else the site's own, else the kit's. */
+export declare function headerOf(look: Look | undefined, o: Pick<LookOptions, "header">): Required<Omit<HeaderLook, "menuStyle">> & {
+    menuStyle?: string;
 };
 declare const CORNERS: readonly ["square", "soft", "round"];
 declare const BUTTONS: readonly ["solid", "outline"];
 type Corners = (typeof CORNERS)[number];
 type Buttons = (typeof BUTTONS)[number];
+/** The colours of the page any section's background may be, beside the site's own (by their slug). */
+/**
+ * The kit's fonts (fonts.css, imported once in the site's layout): variable, every weight, by the
+ * name CalOS shows and the family it's drawn with. A site's look.ts lists them as its fonts (with
+ * any of its own), so the business picks any of them for its headings and text.
+ */
+export declare const KIT_FONTS: Record<string, string>;
+export declare const COLOUR_ROLES: readonly ["page", "soft", "brand", "accent", "ink"];
+export type ColourRole = (typeof COLOUR_ROLES)[number];
+/** The kit's type scale, for what a site doesn't say. */
+export declare const KIT_TYPE: Record<TypeRole, Required<TypeStyle>>;
+/** A colour of the site's own as a CSS name: "Dark sand" → "dark-sand" (runs of anything else one dash, none at the ends). */
+export declare function swatchSlug(name: string): string;
 /** The Look's fields, for the site's content. */
 export declare function lookSchema(o: LookOptions): z.ZodOptional<z.ZodObject<{
+    uploadedFonts?: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        family: z.ZodString;
+        files: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            weight: z.ZodString;
+            style: z.ZodEnum<{
+                normal: "normal";
+                italic: "italic";
+            }>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>> | undefined;
+    footer?: z.ZodDefault<z.ZodObject<{
+        background: z.ZodDefault<z.ZodString>;
+    }, z.core.$strip>> | undefined;
+    header?: z.ZodDefault<z.ZodObject<{
+        sticky: z.ZodDefault<z.ZodBoolean>;
+        style: z.ZodDefault<z.ZodEnum<{
+            line: "line";
+            plain: "plain";
+            brand: "brand";
+            floating: "floating";
+        }>>;
+        layout: z.ZodDefault<z.ZodEnum<{
+            spread: "spread";
+            centered: "centered";
+            left: "left";
+        }>>;
+        menuShows: z.ZodDefault<z.ZodEnum<{
+            both: "both";
+            icon: "icon";
+            word: "word";
+        }>>;
+        menuStyle: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>> | undefined;
     brand: z.ZodDefault<z.ZodString>;
     accent: z.ZodDefault<z.ZodString>;
+    page: z.ZodDefault<z.ZodString>;
+    ink: z.ZodDefault<z.ZodString>;
+    muted: z.ZodDefault<z.ZodString>;
+    line: z.ZodDefault<z.ZodString>;
+    soft: z.ZodDefault<z.ZodString>;
+    palette: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        color: z.ZodString;
+    }, z.core.$strip>>>;
+    type: z.ZodDefault<z.ZodObject<{
+        display: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        h1: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        h2: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        h3: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        body: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        small: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
+    width: z.ZodDefault<z.ZodNumber>;
+    space: z.ZodDefault<z.ZodEnum<{
+        normal: "normal";
+        compact: "compact";
+        roomy: "roomy";
+    }>>;
     corners: z.ZodDefault<z.ZodEnum<{
         square: "square";
         soft: "soft";
@@ -30,30 +208,103 @@ export declare function lookSchema(o: LookOptions): z.ZodOptional<z.ZodObject<{
         solid: "solid";
         outline: "outline";
     }>>;
-    headingFont?: z.ZodDefault<z.ZodEnum<{
-        [x: string]: string;
-    }>> | undefined;
-    bodyFont?: z.ZodDefault<z.ZodEnum<{
-        [x: string]: string;
-    }>> | undefined;
+    radius: z.ZodOptional<z.ZodNumber>;
+    buttonRadius: z.ZodOptional<z.ZodNumber>;
+    buttonStyles: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        fill: z.ZodOptional<z.ZodString>;
+        text: z.ZodOptional<z.ZodString>;
+        border: z.ZodOptional<z.ZodObject<{
+            width: z.ZodOptional<z.ZodNumber>;
+            color: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        radius: z.ZodOptional<z.ZodNumber>;
+        size: z.ZodOptional<z.ZodEnum<{
+            small: "small";
+            medium: "medium";
+            large: "large";
+        }>>;
+        weight: z.ZodOptional<z.ZodNumber>;
+        caps: z.ZodOptional<z.ZodBoolean>;
+    }, z.core.$strip>>>;
+    buttonBorder: z.ZodOptional<z.ZodObject<{
+        width: z.ZodNumber;
+        color: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    headingFont?: z.ZodDefault<z.ZodString> | undefined;
+    bodyFont?: z.ZodDefault<z.ZodString> | undefined;
+}, z.core.$strip>>;
+/** A button style's name, by its slug where a button names it ("main", "accent", "quiet", or one of the business's). */
+export declare const buttonStyleName: z.ZodString;
+declare const uploadedFonts: z.ZodArray<z.ZodObject<{
+    family: z.ZodString;
+    files: z.ZodArray<z.ZodObject<{
+        src: z.ZodString;
+        weight: z.ZodString;
+        style: z.ZodEnum<{
+            normal: "normal";
+            italic: "italic";
+        }>;
+    }, z.core.$strip>>;
 }, z.core.$strip>>;
+export type UploadedFont = z.infer<typeof uploadedFonts>[number];
+/** The @font-face rules for an uploaded font, each file at the address `at` gives its path. */
+export declare function uploadedFontCss(f: UploadedFont, at: (src: string) => string): string;
 export type Look = {
     headingFont?: string;
     bodyFont?: string;
     brand?: string;
     accent?: string;
+    page?: string;
+    ink?: string;
+    muted?: string;
+    line?: string;
+    soft?: string;
+    palette?: Swatch[];
+    type?: TypeScale;
+    width?: number;
+    space?: Space;
     corners?: Corners;
     buttons?: Buttons;
+    /** Exact corners in px, past the presets: cards and pictures, and buttons (999: a pill). */
+    radius?: number;
+    buttonRadius?: number;
+    /** A border round buttons: px wide, in a role's or a palette colour's colour (else the button's own). */
+    buttonBorder?: {
+        width?: number;
+        color?: string;
+    };
+    /** Button styles of the business's own, past the theme's Main, Accent and Quiet: each button picks one by its name's slug. */
+    buttonStyles?: ButtonStyle[];
+    header?: HeaderLook;
+    /** The kit footer's background: "dark" (the site's own), a colour role, or a palette colour's slug. */
+    footer?: {
+        background?: string;
+    };
+    /** Fonts the business uploaded, each family's files (under fonts/ among the site's pictures). */
+    uploadedFonts?: UploadedFont[];
 };
 /** How readable one colour is on another (WCAG): 1 to 21. */
 export declare function contrast(a: string, b: string): number;
-/** The colours chosen that won't read: the brand colour is used for text and buttons on the page, so it must stand out from it. */
+/** Whether a colour is dark: white words read better on it than near-black ones. */
+export declare function isDark(color: string): boolean;
+/** The colours chosen that won't read: the brand colour is used for text and buttons on the page, so it must stand out from it; text must read on it; the site's own colours need names of their own. */
 export declare function lookProblems(look: Look | undefined, o: LookOptions): {
-    path: string[];
+    path: (string | number)[];
     message: string;
 }[];
 /** The Look as CSS variables: what's chosen, else the site's own. */
 export declare function lookVars(look: Look | undefined, o: LookOptions): Record<string, string>;
 /** The Look as a stylesheet for the page's head: `:root { … }`. */
 export declare function lookCss(look: Look | undefined, o: LookOptions): string;
+/**
+ * The colour a section's background names (a role, or one of the site's own by its slug), from the
+ * Look's variables; undefined when it names none.
+ */
+export declare function colourOf(name: string, vars: Record<string, string>): string | undefined;
+/**
+ * The class that draws a button in one of the business's own styles (kit-btn-3), from the Look's
+ * values (lookVars): undefined for the theme's own (main, accent, quiet) or a style it doesn't have.
+ */
+export declare function buttonStyleClass(style: string | undefined, vars: Record<string, string>): string | undefined;
 export {};