@mistriwork/engine 0.0.0-stage → 1.0.0-rc.10

package/dist/shared/themePartsCheck.d.ts

@@ -0,0 +1,21 @@
+/**
+ * What a theme may say beyond the recipe menu, checked: its patterns (`surface`), its parts' styles (`parts`) and
+ * its icons' weight (`type.icons`), for the spec (themeSpec.ts) and for a compiled theme read back (theme.ts
+ * parseThemes) alike. A module apart from themeParts.ts, which the first paint wears and these messages are no
+ * weight of.
+ */
+import type { ThemeIconWeight, ThemePart, ThemePartStyle, ThemePattern, ThemeSurface } from '../../schema/theme.js';
+/** The patterns, drawn by surfacesLook.css; each at a strength of 1 (omitted), 2 or 3. */
+export declare const PATTERN_KINDS: readonly ['paper', 'grain', 'grid', 'dots', 'lines', 'scanlines'];
+/** How much of the line color a pattern of this kind and strength is drawn in. */
+export declare const patternStrength: (pattern: ThemePattern) => number;
+/** Phosphor's weights a theme may pick for the icons: thin fades at 16px, duotone says a second tone no role names. */
+export declare const ICON_WEIGHTS: readonly ThemeIconWeight[];
+/** A role's path back to the role it names: `nav.onCurrent` is `navOnCurrent`, `chart[2]` is `chart3`. */
+export declare function pathRole(path: string): string;
+/** `surface`: a pattern behind the page, one behind the menu, each of the six at a strength; omitted strength is 1. */
+export declare function surfaceOf(raw: unknown, where: string): ThemeSurface;
+/** `parts`: each a published part, saying only what its menus hold. */
+export declare function partsOf(raw: unknown, where: string): Partial<Record<ThemePart, ThemePartStyle>>;
+/** `type.icons`: one of Phosphor's weights the icons are drawn in. */
+export declare function iconsOf(raw: unknown, where: string): ThemeIconWeight;

package/dist/shared/themePartsCheck.js

