@pitlane/theme 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -1,460 +1,6 @@
-import { createElement, css as css$1 } from "remix/ui";
-//#region src/brands.ts
-/**
-* The twelve DTCG token types, in canonical order.
-*
-* @internal
-*/
-const TOKEN_TYPES = [
-	"color",
-	"dimension",
-	"duration",
-	"fontFamily",
-	"fontWeight",
-	"number",
-	"cubicBezier",
-	"shadow",
-	"border",
-	"transition",
-	"gradient",
-	"strokeStyle"
-];
-//#endregion
-//#region src/tokens.ts
-/**
-* The error {@link createTheme} throws for every validation and
-* serialization failure. Validation is eager, so a bad document never
-* emits CSS. Every message names the offending token path.
-*
-* | Condition | Message shape |
-* | --- | --- |
-* | Unknown `$type` | `"color.brand" has unknown $type "sparkles"` |
-* | Unresolvable `$type` | `"color.brand" has no resolvable $type` |
-* | Typography token | `"heading": typography tokens are not supported in v1` |
-* | Reserved character in a name | `Token or group name "a.b" contains characters reserved by DTCG references (".", "{", "}")` |
-* | Empty CSS identifier | `Token path segment "!" produces an empty CSS identifier` |
-* | Malformed node | `"color.bg" is neither a group nor a token` |
-* | Variable-name collision | `Tokens "a" and "b" both produce the CSS variable --x` |
-* | Alias to a missing token | `"color.bg" references unknown token "color.white"` |
-* | Alias to a wrong-typed token | `"x" references "space.sm" of type "dimension" where "color" is required` |
-* | Alias cycle | `Alias cycle: a → b → a` |
-* | Invalid value for a declared type | `"x" has an invalid color value: …` — also `unknown colorSpace`, `unknown fontWeight keyword`, and `unknown strokeStyle keyword`; an empty `fontFamily` array counts |
-* | Bad mode override | `Mode override "x" does not exist in the base document`, `Mode override "x" may only set $value`, or (via a cross-type alias) the wrong-typed-alias message |
-* | Unminted `raw()` ref | `raw(): "var(--x)" names a var this theme never minted` |
-*/
-var ThemeError = class extends Error {
-	name = "ThemeError";
-};
-const ALIAS_RE = /^\{([^{}]+)\}$/;
-/**
-* Extracts the target key from a `"{path.to.token}"` alias string, or
-* `null` when the value is not an alias reference.
-*
-* @internal
-*/
-function aliasTarget(value) {
-	if (typeof value !== "string") return null;
-	let match = ALIAS_RE.exec(value);
-	return match ? match[1] : null;
-}
-/**
-* Kebab-cases one path segment for a CSS variable name. Throws when
-* the segment reduces to an empty identifier.
-*
-* @internal
-*/
-function kebabSegment(segment) {
-	let kebab = segment.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-	if (!kebab) throw new ThemeError(`Token path segment "${segment}" produces an empty CSS identifier`);
-	return kebab;
-}
-/**
-* Walks a document, resolves every token's type and CSS variable
-* name, and returns the parsed tokens keyed by dotted path.
-*
-* @internal
-*/
-function parseTokens(document) {
-	let entries = /* @__PURE__ */ new Map();
-	walk(document, [], validateType(document.$type, "$root"), entries);
-	let tokens = /* @__PURE__ */ new Map();
-	let varNames = /* @__PURE__ */ new Map();
-	for (let entry of entries.values()) {
-		let type = resolveType(entry.key, entries, []);
-		let varName = `--${entry.path.map(kebabSegment).join("-")}`;
-		let existing = varNames.get(varName);
-		if (existing !== void 0) throw new ThemeError(`Tokens "${existing}" and "${entry.key}" both produce the CSS variable ${varName}`);
-		varNames.set(varName, entry.key);
-		let alias = aliasTarget(entry.value);
-		tokens.set(entry.key, {
-			key: entry.key,
-			path: entry.path,
-			varName,
-			type,
-			value: entry.value,
-			...alias === null ? {} : { aliasOf: alias }
-		});
-	}
-	return tokens;
-}
-function walk(node, path, inherited, out) {
-	for (let [key, child] of Object.entries(node)) {
-		if (key.startsWith("$")) continue;
-		let childPath = [...path, key];
-		let childKey = childPath.join(".");
-		if (/[.{}]/.test(key)) throw new ThemeError(`Token or group name "${childKey}" contains characters reserved by DTCG references (".", "{", "}")`);
-		if (typeof child !== "object" || child === null || Array.isArray(child)) throw new ThemeError(`"${childKey}" is neither a group nor a token`);
-		let record = child;
-		let ownType = validateType(record.$type, childKey);
-		if ("$value" in record) out.set(childKey, {
-			key: childKey,
-			path: childPath,
-			ownType,
-			inheritedType: inherited,
-			value: record.$value
-		});
-		else walk(record, childPath, ownType ?? inherited, out);
-	}
-}
-function validateType(value, key) {
-	if (value === void 0) return void 0;
-	if (value === "typography") throw new ThemeError(`"${key}": typography tokens are not supported in v1`);
-	if (!TOKEN_TYPES.includes(value)) throw new ThemeError(`"${key}" has unknown $type "${String(value)}"`);
-	return value;
-}
-function resolveType(key, entries, chain) {
-	if (chain.includes(key)) throw new ThemeError(`Alias cycle: ${[...chain, key].join(" → ")}`);
-	let entry = entries.get(key);
-	if (!entry) throw new ThemeError(`"${chain[chain.length - 1] ?? key}" references unknown token "${key}"`);
-	if (entry.ownType) return entry.ownType;
-	let alias = aliasTarget(entry.value);
-	if (alias !== null) return resolveType(alias, entries, [...chain, key]);
-	if (entry.inheritedType) return entry.inheritedType;
-	throw new ThemeError(`"${key}" has no resolvable $type`);
-}
-//#endregion
-//#region src/serialize.ts
-const FONT_WEIGHT_KEYWORDS = {
-	thin: 100,
-	hairline: 100,
-	"extra-light": 200,
-	"ultra-light": 200,
-	light: 300,
-	normal: 400,
-	regular: 400,
-	book: 400,
-	medium: 500,
-	"semi-bold": 600,
-	"demi-bold": 600,
-	bold: 700,
-	"extra-bold": 800,
-	"ultra-bold": 800,
-	black: 900,
-	heavy: 900,
-	"extra-black": 950,
-	"ultra-black": 950
-};
-const COLOR_FUNCTIONS = {
-	hsl: {
-		fn: "hsl",
-		percents: [1, 2]
-	},
-	hwb: {
-		fn: "hwb",
-		percents: [1, 2]
-	},
-	lab: { fn: "lab" },
-	lch: { fn: "lch" },
-	oklab: { fn: "oklab" },
-	oklch: { fn: "oklch" }
-};
-const COLOR_SPACES = /* @__PURE__ */ new Set([
-	"srgb",
-	"srgb-linear",
-	"display-p3",
-	"a98-rgb",
-	"prophoto-rgb",
-	"rec2020",
-	"xyz-d65",
-	"xyz-d50"
-]);
-const STROKE_KEYWORDS = /* @__PURE__ */ new Set([
-	"solid",
-	"dashed",
-	"dotted",
-	"double",
-	"groove",
-	"ridge",
-	"outset",
-	"inset"
-]);
-function serializeValue(type, value, ctx, key) {
-	switch (type) {
-		case "color": return serializeColor(value, key);
-		case "dimension": return serializeMeasure(value, ["px", "rem"], key);
-		case "duration": return serializeMeasure(value, ["ms", "s"], key);
-		case "fontFamily": return serializeFontFamily(value, key);
-		case "fontWeight": return serializeFontWeight(value, key);
-		case "number": return serializeNumber(value, key);
-		case "cubicBezier": return serializeCubicBezier(value, key);
-		case "shadow": return serializeShadow(value, ctx, key);
-		case "border": return serializeBorder(value, ctx, key);
-		case "transition": return serializeTransition(value, ctx, key);
-		case "gradient": return serializeGradient(value, ctx, key);
-		case "strokeStyle": return serializeStrokeStyle(value, key);
-	}
-}
-function field(type, value, ctx, key) {
-	let alias = aliasTarget(value);
-	if (alias !== null) return ctx.varRefFor(alias, key, type);
-	return serializeValue(type, value, ctx, key);
-}
-function invalid(key, type, value) {
-	return new ThemeError(`"${key}" has an invalid ${type} value: ${JSON.stringify(value)}`);
-}
-function serializeColor(value, key) {
-	if (typeof value === "string") return value;
-	if (typeof value !== "object" || value === null) throw invalid(key, "color", value);
-	let { colorSpace, components, alpha, hex } = value;
-	if (typeof hex === "string") return hex;
-	if (typeof colorSpace !== "string" || !Array.isArray(components)) throw invalid(key, "color", value);
-	let parts = components.map((component) => component === "none" ? "none" : serializeNumber(component, key));
-	let alphaPart = alpha === void 0 ? "" : ` / ${serializeNumber(alpha, key)}`;
-	let fn = COLOR_FUNCTIONS[colorSpace];
-	if (fn) {
-		let printed = parts.map((part, index) => fn.percents?.includes(index) && part !== "none" ? `${part}%` : part);
-		return `${fn.fn}(${printed.join(" ")}${alphaPart})`;
-	}
-	if (COLOR_SPACES.has(colorSpace)) return `color(${colorSpace} ${parts.join(" ")}${alphaPart})`;
-	throw new ThemeError(`"${key}" has unknown colorSpace "${colorSpace}"`);
-}
-function serializeMeasure(value, units, key) {
-	if (typeof value === "string") return value;
-	if (typeof value === "object" && value !== null) {
-		let { value: amount, unit } = value;
-		if (typeof amount === "number" && typeof unit === "string" && units.includes(unit)) return `${amount}${unit}`;
-	}
-	throw invalid(key, `dimension/duration (${units.join("|")})`, value);
-}
-function serializeFontFamily(value, key) {
-	let names = Array.isArray(value) ? value : [value];
-	if (names.length === 0) throw invalid(key, "fontFamily", value);
-	return names.map((name) => {
-		if (typeof name !== "string") throw invalid(key, "fontFamily", value);
-		return /^[a-zA-Z][a-zA-Z-]*$/.test(name) ? name : `"${name.replaceAll("\"", "\\\"")}"`;
-	}).join(", ");
-}
-function serializeFontWeight(value, key) {
-	if (typeof value === "number") {
-		if (value >= 1 && value <= 1e3) return String(value);
-		throw invalid(key, "fontWeight", value);
-	}
-	if (typeof value === "string") {
-		let mapped = FONT_WEIGHT_KEYWORDS[value];
-		if (mapped !== void 0) return String(mapped);
-		throw new ThemeError(`"${key}" has unknown fontWeight keyword "${value}"`);
-	}
-	throw invalid(key, "fontWeight", value);
-}
-function serializeNumber(value, key) {
-	if (typeof value !== "number" || !Number.isFinite(value)) throw invalid(key, "number", value);
-	return String(value);
-}
-function serializeCubicBezier(value, key) {
-	if (!Array.isArray(value) || value.length !== 4) throw invalid(key, "cubicBezier", value);
-	return `cubic-bezier(${value.map((part) => serializeNumber(part, key)).join(", ")})`;
-}
-function serializeShadow(value, ctx, key) {
-	return (Array.isArray(value) ? value : [value]).map((shadow) => {
-		if (typeof shadow !== "object" || shadow === null) throw invalid(key, "shadow", value);
-		let { color, offsetX, offsetY, blur, spread, inset } = shadow;
-		let parts = [
-			field("dimension", offsetX, ctx, key),
-			field("dimension", offsetY, ctx, key),
-			blur === void 0 ? "0" : field("dimension", blur, ctx, key),
-			spread === void 0 ? "0" : field("dimension", spread, ctx, key),
-			field("color", color, ctx, key)
-		];
-		return `${inset === true ? "inset " : ""}${parts.join(" ")}`;
-	}).join(", ");
-}
-function serializeBorder(value, ctx, key) {
-	if (typeof value !== "object" || value === null) throw invalid(key, "border", value);
-	let { color, width, style } = value;
-	return `${field("dimension", width, ctx, key)} ${field("strokeStyle", style, ctx, key)} ${field("color", color, ctx, key)}`;
-}
-function serializeTransition(value, ctx, key) {
-	if (typeof value !== "object" || value === null) throw invalid(key, "transition", value);
-	let { duration, timingFunction, delay } = value;
-	let delayPart = delay === void 0 ? "0s" : field("duration", delay, ctx, key);
-	return `${field("duration", duration, ctx, key)} ${field("cubicBezier", timingFunction, ctx, key)} ${delayPart}`;
-}
-function serializeGradient(value, ctx, key) {
-	if (!Array.isArray(value)) throw invalid(key, "gradient", value);
-	return value.map((stop) => {
-		if (typeof stop !== "object" || stop === null) throw invalid(key, "gradient", value);
-		let { color, position } = stop;
-		if (typeof position !== "number") throw invalid(key, "gradient stop position", position);
-		return `${field("color", color, ctx, key)} ${Number((position * 100).toFixed(4))}%`;
-	}).join(", ");
-}
-function serializeStrokeStyle(value, key) {
-	if (typeof value === "string") {
-		if (STROKE_KEYWORDS.has(value)) return value;
-		throw new ThemeError(`"${key}" has unknown strokeStyle keyword "${value}"`);
-	}
-	if (typeof value === "object" && value !== null) return "dashed";
-	throw invalid(key, "strokeStyle", value);
-}
-//#endregion
-//#region src/theme.ts
-function createThemeComponent(cssText) {
-	let escaped = cssText.replace(/<\/style/gi, "<\\/style");
-	return function Theme(handle) {
-		return () => createElement("style", {
-			nonce: handle.props.nonce,
-			"data-pitlane-theme": "",
-			innerHTML: escaped
-		});
-	};
-}
-/**
-* Compiles a DTCG design-token document into a typed accessor, a
-* `raw` resolver, and a `<Theme />` component. All validation and
-* serialization happen eagerly here: a malformed document throws
-* {@link ThemeError} rather than emitting broken CSS.
-*
-* Each token becomes a CSS custom property named after its
-* kebab-cased path — `color.gray.900` becomes `--color-gray-900`.
-* Two paths that collide after kebab-casing throw, as do names
-* containing `.`, `{`, or `}`, which the alias syntax reserves.
-*
-* Author the document in TypeScript, not imported JSON: `createTheme`
-* infers a `const` type parameter, so an inline object needs no
-* `as const`, but a JSON import widens its literals and the token
-* brands degrade.
-*
-* @param config - The token document. Groups nest to any depth; a
-* node with a `$value` is a token.
-* @param options - Optional per-mode overrides ({@link ThemeOptions}).
-* @returns The {@link ThemeResult}: `token`, `raw`, and `Theme`.
-* @throws ThemeError on any validation failure (unknown or
-* unresolvable `$type`, reserved characters, variable collision,
-* unknown or wrong-typed alias, alias cycle, invalid value, or a bad
-* mode override).
-*
-* @see {@link DTCGDocument} for the document shape, the accepted
-* `$value` forms, and alias semantics.
-*
-* @example
-* ```ts
-* export let { token: t, raw, Theme } = createTheme(
-*     {
-*         color: {
-*             $type: "color",
-*             white: { $value: "#fff" },
-*             gray: { 900: { $value: "#171717" } },
-*             bg: { $value: "{color.white}" }, // alias → var() indirection
-*         },
-*     },
-*     { modes: { dark: { color: { bg: { $value: "{color.gray.900}" } } } } },
-* );
-*
-* t.color.bg; // "var(--color-bg)"
-* raw(t.color.bg); // "#fff" (base mode, alias chased to the end)
-* ```
-*/
-function createTheme(config, options = {}) {
-	let compiled = compile(config, options.modes ?? {});
-	let rawByRef = /* @__PURE__ */ new Map();
-	let rawByKey = /* @__PURE__ */ new Map();
-	for (let token of compiled.tokens.values()) rawByRef.set(`var(${token.varName})`, resolveRaw(token, compiled.tokens, rawByKey, []));
-	return {
-		token: buildAccessor(compiled.tokens),
-		raw(ref) {
-			let value = rawByRef.get(ref);
-			if (value === void 0) throw new ThemeError(`raw(): "${ref}" names a var this theme never minted`);
-			return value;
-		},
-		Theme: createThemeComponent(compiled.cssText)
-	};
-}
-function compile(config, modes) {
-	let tokens = parseTokens(config);
-	let ctx = { varRefFor(key, from, expected) {
-		let target = tokens.get(key);
-		if (!target) throw new ThemeError(`"${from}" references unknown token "${key}"`);
-		if (target.type !== expected) throw new ThemeError(`"${from}" references "${key}" of type "${target.type}" where "${expected}" is required`);
-		return `var(${target.varName})`;
-	} };
-	let declarations = /* @__PURE__ */ new Map();
-	for (let token of tokens.values()) declarations.set(token.varName, token.aliasOf !== void 0 ? ctx.varRefFor(token.aliasOf, token.key, token.type) : serializeValue(token.type, token.value, ctx, token.key));
-	let modeBlocks = [];
-	for (let mode of ["light", "dark"]) {
-		let overrides = modes[mode];
-		if (overrides === void 0) continue;
-		let modeDeclarations = compileModeOverrides(overrides, tokens, ctx);
-		if (modeDeclarations.size === 0) continue;
-		let lines = [...modeDeclarations].map(([name, value]) => `        ${name}: ${value};`);
-		modeBlocks.push(`@media (prefers-color-scheme: ${mode}) {\n    :root {\n${lines.join("\n")}\n    }\n}`);
-	}
-	return {
-		tokens,
-		cssText: buildCssText(declarations, modeBlocks)
-	};
-}
-function compileModeOverrides(overrides, tokens, ctx) {
-	let out = /* @__PURE__ */ new Map();
-	walkMode(overrides, [], tokens, ctx, out);
-	return out;
-}
-function walkMode(node, path, tokens, ctx, out) {
-	if (typeof node !== "object" || node === null) throw new ThemeError(`Mode override "${path.join(".")}" is neither a group nor a token`);
-	let record = node;
-	if ("$value" in record) {
-		let key = path.join(".");
-		if (Object.keys(record).length !== 1) throw new ThemeError(`Mode override "${key}" may only set $value`);
-		let base = tokens.get(key);
-		if (!base) throw new ThemeError(`Mode override "${key}" does not exist in the base document`);
-		let alias = aliasTarget(record.$value);
-		out.set(base.varName, alias !== null ? ctx.varRefFor(alias, key, base.type) : serializeValue(base.type, record.$value, ctx, key));
-		return;
-	}
-	for (let [key, child] of Object.entries(record)) {
-		if (key.startsWith("$")) throw new ThemeError(`Mode override "${[...path, key].join(".")}" may only set $value`);
-		walkMode(child, [...path, key], tokens, ctx, out);
-	}
-}
-function resolveRaw(token, tokens, memo, chain) {
-	let cached = memo.get(token.key);
-	if (cached !== void 0) return cached;
-	if (chain.includes(token.key)) throw new ThemeError(`Alias cycle: ${[...chain, token.key].join(" → ")}`);
-	let value;
-	if (token.aliasOf !== void 0) {
-		let target = tokens.get(token.aliasOf);
-		if (!target) throw new ThemeError(`"${token.key}" references unknown token "${token.aliasOf}"`);
-		value = resolveRaw(target, tokens, memo, [...chain, token.key]);
-	} else value = serializeValue(token.type, token.value, { varRefFor(key, from) {
-		let target = tokens.get(key);
-		if (!target) throw new ThemeError(`"${from}" references unknown token "${key}"`);
-		return resolveRaw(target, tokens, memo, [...chain, token.key]);
-	} }, token.key);
-	memo.set(token.key, value);
-	return value;
-}
-function buildAccessor(tokens) {
-	let root = Object.create(null);
-	for (let token of tokens.values()) {
-		let node = root;
-		for (let segment of token.path.slice(0, -1)) node = node[segment] ??= Object.create(null);
-		node[token.path[token.path.length - 1]] = `var(${token.varName})`;
-	}
-	return root;
-}
-function buildCssText(declarations, modeBlocks) {
-	return [`:root {\n${[...declarations].map(([name, value]) => `    ${name}: ${value};`).join("\n")}\n}`, ...modeBlocks].join("\n\n");
-}
-//#endregion
+import { S as ThemeError } from "./schema-JmfNnMzr.mjs";
+import { t as createTheme } from "./theme-CMaWrQJ5.mjs";
+import { css as css$1 } from "remix/ui";
 //#region src/css.ts
 /**
 * Brand-enforced wrapper over `remix/ui`'s `css()` mixin. Token-mapped
@@ -504,6 +50,56 @@ function normalizeStyles(styles) {
 	return out;
 }
 //#endregion
+//#region src/scale.ts
+/**
+* Turns one token into a multiplier, so a scale does not have to name
+* every step. The returned function produces
+* `calc(<base> * <steps>)`, keeping whichever brand the base carried.
+*
+* Use this for a token you did not declare as a scale. A token
+* declared with `s.scale()` is already a multiplier, and its base is
+* `t.spacing.token` when you need it.
+*
+* The result is a CSS string like any other, so it also works as an
+* authored token value.
+*
+* @param base - The token to multiply
+* @returns A function from steps to a token of the same type
+*
+* @example
+* ```ts
+* import { scale } from "@pitlane/theme";
+*
+* let step = scale(t.tracking.tight);
+* css({ letterSpacing: step(2) }); // calc(var(--tracking-tight) * 2)
+* ```
+*/
+function scale(base) {
+	return (steps) => `calc(${base} * ${steps})`;
+}
+/**
+* A `light-dark()` color, resolved by the browser against the
+* `color-scheme` property. A subtree that sets `color-scheme` flips
+* whatever the media query says, which is what a theme toggle needs.
+*
+* Both arguments may be token references, so a mode override of either
+* primitive still reaches the result.
+*
+* `light-dark()` is color-only. Use `modes` for anything else.
+*
+* @param light - The color for a light `color-scheme`
+* @param dark - The color for a dark `color-scheme`
+* @returns The `light-dark()` function text
+*
+* @example
+* ```ts
+* tokens: { surface: { page: lightDark("#ffffff", "#1a1a1a") } }
+* ```
+*/
+function lightDark(light, dark) {
+	return `light-dark(${light}, ${dark})`;
+}
+//#endregion
 //#region src/tva.ts
 /**
 * Builds a variant resolver modeled on [cva](https://cva.style). Where
@@ -626,4 +222,4 @@ function cx(...inputs) {
 	return out.join(" ");
 }
 //#endregion
-export { ThemeError, combine, createTheme, css, cx, tva };
+export { ThemeError, combine, createTheme, css, cx, lightDark, scale, tva };