@samva/markup 0.7.0 → 0.9.0

package/dist/theme-css-hFqcPSar.js

@@ -0,0 +1,587 @@
+import { Result } from "better-result";
+import { generate, parse, walk } from "css-tree";
+//#region src/email/css-color.ts
+const clamp = (value, low = 0, high = 1) => value < low ? low : value > high ? high : value;
+const toGamma = (channel) => channel <= .0031308 ? 12.92 * channel : 1.055 * channel ** (1 / 2.4) - .055;
+const toLinear = (channel) => channel <= .04045 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+/** OKLab is the interpolation space Tailwind mixes in, so conversions run both ways. */
+const oklabToRgb = (lightness, a, b, alpha) => {
+	const l = (lightness + .3963377774 * a + .2158037573 * b) ** 3;
+	const m = (lightness - .1055613458 * a - .0638541728 * b) ** 3;
+	const s = (lightness - .0894841775 * a - 1.291485548 * b) ** 3;
+	return {
+		r: toGamma(4.0767416621 * l - 3.3077115913 * m + .2309699292 * s),
+		g: toGamma(-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s),
+		b: toGamma(-.0041960863 * l - .7034186147 * m + 1.707614701 * s),
+		a: alpha
+	};
+};
+const rgbToOklab = (color) => {
+	const r = toLinear(color.r);
+	const g = toLinear(color.g);
+	const b = toLinear(color.b);
+	const l = Math.cbrt(.4122214708 * r + .5363325363 * g + .0514459929 * b);
+	const m = Math.cbrt(.2119034982 * r + .6806995451 * g + .1073969566 * b);
+	const s = Math.cbrt(.0883024619 * r + .2817188376 * g + .6299787005 * b);
+	return {
+		L: .2104542553 * l + .793617785 * m - .0040720468 * s,
+		a: 1.9779984951 * l - 2.428592205 * m + .4505937099 * s,
+		b: .0259040371 * l + .7827717662 * m - .808675766 * s,
+		alpha: color.a
+	};
+};
+const hslToRgb = (hue, saturation, lightness, alpha) => {
+	const h = (hue % 360 + 360) % 360;
+	const c = (1 - Math.abs(2 * lightness - 1)) * saturation;
+	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+	const m = lightness - c / 2;
+	const [r, g, b] = [
+		[
+			c,
+			x,
+			0
+		],
+		[
+			x,
+			c,
+			0
+		],
+		[
+			0,
+			c,
+			x
+		],
+		[
+			0,
+			x,
+			c
+		],
+		[
+			x,
+			0,
+			c
+		],
+		[
+			c,
+			0,
+			x
+		]
+	][Math.min(5, Math.floor(h / 60))];
+	return {
+		r: r + m,
+		g: g + m,
+		b: b + m,
+		a: alpha
+	};
+};
+/** The named colors an email template actually reaches for; anything else stays literal. */
+const NAMED = {
+	transparent: "#00000000",
+	black: "#000000",
+	white: "#ffffff",
+	red: "#ff0000",
+	green: "#008000",
+	blue: "#0000ff",
+	gray: "#808080",
+	grey: "#808080",
+	silver: "#c0c0c0",
+	yellow: "#ffff00",
+	orange: "#ffa500",
+	purple: "#800080",
+	navy: "#000080",
+	teal: "#008080",
+	olive: "#808000",
+	maroon: "#800000",
+	lime: "#00ff00",
+	aqua: "#00ffff",
+	cyan: "#00ffff",
+	fuchsia: "#ff00ff",
+	magenta: "#ff00ff"
+};
+const number = (token, reference = 1) => {
+	const text = token.trim();
+	if (text === "none") return 0;
+	if (text.endsWith("%")) {
+		const value = Number.parseFloat(text.slice(0, -1));
+		return Number.isFinite(value) ? value / 100 * reference : void 0;
+	}
+	const value = Number.parseFloat(text);
+	return Number.isFinite(value) ? value : void 0;
+};
+const angle = (token) => {
+	const text = token.trim();
+	const value = Number.parseFloat(text);
+	if (!Number.isFinite(value)) return void 0;
+	if (text.endsWith("turn")) return value * 360;
+	if (text.endsWith("rad")) return value * 180 / Math.PI;
+	if (text.endsWith("grad")) return value * .9;
+	return value;
+};
+/** Split a function's arguments on top-level commas and `/`, keeping nested calls intact. */
+const argumentTokens = (body) => {
+	const parts = [];
+	let alpha;
+	let depth = 0;
+	let current = "";
+	let afterSlash = false;
+	for (const character of body) {
+		if (character === "(") depth += 1;
+		if (character === ")") depth -= 1;
+		if (depth === 0 && (character === "," || character === " " || character === "/")) {
+			if (character === "/") {
+				if (current.trim() !== "") parts.push(current.trim());
+				current = "";
+				afterSlash = true;
+				continue;
+			}
+			if (current.trim() !== "") {
+				if (afterSlash) alpha = current.trim();
+				else parts.push(current.trim());
+			}
+			current = "";
+			continue;
+		}
+		current += character;
+	}
+	if (current.trim() !== "") {
+		if (afterSlash) alpha = current.trim();
+		else parts.push(current.trim());
+	}
+	return alpha === void 0 ? { parts } : {
+		parts,
+		alpha
+	};
+};
+/** Read one function call at the start of `value`, returning its name and body. */
+const functionCall = (value) => {
+	const match = /^([a-zA-Z-]+)\(/.exec(value.trim());
+	if (match === null) return void 0;
+	const text = value.trim();
+	let depth = 0;
+	for (let index = match[0].length - 1; index < text.length; index++) if (text[index] === "(") depth += 1;
+	else if (text[index] === ")") {
+		depth -= 1;
+		if (depth === 0) return {
+			name: match[1].toLowerCase(),
+			body: text.slice(match[0].length, index)
+		};
+	}
+};
+/** Parse any supported color notation into extended sRGB. `undefined` means "leave it alone". */
+const parseColor = (value) => {
+	const text = value.trim();
+	const named = NAMED[text.toLowerCase()];
+	if (named !== void 0) return parseColor(named);
+	if (text.startsWith("#")) {
+		const hex = text.slice(1);
+		const expand = (part) => Number.parseInt(part.repeat(2 / part.length), 16) / 255;
+		if (hex.length === 3 || hex.length === 4) return {
+			r: expand(hex[0]),
+			g: expand(hex[1]),
+			b: expand(hex[2]),
+			a: hex.length === 4 ? expand(hex[3]) : 1
+		};
+		if (hex.length === 6 || hex.length === 8) return {
+			r: Number.parseInt(hex.slice(0, 2), 16) / 255,
+			g: Number.parseInt(hex.slice(2, 4), 16) / 255,
+			b: Number.parseInt(hex.slice(4, 6), 16) / 255,
+			a: hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1
+		};
+		return;
+	}
+	const call = functionCall(text);
+	if (call === void 0) return void 0;
+	const { parts, alpha } = argumentTokens(call.body);
+	const opacity = alpha === void 0 ? 1 : number(alpha) ?? 1;
+	switch (call.name) {
+		case "rgb":
+		case "rgba": {
+			const [r, g, b, legacy] = parts;
+			if (r === void 0 || g === void 0 || b === void 0) return void 0;
+			const channel = (token) => {
+				const parsed = number(token, 255);
+				return parsed === void 0 ? void 0 : parsed / 255;
+			};
+			const [red, green, blue] = [
+				channel(r),
+				channel(g),
+				channel(b)
+			];
+			if (red === void 0 || green === void 0 || blue === void 0) return void 0;
+			return {
+				r: red,
+				g: green,
+				b: blue,
+				a: legacy === void 0 ? opacity : number(legacy) ?? 1
+			};
+		}
+		case "hsl":
+		case "hsla": {
+			const [h, s, l, legacy] = parts;
+			if (h === void 0 || s === void 0 || l === void 0) return void 0;
+			const hue = angle(h);
+			const saturation = number(s);
+			const lightness = number(l);
+			if (hue === void 0 || saturation === void 0 || lightness === void 0) return void 0;
+			return hslToRgb(hue, saturation, lightness, legacy === void 0 ? opacity : number(legacy) ?? 1);
+		}
+		case "oklch": {
+			const [l, c, h] = parts;
+			if (l === void 0 || c === void 0 || h === void 0) return void 0;
+			const lightness = number(l);
+			const chroma = number(c, .4);
+			const hue = angle(h);
+			if (lightness === void 0 || chroma === void 0 || hue === void 0) return void 0;
+			const radians = hue * Math.PI / 180;
+			return oklabToRgb(lightness, chroma * Math.cos(radians), chroma * Math.sin(radians), opacity);
+		}
+		case "oklab": {
+			const [l, a, b] = parts;
+			if (l === void 0 || a === void 0 || b === void 0) return void 0;
+			const lightness = number(l);
+			const green = number(a, .4);
+			const blue = number(b, .4);
+			if (lightness === void 0 || green === void 0 || blue === void 0) return void 0;
+			return oklabToRgb(lightness, green, blue, opacity);
+		}
+		case "color-mix": return mixColors(call.body);
+		default: return;
+	}
+};
+/** `color-mix(in <space>, <color> <pct>?, <color> <pct>?)` — Tailwind's opacity modifier. */
+const mixColors = (body) => {
+	const stops = body.split(",").map((part) => part.trim());
+	const [space, first, second] = stops;
+	if (space === void 0 || first === void 0 || second === void 0 || stops.length !== 3) return void 0;
+	const method = /^in\s+([a-z-]+)/i.exec(space)?.[1]?.toLowerCase();
+	if (method === void 0) return void 0;
+	const stop = (text) => {
+		const percentage = /\s([\d.]+)%$/.exec(text);
+		const color = parseColor(percentage === null ? text : text.slice(0, percentage.index));
+		if (color === void 0) return void 0;
+		return {
+			color,
+			weight: percentage === null ? void 0 : Number.parseFloat(percentage[1]) / 100
+		};
+	};
+	const left = stop(first);
+	const right = stop(second);
+	if (left === void 0 || right === void 0) return void 0;
+	const leftWeight = left.weight ?? (right.weight === void 0 ? .5 : 1 - right.weight);
+	const total = leftWeight + (right.weight ?? 1 - leftWeight);
+	if (total === 0) return void 0;
+	const p = leftWeight / total;
+	const alpha = left.color.a * p + right.color.a * (1 - p);
+	const mix = (l, r) => alpha === 0 ? 0 : (l * left.color.a * p + r * right.color.a * (1 - p)) / alpha;
+	if (method === "srgb") return {
+		r: mix(left.color.r, right.color.r),
+		g: mix(left.color.g, right.color.g),
+		b: mix(left.color.b, right.color.b),
+		a: alpha
+	};
+	const l = rgbToOklab(left.color);
+	const r = rgbToOklab(right.color);
+	const channel = (a, b) => alpha === 0 ? 0 : (a * left.color.a * p + b * right.color.a * (1 - p)) / alpha;
+	return oklabToRgb(channel(l.L, r.L), channel(l.a, r.a), channel(l.b, r.b), alpha);
+};
+const byte = (channel) => Math.round(clamp(channel) * 255).toString(16).padStart(2, "0");
+/** sRGB hex, or `rgba()` when the color is not opaque. */
+const formatColor = (color) => color.a >= 1 ? `#${byte(color.r)}${byte(color.g)}${byte(color.b)}` : `rgba(${Math.round(clamp(color.r) * 255)},${Math.round(clamp(color.g) * 255)},${Math.round(clamp(color.b) * 255)},${Math.round(clamp(color.a) * 1e3) / 1e3})`;
+const MODERN_COLOR = /\b(oklch|oklab|color-mix|lab|lch)\(/i;
+/** Rewrite every modern color function in a declaration value; other text is untouched. */
+const downlevelColors = (value) => {
+	if (!MODERN_COLOR.test(value)) return value;
+	let result = "";
+	let rest = value;
+	while (rest.length > 0) {
+		const match = MODERN_COLOR.exec(rest);
+		if (match === null || match.index === void 0) {
+			result += rest;
+			break;
+		}
+		result += rest.slice(0, match.index);
+		const remainder = rest.slice(match.index);
+		const call = functionCall(remainder);
+		if (call === void 0) {
+			result += remainder;
+			break;
+		}
+		const consumed = remainder.indexOf("(") + call.body.length + 2;
+		const color = parseColor(remainder.slice(0, consumed));
+		result += color === void 0 ? remainder.slice(0, consumed) : formatColor(color);
+		rest = remainder.slice(consumed);
+	}
+	return result;
+};
+//#endregion
+//#region src/theme-css.ts
+/** Theme-variable namespaces a brand may set: Tailwind's, minus anything that is not a look. */
+const BRAND_NAMESPACES = [
+	"--color-",
+	"--font-",
+	"--text-",
+	"--leading-",
+	"--tracking-",
+	"--radius-",
+	"--spacing",
+	"--container-",
+	"--shadow-"
+];
+const BRAND_PROPERTY = /^--[a-z][a-z0-9-]*$/;
+const BRAND_UNSAFE_VALUE = /[{};<>\\@]|url\s*\(|expression\s*\(|\/\*/i;
+const BRAND_DARK_MEDIA = /^\(\s*prefers-color-scheme\s*:\s*dark\s*\)$/i;
+const BRAND_FONT_DESCRIPTORS = /* @__PURE__ */ new Set([
+	"font-family",
+	"src",
+	"font-weight",
+	"font-style",
+	"font-display",
+	"unicode-range"
+]);
+/** The theme variable a dark-mode color lowers to: `--color-brand` → `--color-brand-dark`. */
+const darkVariableName = (property) => `${property}-dark`;
+const spanOfNode = (node) => ({
+	start: node.loc?.start.offset ?? 0,
+	end: node.loc?.end.offset ?? 0
+});
+const unquoteFamily = (value) => {
+	const trimmed = value.trim();
+	const quoted = /^(['"])(.*)\1$/s.exec(trimmed);
+	return quoted === null ? trimmed : quoted[2].replace(/\\(.)/g, "$1");
+};
+const quoteFamily = (family) => `"${family.replace(/["\\]/g, "\\$&")}"`;
+/** Parse brand theme CSS against the closed grammar above. */
+const parseBrandCss = (css) => {
+	const diagnostics = [];
+	const report = (code, message, span) => {
+		diagnostics.push({
+			code,
+			message,
+			span
+		});
+	};
+	const variables = {};
+	const dark = {};
+	const fontFaces = [];
+	const ast = parse(css, {
+		positions: true,
+		parseCustomProperty: false,
+		onParseError: (error) => {
+			const offset = error.offset ?? 0;
+			report("brand-css-syntax", `CSS syntax error: ${error.message}`, {
+				start: offset,
+				end: offset
+			});
+		}
+	});
+	const sourceOf = (node) => node.loc === void 0 || node.loc === null ? generate(node).trim() : css.slice(node.loc.start.offset, node.loc.end.offset).trim();
+	const readTheme = (node, into, scope) => {
+		if (node.type !== "Atrule" || node.block === null) return;
+		if (node.prelude !== null && generate(node.prelude).trim() !== "") report("brand-css-theme-prelude", "@theme takes no options in a brand theme.", spanOfNode(node));
+		for (const child of node.block.children) {
+			if (child.type !== "Declaration") {
+				report("brand-css-unsupported", "@theme may contain only theme variables (--name: value;).", spanOfNode(child));
+				continue;
+			}
+			const property = child.property;
+			const value = sourceOf(child.value);
+			const span = spanOfNode(child);
+			if (!BRAND_PROPERTY.test(property)) {
+				report("brand-css-property", `${property} is not a theme variable; name theme variables --namespace-name.`, span);
+				continue;
+			}
+			if (!BRAND_NAMESPACES.some((namespace) => property.startsWith(namespace))) {
+				report("brand-css-namespace", `${property} is outside the brand namespaces (${BRAND_NAMESPACES.map((namespace) => namespace.endsWith("-") ? `${namespace}*` : namespace).join(", ")}).`, span);
+				continue;
+			}
+			if (scope === "dark" && !property.startsWith("--color-")) {
+				report("brand-css-dark-namespace", `${property}: the dark-mode @theme sets colors (--color-*) only.`, span);
+				continue;
+			}
+			if (value === "" || BRAND_UNSAFE_VALUE.test(value) || child.important !== false) {
+				report("brand-css-value", `${property} has a value a theme variable cannot take; write a plain value without braces, semicolons, url() or !important.`, span);
+				continue;
+			}
+			if (property in into) {
+				report("brand-css-duplicate", `${property} is declared twice.`, span);
+				continue;
+			}
+			into[property] = value;
+		}
+	};
+	const readFontFace = (node) => {
+		if (node.type !== "Atrule" || node.block === null) return;
+		const face = {};
+		for (const child of node.block.children) {
+			if (child.type !== "Declaration") {
+				report("brand-css-unsupported", "@font-face may contain only descriptors.", spanOfNode(child));
+				continue;
+			}
+			const property = child.property.toLowerCase();
+			const value = sourceOf(child.value);
+			const span = spanOfNode(child);
+			if (!BRAND_FONT_DESCRIPTORS.has(property)) {
+				report("brand-css-font-descriptor", `@font-face ${property} is not supported; use ${[...BRAND_FONT_DESCRIPTORS].join(", ")}.`, span);
+				continue;
+			}
+			if (property === "src") {
+				let urls = 0;
+				let invalid = false;
+				walk(child.value, (part) => {
+					if (part.type === "Url") {
+						urls++;
+						const path = part.value.replace(/[?#].*$/, "");
+						if (!/^https:\/\/[^\s]+$/i.test(part.value)) invalid = true;
+						else if (!/\.woff2$/i.test(path) && !/format\(\s*['"]?woff2/i.test(value)) invalid = true;
+					} else if (part.type === "Function" && part.name.toLowerCase() === "local") invalid = true;
+				});
+				if (urls === 0 || invalid) {
+					report("brand-css-font-src", "A brand @font-face src must be one or more https url()s to WOFF2 files.", span);
+					continue;
+				}
+				face.src = value;
+				continue;
+			}
+			if (BRAND_UNSAFE_VALUE.test(value)) {
+				report("brand-css-value", `@font-face ${property} has an unsupported value.`, span);
+				continue;
+			}
+			if (property === "font-family") face.family = unquoteFamily(value);
+			if (property === "font-weight") face.weight = value;
+			if (property === "font-style") face.style = value;
+			if (property === "font-display") face.display = value;
+			if (property === "unicode-range") face.unicodeRange = value;
+		}
+		if (face.family === void 0 || face.family === "" || face.src === void 0) {
+			report("brand-css-font-incomplete", "A brand @font-face needs a font-family and an https WOFF2 src.", spanOfNode(node));
+			return;
+		}
+		fontFaces.push({
+			family: face.family,
+			src: face.src,
+			...face.weight === void 0 ? {} : { weight: face.weight },
+			...face.style === void 0 ? {} : { style: face.style },
+			...face.display === void 0 ? {} : { display: face.display },
+			...face.unicodeRange === void 0 ? {} : { unicodeRange: face.unicodeRange }
+		});
+	};
+	if (ast.type === "StyleSheet") for (const node of ast.children) {
+		if (node.type === "Atrule" && node.block !== null) {
+			const name = node.name.toLowerCase();
+			if (name === "theme") {
+				readTheme(node, variables, "light");
+				continue;
+			}
+			if (name === "font-face") {
+				readFontFace(node);
+				continue;
+			}
+			if (name === "media" && node.prelude !== null && BRAND_DARK_MEDIA.test(generate(node.prelude).trim())) {
+				for (const child of node.block.children) if (child.type === "Atrule" && child.name.toLowerCase() === "theme") readTheme(child, dark, "dark");
+				else report("brand-css-unsupported", "The dark-mode block may contain only @theme.", spanOfNode(child));
+				continue;
+			}
+		}
+		report("brand-css-unsupported", "A brand theme contains only @theme, a dark-mode @theme (@media (prefers-color-scheme: dark)), and @font-face.", spanOfNode(node));
+	}
+	for (const property of Object.keys(dark)) if (darkVariableName(property) in variables) report("brand-css-dark-conflict", `${darkVariableName(property)} and the dark-mode ${property} name the same theme variable; keep one.`, {
+		start: 0,
+		end: 0
+	});
+	return diagnostics.length > 0 ? Result.err(diagnostics) : Result.ok({
+		variables,
+		dark,
+		fontFaces
+	});
+};
+const printDeclarations = (entries, indent) => Object.entries(entries).map(([property, value]) => `${indent}${property}: ${value};`).join("\n");
+const printFontFace = (face) => [
+	"@font-face {",
+	`  font-family: ${quoteFamily(face.family)};`,
+	`  src: ${face.src};`,
+	...face.weight === void 0 ? [] : [`  font-weight: ${face.weight};`],
+	...face.style === void 0 ? [] : [`  font-style: ${face.style};`],
+	...face.display === void 0 ? [] : [`  font-display: ${face.display};`],
+	...face.unicodeRange === void 0 ? [] : [`  unicode-range: ${face.unicodeRange};`],
+	"}"
+].join("\n");
+/**
+* Serialize a brand theme in canonical form: font faces, then the light
+* `@theme`, then the dark-mode `@theme`. Empty sections are omitted, and the
+* output always parses back to the same value.
+*/
+const printBrandCss = (brand) => {
+	const blocks = [
+		...brand.fontFaces.map(printFontFace),
+		...Object.keys(brand.variables).length === 0 ? [] : [`@theme {\n${printDeclarations(brand.variables, "  ")}\n}`],
+		...Object.keys(brand.dark).length === 0 ? [] : [`@media (prefers-color-scheme: dark) {\n  @theme {\n${printDeclarations(brand.dark, "    ")}\n  }\n}`]
+	];
+	return blocks.length === 0 ? "" : `${blocks.join("\n\n")}\n`;
+};
+/** The brand color, and the text color that sits on it. */
+const BRAND_COLOR_VARIABLE = "--color-brand";
+const BRAND_FOREGROUND_VARIABLE = "--color-brand-foreground";
+/** WCAG relative luminance of an sRGB channel triple in 0–1. */
+const relativeLuminance = (r, g, b) => {
+	const linear = (channel) => {
+		const clamped = Math.min(1, Math.max(0, channel));
+		return clamped <= .04045 ? clamped / 12.92 : ((clamped + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * linear(r) + .7152 * linear(g) + .0722 * linear(b);
+};
+/**
+* Black or white, whichever has the higher WCAG contrast ratio against
+* `color`. A translucent color is judged over white, the page an email sits on.
+* `undefined` when the color is not one `parseColor` evaluates (a `var()`,
+* `currentColor`, `lab()`, a named color outside its table): nothing is
+* guessed for it.
+*/
+const contrastForeground = (color) => {
+	const parsed = parseColor(color);
+	if (parsed === void 0) return void 0;
+	const alpha = Math.min(1, Math.max(0, parsed.a));
+	const over = (channel) => channel * alpha + (1 - alpha);
+	const luminance = relativeLuminance(over(parsed.r), over(parsed.g), over(parsed.b));
+	return 1.05 / (luminance + .05) > (luminance + .05) / .05 ? "#ffffff" : "#000000";
+};
+/**
+* The text-on-brand colors a brand gets when it leaves them out: for the light
+* theme and, when the brand sets a dark-mode brand color, for dark mode. Each
+* is the `contrastForeground` of the brand color it sits on. A brand that sets
+* the foreground, or whose brand color does not evaluate, gets no default.
+*/
+const brandForegroundDefaults = (brand) => {
+	const light = brand.variables["--color-brand-foreground"] === void 0 && brand.variables["--color-brand"] !== void 0 ? contrastForeground(brand.variables[BRAND_COLOR_VARIABLE]) : void 0;
+	const darkBrand = brand.dark[BRAND_COLOR_VARIABLE];
+	return {
+		light,
+		dark: darkBrand !== void 0 && brand.dark["--color-brand-foreground"] === void 0 && brand.variables[darkVariableName("--color-brand-foreground")] === void 0 ? contrastForeground(darkBrand) : void 0
+	};
+};
+/**
+* A brand theme as flat theme variables, the way a build compiles it. Email
+* inlining resolves `var()` once, so a dark-mode `@theme` cannot switch a
+* value at run time; each dark color lowers to its `-dark` theme variable,
+* which `dark:` utilities read (`dark:bg-brand-dark`). A text-on-brand color
+* the brand leaves out is filled in by `brandForegroundDefaults`, so every
+* build compiles the same default and the stored CSS never carries it.
+*/
+const brandThemeVariables = (brand) => {
+	const defaults = brandForegroundDefaults(brand);
+	return {
+		...brand.variables,
+		...defaults.light === void 0 ? {} : { [BRAND_FOREGROUND_VARIABLE]: defaults.light },
+		...Object.fromEntries(Object.entries(brand.dark).map(([property, value]) => [darkVariableName(property), value])),
+		...defaults.dark === void 0 ? {} : { [darkVariableName(BRAND_FOREGROUND_VARIABLE)]: defaults.dark }
+	};
+};
+/** The stylesheet Tailwind compiles for `@import "samva:brand"`: `brandThemeVariables` and the font faces. */
+const brandTailwindCss = (brand) => printBrandCss({
+	fontFaces: brand.fontFaces,
+	variables: brandThemeVariables(brand),
+	dark: {}
+});
+//#endregion
+export { brandThemeVariables as a, parseBrandCss as c, formatColor as d, parseColor as f, brandTailwindCss as i, printBrandCss as l, BRAND_FOREGROUND_VARIABLE as n, contrastForeground as o, brandForegroundDefaults as r, darkVariableName as s, BRAND_COLOR_VARIABLE as t, downlevelColors as u };
+
+//# sourceMappingURL=theme-css-hFqcPSar.js.map

package/dist/theme-css.d.ts

@@ -1,24 +1,65 @@
-import { t as Diagnostic } from "./diagnostics-OcQKQYSY.js";
-import { o as TokenOverrides } from "./theme-6ApjjiBo.js";
+import { Diagnostic } from "./diagnostics.js";
 import { Result } from "better-result";
 //#region src/theme-css.d.ts
+/** One `@font-face` a brand declares. `src` is the declaration value as authored. */
+interface BrandFontFace {
+  readonly family: string;
+  readonly src: string;
+  readonly weight?: string | undefined;
+  readonly style?: string | undefined;
+  readonly display?: string | undefined;
+  readonly unicodeRange?: string | undefined;
+}
+/** A brand theme, parsed. Property names keep their leading `--`. */
+interface BrandCss {
+  /** Light `@theme` variables. */
+  readonly variables: Readonly<Record<string, string>>;
+  /** Dark-mode `@theme` colors, keyed by the light name they replace in dark mode. */
+  readonly dark: Readonly<Record<string, string>>;
+  readonly fontFaces: readonly BrandFontFace[];
+}
+/** The theme variable a dark-mode color lowers to: `--color-brand` → `--color-brand-dark`. */
+declare const darkVariableName: (property: string) => string;
+/** Parse brand theme CSS against the closed grammar above. */
+declare const parseBrandCss: (css: string) => Result<BrandCss, ReadonlyArray<Diagnostic>>;
 /**
- * `TokenOverrides` plus `tracking`. The compiler's `TokenOverrides` names its
- * letter-spacing slot `trackingEm`; the `@theme` CSS namespace and the persisted
- * theme schema both call it `tracking`, so the parser surfaces it under that
- * name and apps/api maps `tracking → trackingEm` at the compile call sites.
+ * Serialize a brand theme in canonical form: font faces, then the light
+ * `@theme`, then the dark-mode `@theme`. Empty sections are omitted, and the
+ * output always parses back to the same value.
  */
-interface ParsedTheme extends TokenOverrides {
-  /** tracking-{name} → letter-spacing in em (negative allowed). */
-  readonly tracking?: Readonly<Record<string, number>> | undefined;
-}
-declare const parseThemeCss: (css: string) => Result<ParsedTheme, ReadonlyArray<Diagnostic>>;
+declare const printBrandCss: (brand: BrandCss) => string;
+/** The brand color, and the text color that sits on it. */
+declare const BRAND_COLOR_VARIABLE = "--color-brand";
+declare const BRAND_FOREGROUND_VARIABLE = "--color-brand-foreground";
+/**
+ * Black or white, whichever has the higher WCAG contrast ratio against
+ * `color`. A translucent color is judged over white, the page an email sits on.
+ * `undefined` when the color is not one `parseColor` evaluates (a `var()`,
+ * `currentColor`, `lab()`, a named color outside its table): nothing is
+ * guessed for it.
+ */
+declare const contrastForeground: (color: string) => "#000000" | "#ffffff" | undefined;
+/**
+ * The text-on-brand colors a brand gets when it leaves them out: for the light
+ * theme and, when the brand sets a dark-mode brand color, for dark mode. Each
+ * is the `contrastForeground` of the brand color it sits on. A brand that sets
+ * the foreground, or whose brand color does not evaluate, gets no default.
+ */
+declare const brandForegroundDefaults: (brand: BrandCss) => {
+  readonly light?: string | undefined;
+  readonly dark?: string | undefined;
+};
 /**
- * Serialize a ParsedTheme to `@theme` CSS. Light tokens go in the top-level
- * `@theme` block; `colorsDark` (colors-only, matching the parser) goes in the
- * `@media (prefers-color-scheme: dark) { @theme { … } }` wrapper.
+ * A brand theme as flat theme variables, the way a build compiles it. Email
+ * inlining resolves `var()` once, so a dark-mode `@theme` cannot switch a
+ * value at run time; each dark color lowers to its `-dark` theme variable,
+ * which `dark:` utilities read (`dark:bg-brand-dark`). A text-on-brand color
+ * the brand leaves out is filled in by `brandForegroundDefaults`, so every
+ * build compiles the same default and the stored CSS never carries it.
  */
-declare const printThemeCss: (theme: ParsedTheme) => string;
+declare const brandThemeVariables: (brand: BrandCss) => Readonly<Record<string, string>>;
+/** The stylesheet Tailwind compiles for `@import "samva:brand"`: `brandThemeVariables` and the font faces. */
+declare const brandTailwindCss: (brand: BrandCss) => string;
 //#endregion
-export { ParsedTheme, parseThemeCss, printThemeCss };
+export { BRAND_COLOR_VARIABLE, BRAND_FOREGROUND_VARIABLE, BrandCss, BrandFontFace, brandForegroundDefaults, brandTailwindCss, brandThemeVariables, contrastForeground, darkVariableName, parseBrandCss, printBrandCss };
 //# sourceMappingURL=theme-css.d.ts.map