@@ -0,0 +1,91 @@
+import { PALETTE_TOKENS, rolePath } from './themeTokens.js';
+import { PART_CASES, PART_FACES, PART_LIFTS, PART_PROPERTIES, PART_RADII, PART_WEIGHTS, THEME_PARTS } from './themeParts.js';
+/** The patterns, drawn by surfacesLook.css; each at a strength of 1 (omitted), 2 or 3. */
+export const PATTERN_KINDS = ['paper', 'grain', 'grid', 'dots', 'lines', 'scanlines'];
+/** How much of the line color each strength draws a pattern in (surfacesLook.css says the same three). */
+const PATTERN_STRENGTH = { 1: 0.4, 2: 0.7, 3: 1 };
+/* Paper is two families of fibers crossing, twice the ink of one family of lines at a strength: at 40% its low end
+   read as a mesh over the page, not a sheet of paper. Its own steps are half again lighter. */
+const PAPER_STRENGTH = { 1: 0.2, 2: 0.45, 3: 0.7 };
+/** How much of the line color a pattern of this kind and strength is drawn in. */
+export const patternStrength = (pattern) => (pattern.kind === 'paper' ? PAPER_STRENGTH : PATTERN_STRENGTH)[pattern.strength ?? 1];
+/** Phosphor's weights a theme may pick for the icons: thin fades at 16px, duotone says a second tone no role names. */
+export const ICON_WEIGHTS = ['regular', 'light', 'bold', 'fill'];
+/** The color roles a part may name, by their paths: every color but the widths and the shadow's ink. */
+const PART_COLOR_PATHS = Object.keys(PALETTE_TOKENS)
+    .filter((role) => role !== 'shadow' && role !== 'rulesWeight' && role !== 'rulesControl')
+    .map(rolePath);
+/** A role's path back to the role it names: `nav.onCurrent` is `navOnCurrent`, `chart[2]` is `chart3`. */
+export function pathRole(path) {
+    const series = /^chart\[(\d)\]$/.exec(path);
+    if (series)
+        return `chart${Number(series[1]) + 1}`;
+    return path.replace(/\.(\w)/, (_, letter) => letter.toUpperCase());
+}
+function record(raw, where) {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw))
+        throw new Error(`${where} must be an object.`);
+    return raw;
+}
+/** `surface`: a pattern behind the page, one behind the menu, each of the six at a strength; omitted strength is 1. */
+export function surfaceOf(raw, where) {
+    const surface = record(raw, where);
+    const out = {};
+    for (const [place, value] of Object.entries(surface)) {
+        if (place !== 'ground' && place !== 'nav')
+            throw new Error(`${where} has no "${place}". It takes: ground, nav.`);
+        const pattern = record(value, `${where}.${place}`);
+        for (const key of Object.keys(pattern))
+            if (key !== 'kind' && key !== 'strength')
+                throw new Error(`${where}.${place} has no "${key}". It takes: kind, strength. A pattern is one of the platform's, drawn in the theme's line color.`);
+        if (!PATTERN_KINDS.includes(pattern.kind))
+            throw new Error(`${where}.${place}.kind must be one of ${PATTERN_KINDS.join(', ')}.`);
+        if (pattern.strength !== undefined && pattern.strength !== 1 && pattern.strength !== 2 && pattern.strength !== 3)
+            throw new Error(`${where}.${place}.strength must be 1, 2 or 3.`);
+        out[place] = { kind: pattern.kind, strength: (pattern.strength ?? 1) };
+    }
+    return out;
+}
+/** `parts`: each a published part, saying only what its menus hold. */
+export function partsOf(raw, where) {
+    const parts = record(raw, where);
+    const out = {};
+    for (const [part, value] of Object.entries(parts)) {
+        if (!THEME_PARTS.includes(part))
+            throw new Error(`${where} has no "${part}". The parts are: ${THEME_PARTS.join(', ')}.`);
+        const at = `${where}.${part}`;
+        const style = record(value, at);
+        for (const [property, said] of Object.entries(style)) {
+            if (!PART_PROPERTIES.includes(property))
+                throw new Error(`${at} has no "${property}". It takes: ${PART_PROPERTIES.join(', ')}. A part's size, spacing, order and visibility are the App's, never its theme's.`);
+            const menu = (why, values) => {
+                if (!values.includes(said))
+                    throw new Error(`${at}.${property} must be one of ${values.join(', ')}${why}.`);
+            };
+            if (property === 'ground' || property === 'ink' || property === 'edge') {
+                if (said === 'nav.currentInk')
+                    throw new Error(`${at}.${property} names nav.currentInk, which is now nav.onCurrent.`);
+                if (typeof said !== 'string' || !PART_COLOR_PATHS.includes(said))
+                    throw new Error(`${at}.${property} must be a color role by its path, like nav.ground or chart[2], never a hex.`);
+            }
+            else if (property === 'radius')
+                menu(": a corner the theme's shape already says, or square", PART_RADII);
+            else if (property === 'lift')
+                menu('', PART_LIFTS);
+            else if (property === 'face')
+                menu(": a face the theme's type already says", PART_FACES);
+            else if (property === 'weight')
+                menu('', PART_WEIGHTS);
+            else
+                menu('', PART_CASES);
+        }
+        out[part] = { ...style };
+    }
+    return out;
+}
+/** `type.icons`: one of Phosphor's weights the icons are drawn in. */
+export function iconsOf(raw, where) {
+    if (!ICON_WEIGHTS.includes(raw))
+        throw new Error(`${where} must be one of ${ICON_WEIGHTS.join(', ')}: thin draws a 1px stroke that fades at the 16px an icon is drawn at, and duotone a second tone no color role says.`);
+    return raw;
+}

package/dist/shared/themePresets.d.ts

@@ -0,0 +1,85 @@
+import type { ThemeDefinition, ThemePalette } from '../../schema/theme.js';
+import { THEME_PRESETS } from './builtInThemes.js';
+/** The built-in looks as the browser wears them: built from their specs (themeLooks.ts) by
+    scripts/theme-presets.mjs and committed, so no reader's first page carries the theme builder. */
+export { THEME_PRESETS };
+/** A theme's title weight (`type.roles.title.weight`): its own, else its base look's. Every heading reads it, as
+    `--heading-weight`. */
+export declare function headingWeight(theme: ThemeDefinition): number;
+export declare function themePreset(id: string | undefined): ThemeDefinition | undefined;
+/** The modes a theme has colors for: both, or the dark alone where it is dark-only (its light slot is the dark colors). */
+export declare function themeModes(theme: Pick<ThemeDefinition, 'scheme'>): readonly ('light' | 'dark')[];
+/** A theme's `scheme`, read the one way for an App's theme (themeSpec.ts) and a tenant's or host's (theme.ts parseThemes). */
+export declare function parseScheme(raw: unknown, where: string): ThemeDefinition['scheme'];
+/** The nav role its base look sets, which a theme wears on the bar only until it sets the role itself (recipeAttributes). */
+export declare function lookNavRole(theme: ThemeDefinition): import("../../schema/theme.js").ThemeTypeRoleDefinition | undefined;
+/** Inherit roles from a data-backed base, then overlay the author's explicit values. */
+export declare function inheritThemePreset(theme: ThemeDefinition): ThemeDefinition;
+/** Resolve structure first, then theme colors, then a named color variation.
+    A removed stored choice falls back to the authored default. */
+export declare function effectiveThemeDefinition(theme: ThemeDefinition, paletteId?: string): ThemeDefinition;
+/** App overrides are applied after inheritance and palette selection. Keep the
+    CSS expressions intact: legacy authored colors may use browser CSS syntax.
+    An authored accent is the first chart series too: a brand blue on the tabs
+    beside the look's own blue in the chart read as two products on one page. */
+/**
+ * A look's palette under the App's own accent. One colour is authored for the light ground and mixed toward white on
+ * the dark one; `{ light, dark }` says both, each worn as written. The soft tint is always derived from the accent worn.
+ */
+export declare function effectiveThemePalette(palette: ThemePalette, dark: boolean, own?: {
+    accent?: AppAccent;
+}): {
+    ground?: string;
+    surface: string;
+    field?: string;
+    raised?: string;
+    line?: string;
+    lineStrong?: string;
+    lineControl?: string;
+    ink: string;
+    inkMuted?: string;
+    inkSubtle?: string;
+    onAccent?: string;
+    accentInk?: string;
+    primary?: string;
+    onPrimary?: string;
+    statusGood?: string;
+    statusWarning?: string;
+    statusCritical?: string;
+    statusInfo?: string;
+    navGround?: string;
+    navInk?: string;
+    navMuted?: string;
+    navLine?: string;
+    navAccent?: string;
+    navCurrent?: string;
+    navOnCurrent?: string;
+    rulesSection?: string;
+    rulesHead?: string;
+    shadow?: string;
+    band?: string;
+    rulesWeight?: '1px' | '2px' | '3px';
+    rulesControl?: '0px' | '1px' | '2px';
+    chart2?: string;
+    chart3?: string;
+    chart4?: string;
+    chart5?: string;
+    chart6?: string;
+    chart7?: string;
+    chart8?: string;
+    accent: string;
+    focus: string;
+    link: string;
+    chart1: string;
+    accentSoft: string;
+};
+/** A worn palette's inks said whole: what a check or a fix measures when the theme named neither. */
+export declare function withInks<T extends ThemePalette>(palette: T): T & {
+    onAccent: string;
+    accentInk: string;
+};
+/** An App's accent: one colour for both grounds, or one for each. */
+export type AppAccent = string | {
+    light: string;
+    dark: string;
+};

package/dist/shared/themePresets.js

@@ -0,0 +1,139 @@
+import { THEME_PRESETS } from './builtInThemes.js';
+import { mergeType } from './themeType.js';
+import { deriveAccentInk, deriveOnAccent } from './themeInk.js';
+/** The built-in looks as the browser wears them: built from their specs (themeLooks.ts) by
+    scripts/theme-presets.mjs and committed, so no reader's first page carries the theme builder. */
+export { THEME_PRESETS };
+/** A theme's title weight (`type.roles.title.weight`): its own, else its base look's. Every heading reads it, as
+    `--heading-weight`. */
+export function headingWeight(theme) {
+    return theme.type?.roles?.title?.weight ?? themePreset(theme.base)?.type?.roles?.title?.weight ?? 700;
+}
+export function themePreset(id) {
+    return THEME_PRESETS.find((theme) => theme.id === id);
+}
+/** The modes a theme has colors for: both, or the dark alone where it is dark-only (its light slot is the dark colors). */
+export function themeModes(theme) {
+    return theme.scheme === 'dark-only' ? ['dark'] : ['light', 'dark'];
+}
+/** A theme's `scheme`, read the one way for an App's theme (themeSpec.ts) and a tenant's or host's (theme.ts parseThemes). */
+export function parseScheme(raw, where) {
+    if (raw !== undefined && raw !== 'dark' && raw !== 'dark-only')
+        throw new Error(`${where}.scheme must be "dark" or "dark-only".`);
+    return raw;
+}
+/** A palette over another. An accent set without a `focus` of its own drops the base's: that ring is a tint of
+    the base's hue, and under another accent it would be the wrong colour; the ring then follows the accent. The inks
+    chosen for the base's accent (`onAccent`, `accentInk`) go the same way: they read on that fill, not this one. */
+function overlayPalette(base, over) {
+    const merged = { ...base, ...over };
+    if (over?.accent !== undefined && over.focus === undefined)
+        delete merged.focus;
+    if (over?.accent !== undefined && over.accent !== base.accent) {
+        if (over.onAccent === undefined)
+            delete merged.onAccent;
+        if (over.accentInk === undefined)
+            delete merged.accentInk;
+    }
+    if (over?.primary !== undefined && over.primary !== base.primary && over.onPrimary === undefined)
+        delete merged.onPrimary;
+    return merged;
+}
+/** The nav role its base look sets, which a theme wears on the bar only until it sets the role itself (recipeAttributes). */
+export function lookNavRole(theme) {
+    return themePreset(theme.base)?.type?.roles?.nav;
+}
+/** Inherit roles from a data-backed base, then overlay the author's explicit values. */
+export function inheritThemePreset(theme) {
+    const base = themePreset(theme.base);
+    if (!base || base === theme)
+        return theme;
+    return {
+        ...theme,
+        light: overlayPalette(base.light, theme.light),
+        dark: overlayPalette(base.dark, theme.dark),
+        fonts: { ...base.fonts, ...theme.fonts },
+        radius: { ...base.radius, ...theme.radius },
+        recipes: { ...base.recipes, ...theme.recipes },
+        elevation: theme.elevation ?? base.elevation,
+        ...((theme.lifts ?? base.lifts) ? { lifts: { ...base.lifts, ...theme.lifts } } : {}),
+        ...((theme.type ?? base.type) ? { type: mergeType(base.type, theme.type) } : {}),
+        ...((theme.density ?? base.density) ? { density: theme.density ?? base.density } : {}),
+        ...((theme.motion ?? base.motion) ? { motion: theme.motion ?? base.motion } : {}),
+        ...((theme.rhythm ?? base.rhythm) ? { rhythm: theme.rhythm ?? base.rhythm } : {}),
+    };
+}
+/** Resolve structure first, then theme colors, then a named color variation.
+    A removed stored choice falls back to the authored default. */
+export function effectiveThemeDefinition(theme, paletteId) {
+    const inherited = inheritThemePreset(theme);
+    const selected = paletteId === 'default'
+        ? undefined
+        : (theme.palettes?.find((palette) => palette.id === (paletteId ?? theme.defaultPalette)) ??
+            theme.palettes?.find((palette) => palette.id === theme.defaultPalette));
+    if (!selected)
+        return inherited;
+    return { ...inherited, light: overlayPalette(inherited.light, selected.light), dark: overlayPalette(inherited.dark, selected.dark) };
+}
+/** App overrides are applied after inheritance and palette selection. Keep the
+    CSS expressions intact: legacy authored colors may use browser CSS syntax.
+    An authored accent is the first chart series too: a brand blue on the tabs
+    beside the look's own blue in the chart read as two products on one page. */
+/**
+ * A look's palette under the App's own accent. One colour is authored for the light ground and mixed toward white on
+ * the dark one; `{ light, dark }` says both, each worn as written. The soft tint is always derived from the accent worn.
+ */
+export function effectiveThemePalette(palette, dark, own = {}) {
+    const authored = typeof own.accent === 'object' ? (dark ? own.accent.dark : own.accent.light) : own.accent;
+    const accent = !authored
+        ? palette.accent
+        : typeof own.accent === 'string' && dark
+            ? `color-mix(in srgb, ${authored} 62%, white)`
+            : authored;
+    /* The inks an accent needs beyond itself: the theme's own, else the one that reads where the accent as it stands
+       would not. An App's accent is not the one the theme chose them for, so they are chosen again. */
+    const under = authored ? { ...palette, onAccent: undefined, accentInk: undefined, accent } : palette;
+    const onAccent = under.onAccent ?? deriveOnAccent(under);
+    const accentInk = under.accentInk ?? deriveAccentInk(under, Boolean(authored));
+    /* What a theme left as its accent and an App's accent is drawn as a line or a word, not a fill: a link, the ring, the
+       menu's current mark, the first series. It follows the accent's ink; a color the theme chose for it stays. */
+    const ink = accentInk ?? accent;
+    const follows = (value) => authored || value === undefined || value === palette.accent;
+    const out = {
+        ...palette,
+        accent,
+        focus: follows(palette.focus) ? ink : palette.focus,
+        link: follows(palette.link) ? ink : palette.link,
+        ...(palette.navAccent !== undefined && !authored && palette.navAccent === palette.accent ? { navAccent: ink } : {}),
+        chart1: authored ? ink : follows(palette.chart1) ? ink : palette.chart1,
+        accentSoft: authored
+            ? `color-mix(in srgb, ${authored} 14%, transparent)`
+            : (palette.accentSoft ?? `color-mix(in srgb, ${palette.accent} 14%, transparent)`),
+    };
+    if (onAccent)
+        out.onAccent = onAccent;
+    else
+        delete out.onAccent;
+    /* A form's primary action, where the theme names one: the words on it as the theme says, else the ones that read. */
+    if (palette.primary)
+        out.onPrimary = palette.onPrimary ?? onPrimaryOf(palette);
+    if (accentInk)
+        out.accentInk = accentInk;
+    else
+        delete out.accentInk;
+    return out;
+}
+/** A worn palette's inks said whole: what a check or a fix measures when the theme named neither. */
+export function withInks(palette) {
+    return {
+        ...palette,
+        onAccent: palette.onAccent ?? palette.ground ?? palette.surface,
+        accentInk: palette.accentInk ?? palette.accent,
+        ...(palette.primary ? { onPrimary: palette.onPrimary ?? onPrimaryOf(palette) } : {}),
+    };
+}
+/** The words on a form's primary action the theme left unsaid: the page's color where it reads on the fill, else the
+    ink, white or black, as for the accent. */
+function onPrimaryOf(palette) {
+    return deriveOnAccent({ ...palette, accent: palette.primary }) ?? palette.ground ?? palette.surface;
+}

package/dist/shared/themeRecipeWords.d.ts

@@ -0,0 +1,156 @@
+/**
+ * Every recipe value said in one sentence: what it draws, and what tells it from the values beside it. The menu
+ * (themeRecipes.ts) names the values and the sheets that draw them; this says them for a reader who chooses by
+ * text: an agent reading the schema, an author reading the gallery page (site theme-recipes.md) under each picture.
+ * Not on the first page: nothing here is drawn.
+ *
+ * Typed against the menu, so a value added to it without a sentence here is a type error, and a sentence for a
+ * value it does not have is one too. test/theme-recipe-words.test.ts holds the schema's descriptions and the
+ * gallery page to these words.
+ */
+import type { ThemeTypeRole } from '../../schema/theme.js';
+import type { RECIPE_MENU } from './themeRecipes.js';
+export declare const RECIPE_WORDS: {
+    readonly nav: {
+        readonly tint: 'The current entry sits on a soft tint of the accent; the other rows stay plain.';
+        readonly inverted: 'The current entry is inverted, the menu’s ink as its ground: the boldest mark, square and high-contrast.';
+        readonly wash: 'The current entry sits on a wash of the menu’s own accent, stronger than tint, for a menu in a brand color.';
+        readonly underline: 'The current entry in the top bar is marked by a 3px rule of the menu’s accent under it, with no fill.';
+        readonly pill: 'Every row is a rounded pill with room around it; the current one is filled in the accent’s tint, its word in the accent.';
+        readonly quiet: 'The current entry is barely shaded in the menu’s ink, with no accent at all: the calmest mark.';
+        readonly slot: 'The current entry is an ink block, as inverted, with a 3px marker of the menu’s accent beside it, like a tool’s slot on a pegboard.';
+    };
+    readonly bar: {
+        readonly plain: 'The top bar is the menu’s ground with a hairline under it.';
+        readonly ruled: 'The top bar ends in a 2px rule instead of a hairline, and casts no shadow.';
+        readonly dark: 'The top bar takes the menu’s ground and inks, so a dark or brand-colored menu runs across the top too.';
+        readonly airy: 'The top bar is taller, with a large bold brand name and a wide, raised search box.';
+        readonly soft: 'The top bar is a panel in the surface color with a hairline under it, apart from the menu beside it.';
+    };
+    readonly tabs: {
+        readonly pill: 'The chosen tab is a filled pill; the others are plain words.';
+        readonly inverted: 'The chosen tab is inverted, the ink as its ground: square, high-contrast.';
+        readonly underline: 'The tabs stand on a hairline, wide apart, the chosen one underlined in the accent with no fill.';
+        readonly rule: 'The chosen tab is underlined by a 2px rule in the link color with no fill, the tabs packed as written.';
+        readonly chosen: 'The chosen tab sits on a soft tint of the accent in the ink, wider apart, with no underline.';
+    };
+    readonly windows: {
+        readonly segmented: 'The period picker is a segmented control, the chosen period filled.';
+        readonly lifted: 'The period picker is a sunken tray, the chosen period a raised white key on it.';
+        readonly chosen: 'The period picker has no tray; the chosen period sits on a soft tint of the accent.';
+    };
+    readonly stat: {
+        readonly plain: 'A stat is a figure and its label with no frame.';
+        readonly framed: 'Each stat is a card framed by a line in the ink: square and stark.';
+        readonly topline: 'Each stat card has a 3px rule in the first chart color along its top.';
+        readonly ruled: 'Each stat stands open under a 2px rule in the ink, with no card or shadow, like a printed page.';
+        readonly icon: 'Each stat is a card with its icon in a round tint of a chart color above the label, and a large bold figure.';
+        readonly panel: 'Each stat is a panel on the surface with a hairline and the look’s card shadow.';
+        readonly divided: 'The stats share one strip, parted by hairlines, with no cards: the quietest arrangement.';
+    };
+    readonly section: {
+        readonly open: 'A dashboard section stands open on the page under its rule.';
+        readonly card: 'Each dashboard section is a card with a hairline and the card shadow, its table drawn to the card’s edges.';
+        readonly panel: 'Each dashboard section is a panel like card, but a section in the side column stays open on the page.';
+    };
+    readonly fields: {
+        readonly open: 'A record’s field groups and forms stand open on the page.';
+        readonly panel: 'Each field group and form is a panel on the surface with a hairline; its labels stay as the look draws them.';
+        readonly card: 'Each field group and form is a card with a hairline and the card shadow, its labels muted and the values in the interface face.';
+        readonly rail: 'Field groups stand open, and the side column’s cards become captioned groups between hairlines.';
+    };
+    readonly table: {
+        readonly open: 'Rows stand on the page under a rule, the head as the look draws it.';
+        readonly tinted: 'As open, but a hovered row takes a tint of the accent and its check boxes the accent: the same until a pointer moves.';
+        readonly hairline: 'The head sits on a hairline in 12.5px semibold, the rows in 13.5px: open, a little roomier.';
+        readonly card: 'The table is a card: muted 12px heads on a hairline, faint row rules and taller rows.';
+        readonly quiet: 'The table is a card of quiet rows, a work queue’s open button folded to a chevron at the row’s end.';
+        readonly banded: 'As open, but every other row lies on the band color (colors.band, or the raised ground), each ink measured on it.';
+    };
+    readonly status: {
+        readonly dot: 'A status word in its tone with a dot before it.';
+        readonly pill: 'A status word on a pill tinted with its tone, without a dot.';
+        readonly 'pill-dot': 'A status word on a pill tinted with its tone, with a small dot inside it.';
+        readonly quiet: 'A status word in the ink with a dot in its tone: the color is only the dot.';
+    };
+    readonly board: {
+        readonly ruled: 'A board’s lanes are outlined by a hairline; its cards lie flat on them.';
+        readonly soft: 'As ruled, but each card casts the look’s card shadow: only the cards lift.';
+        readonly strip: 'Each lane is headed by a strip tinted with its tone, its cards white on the lane.';
+    };
+    readonly chart: {
+        readonly plain: 'A chart is its lines or bars on a light grid.';
+        readonly wash: 'An area under a line is washed in the first chart color.';
+        readonly gradient: 'An area fades from the line down to nothing, the line heavier and the grid dashed.';
+        readonly line: 'Only the lines: no areas, a fine solid grid and small ticks.';
+    };
+    readonly buttons: {
+        readonly accent: 'The primary button is filled in the accent; the rest are quiet.';
+        readonly raised: 'Secondary buttons are white keys with a hairline and a small shadow, raised off the page.';
+        readonly keyed: 'Buttons are hard-edged keys: the primary one filled in the accent with an ink edge, like a hazard tag, the rest edged in the ink.';
+    };
+    readonly links: {
+        readonly plain: 'A link to another record is in the link color without an underline.';
+        readonly underline: 'A link to another record is underlined, so it reads as one without color.';
+    };
+    readonly rules: {
+        readonly ink: 'A record’s sections are announced by a 2px rule in the ink.';
+        readonly hairline: 'A record’s sections are announced by a 1px hairline instead.';
+        readonly double: 'A 1px hairline announces a record’s sections as in hairline, a box is ruled in the strong line, and a table’s heads close with a double rule.';
+    };
+    readonly avatar: {
+        readonly plain: 'A record’s avatar is its initials in a small square.';
+        readonly large: 'A record’s avatar is 44px, in the look’s corners.';
+        readonly round: 'A record’s avatar is 44px and round, and the menu’s and the account’s marks are round too.';
+    };
+    readonly workflow: {
+        readonly markers: 'A workflow is a track of thin segments, the label under each.';
+        readonly pills: 'A workflow is a row of pills with a dot each: a step walked in the good tint, the current one in the accent’s.';
+    };
+    readonly banner: {
+        readonly tint: 'A dashboard’s banner note is a box tinted with the accent.';
+        readonly gradient: 'A dashboard’s banner note is a soft gradient from the accent to the second chart color.';
+        readonly plain: 'A dashboard’s banner note stands on the page with no box, its eyebrow in the link color.';
+    };
+    readonly steps: {
+        readonly flat: 'A breakdown drawn as steps is a row of cards on the surface with a hairline.';
+        readonly tinted: 'Each step’s card is tinted with its tone: good, warning, critical or the accent.';
+        readonly strip: 'The steps are one strip of figures parted by hairlines, with no cards or marks.';
+    };
+    readonly lanes: {
+        readonly tint: 'A board lane’s value in its head is on its tone’s tint.';
+        readonly tag: 'A board lane’s value is a solid tag in its tone, in white capitals.';
+        readonly plain: 'A board lane’s value is its name in plain ink.';
+    };
+    readonly header: {
+        readonly plain: 'A record’s head and a list’s stand on the page’s ground, under the trail’s hairline.';
+        readonly band: 'A record’s head and a list’s are one band of the raised ground from edge to edge: the trail, the title, its status, facts and verbs, a list’s tabs and filters; the contents keep their edge.';
+        readonly hero: 'A band, with the record’s avatar large beside its title (above it on a phone); a record without one, and a list, draw the band.';
+    };
+    readonly required: {
+        readonly star: 'A required field wears a red star after its label; an optional one wears nothing.';
+        readonly 'optional-word': 'A required field wears nothing and an optional one says “(optional)” after its label, quietly; the form’s own words, in the reader’s language.';
+    };
+    readonly checkbox: {
+        readonly native: 'A checkbox is the browser’s own, in the accent.';
+        readonly drawn: 'A checkbox is drawn: a square in the field’s fill with the control’s edge and corner, the accent with a check when on.';
+    };
+    readonly formStep: {
+        readonly plain: 'A multi-step form’s step header is its title over its lead, with nothing between it and the fields.';
+        readonly ruled: 'A multi-step form’s step header ends in a hairline, which parts it from the fields under it.';
+    };
+    readonly actionBar: {
+        readonly plain: 'A form’s sticky action bar stands on a hairline over the page.';
+        readonly raised: 'A form’s sticky action bar is raised on the surface with a soft lift, in place of the hairline.';
+    };
+};
+/** One part's values said, in the menu's order: "`tint`: …. `inverted`: …." — the schema's description of the part. */
+export declare function recipeDescription(part: keyof typeof RECIPE_MENU): string;
+/**
+ * Each type role said in a sentence: what it draws and what it takes. A role is not a menu of values but a few
+ * properties (themeType.ts holds their ranges), so this is the schema's description of the role and the gallery's
+ * Type section, where the three recipes it replaced (labels, headings, figures) were.
+ */
+export declare const TYPE_WORDS: {
+    readonly [Role in ThemeTypeRole]: string;
+};