@pitlane/theme 0.2.0 → 0.3.0

package/dist/schema-JmfNnMzr.mjs

@@ -0,0 +1,572 @@
+import { createSchema, fail } from "remix/data-schema";
+//#region src/tokens.ts
+/**
+* The error {@link createTheme} throws for every structural failure:
+* one problem, one sentence.
+*
+* | Failure | Message shape |
+* | --- | --- |
+* | No schema entry | `"space.md" has no schema entry` |
+* | Unknown reference | `"color.bg" references unknown token "color.nope"` |
+* | Reference type mismatch | `"color.bg" references "space.md" of type "dimension" where "color" is required` |
+* | Reference to an untyped token | `"color.bg" references untyped token "animate.spin"` |
+* | Reference cycle | `Reference cycle: color.a → color.b → color.a` |
+* | Variable collision | `Tokens "a.b" and "a-b" both produce the CSS variable --a-b` |
+* | Reserved characters | `Token or group name "a.b" contains characters reserved by references (".", "{", "}")` |
+* | Empty identifier | `Token path segment "!!" produces an empty CSS identifier` |
+* | Unknown mode token | `Mode "dark" overrides unknown token "color.nope"` |
+*
+* Bad token *values* raise `ValidationError` from `remix/data-schema`
+* instead, because there may be several and each carries its own path.
+*
+* @see {@link createTheme}
+*/
+var ThemeError = class extends Error {
+	name = "ThemeError";
+};
+const VAR_RE = /^var\((--[a-z0-9-]+)\)$/;
+const EMBEDDED_VAR_RE = /var\((--[a-z0-9-]+)\)/g;
+/**
+* Rejects a value carrying a `{path.to.token}` reference. Braces are never
+* valid in a CSS value, so one can only be a reference left behind from the
+* format this package used before 0.3.0, and passing it through would put
+* `{color.white}` in the stylesheet where a color belongs.
+*
+* @internal
+*/
+function assertNoStringReference(value, key) {
+	if (typeof value !== "string" || !value.includes("{")) return;
+	let match = /\{([^{}]+)\}/.exec(value);
+	if (match === null) return;
+	throw new ThemeError(`"${key}" contains the reference "{${match[1]}}", which is no longer a value. Reference a token by property access in an extend layer: .extend(base => ({ tokens: { … base.${match[1]} … } }))`);
+}
+/**
+* The token a whole-value `var()` reference names, or `null` when the value is
+* not one. A reference is written as a property access on the layer below, and
+* an accessor leaf is a `var()` string, so this is what a reference looks like
+* by the time the compiler sees it.
+*
+* @internal
+*/
+function referenceTarget(value) {
+	if (typeof value !== "string") return null;
+	let match = VAR_RE.exec(value);
+	return match ? match[1] : null;
+}
+/**
+* Every `var()` a value mentions, including inside a larger string. A composite
+* is authored as CSS text, so a reference interpolated into a shadow or a
+* transition shows up here rather than as the whole value.
+*
+* @internal
+*/
+function mentionedVarNames(value) {
+	if (typeof value !== "string" || !value.includes("var(")) return [];
+	return [...value.matchAll(EMBEDDED_VAR_RE)].map((match) => match[1]);
+}
+/**
+* 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 the token tree and the schema tree together, in document
+* order, into one list of tagged entries. Rejects a token with no
+* schema entry, a reserved character in a name, and two tokens whose
+* paths collide after kebab-casing.
+*
+* @internal
+*/
+function collectTokens(tokens, schema) {
+	let entries = [];
+	walk(tokens, schema, void 0, [], entries, /* @__PURE__ */ new Map());
+	linkVarReferences(entries);
+	return entries;
+}
+/**
+* Links a whole-value `var()` to the token it names, so it is type-checked,
+* resolvable by `raw`, and visible to `select`. The link is a second pass
+* because a layer may reference a token declared after it.
+*
+* A `var()` naming something this theme does not declare is left alone: it may
+* be a custom property the application defines elsewhere.
+*/
+function linkVarReferences(entries) {
+	let byVarName = new Map(entries.map((entry) => [entry.varName, entry]));
+	for (let entry of entries) {
+		if (entry.kind !== "typed" || entry.aliasOf !== void 0) continue;
+		if (typeof entry.value !== "string") continue;
+		let varName = referenceTarget(entry.value);
+		if (varName === null) continue;
+		let target = byVarName.get(varName);
+		if (target !== void 0) entry.aliasOf = target.key;
+	}
+}
+function walk(node, schema, inherited, path, out, varNames) {
+	for (let [key, value] of Object.entries(node)) {
+		let childPath = [...path, key];
+		let childKey = childPath.join(".");
+		if (/[.{}]/.test(key)) throw new ThemeError(`Token or group name "${childKey}" contains characters reserved by references (".", "{", "}")`);
+		let child = childSchema(schema, key);
+		let own = selfSchema(child) ?? inherited;
+		if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+			walk(value, child, own, childPath, out, varNames);
+			continue;
+		}
+		if (own === void 0) throw new ThemeError(`"${childKey}" has no schema entry`);
+		assertNoStringReference(value, childKey);
+		let varName = `--${childPath.map(kebabSegment).join("-")}`;
+		let existing = varNames.get(varName);
+		if (existing !== void 0) throw new ThemeError(`Tokens "${existing}" and "${childKey}" both produce the CSS variable ${varName}`);
+		varNames.set(varName, childKey);
+		let common = {
+			key: childKey,
+			path: childPath,
+			varName
+		};
+		let tag = own[TAG];
+		if (tag === "any") out.push({
+			kind: "untyped",
+			...common,
+			value: String(value)
+		});
+		else if (tag === "scale") out.push({
+			kind: "scale",
+			...common,
+			value
+		});
+		else out.push({
+			kind: "typed",
+			...common,
+			type: tag,
+			value
+		});
+	}
+}
+//#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) {
+	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" : serializeComponent(component, key));
+	let alphaPart = alpha === void 0 ? "" : ` / ${serializeComponent(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 serializeComponent(value, key) {
+	if (typeof value !== "number" || !Number.isFinite(value)) throw invalid(key, "color component", value);
+	return String(value);
+}
+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) {
+	if (typeof value === "string") return value;
+	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 === "string") return value;
+	if (typeof value !== "number" || !Number.isFinite(value)) throw invalid(key, "number", value);
+	return String(value);
+}
+function serializeCubicBezier(value, key) {
+	if (typeof value === "string") return value;
+	if (!Array.isArray(value) || value.length !== 4) throw invalid(key, "cubicBezier", value);
+	return `cubic-bezier(${value.map((part) => serializeComponent(part, key)).join(", ")})`;
+}
+function serializeShadow(value, ctx, key) {
+	if (typeof value === "string") return value;
+	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 === "string") return value;
+	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 === "string") return value;
+	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 (typeof value === "string") return value;
+	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/schema.ts
+/** @internal */
+const TAG = Symbol.for("pitlane.theme.tag");
+/** @internal */
+const SELF = Symbol.for("pitlane.theme.self");
+const NO_REFS = { varRefFor(key) {
+	return `var(--${key.replaceAll(".", "-")})`;
+} };
+/**
+* Standard Schema path segments may be objects, so stringify each one
+* rather than relying on `Array#join`.
+*
+* @internal
+*/
+function pathKey(path) {
+	return path.map((segment) => typeof segment === "object" && segment !== null && "key" in segment ? String(segment.key) : String(segment)).join(".");
+}
+function tokenSchema(tag) {
+	let schema = createSchema((value, context) => {
+		let key = pathKey(context.path);
+		if (tag === "any") {
+			if (typeof value === "string" || typeof value === "number") return { value: String(value) };
+			return fail(`"${key}" must be a string or a number`, context.path);
+		}
+		try {
+			return { value: serializeValue(tag === "scale" ? "dimension" : tag, value, NO_REFS, key) };
+		} catch (error) {
+			return fail(error.message, context.path);
+		}
+	});
+	return Object.assign(schema, { [TAG]: tag });
+}
+/**
+* A `color` token. Accepts any CSS color, including `light-dark()`,
+* `color-mix()`, and `currentColor`, plus DTCG's structured form.
+*
+* @returns A schema declaring the `color` token type
+*
+* @example
+* ```ts
+* let schema = { color: s.color() };
+* let tokens = { color: { white: "#fff", page: lightDark("#fff", "#111") } };
+* ```
+*/
+function color() {
+	return tokenSchema("color");
+}
+/**
+* A `dimension` token. Accepts any CSS length, including `clamp()`,
+* `calc()`, `%`, and `em`.
+*
+* @returns A schema declaring the `dimension` token type
+*/
+function dimension() {
+	return tokenSchema("dimension");
+}
+/**
+* A `duration` token. Accepts `ms`, `s`, and `calc()`.
+*
+* @returns A schema declaring the `duration` token type
+*/
+function duration() {
+	return tokenSchema("duration");
+}
+/**
+* A `number` token. Accepts a finite number, which is what unitless
+* CSS values such as `line-height` and `opacity` take.
+*
+* @returns A schema declaring the `number` token type
+*/
+function number() {
+	return tokenSchema("number");
+}
+/**
+* A `cubicBezier` token, named for the CSS property it feeds. Accepts
+* a four-number tuple or `cubic-bezier(…)` text.
+*
+* @returns A schema declaring the `cubicBezier` token type
+*/
+function easing() {
+	return tokenSchema("cubicBezier");
+}
+/**
+* A `shadow` token. Accepts CSS shadow text, `inset` included.
+*
+* @returns A schema declaring the `shadow` token type
+*/
+function shadow() {
+	return tokenSchema("shadow");
+}
+/**
+* A `border` token. Accepts CSS border shorthand text.
+*
+* @returns A schema declaring the `border` token type
+*/
+function border() {
+	return tokenSchema("border");
+}
+/**
+* A `transition` token. Accepts CSS transition shorthand text.
+*
+* @returns A schema declaring the `transition` token type
+*/
+function transition() {
+	return tokenSchema("transition");
+}
+/**
+* A `gradient` token. Accepts CSS gradient function text.
+*
+* @returns A schema declaring the `gradient` token type
+*/
+function gradient() {
+	return tokenSchema("gradient");
+}
+/**
+* A `strokeStyle` token, named for the CSS value it holds. Accepts a
+* line-style keyword.
+*
+* @returns A schema declaring the `strokeStyle` token type
+*/
+function stroke() {
+	return tokenSchema("strokeStyle");
+}
+/**
+* The two font token types, grouped because they share a prefix.
+*
+* `font.family()` accepts a font stack, as a string or an array of
+* names; an array joins with commas and quotes what needs quoting.
+* `font.weight()` accepts 1 to 1000 or one of DTCG's nineteen
+* keywords, and emits the number.
+*
+* @example
+* ```ts
+* let schema = { font: s.font.family(), weight: s.font.weight() };
+* let tokens = { font: { sans: ["Inter var", "system-ui"] }, weight: { bold: 700 } };
+* ```
+*/
+let font = {
+	family: () => tokenSchema("fontFamily"),
+	weight: () => tokenSchema("fontWeight")
+};
+/**
+* A dimension token whose accessor leaf is a multiplier rather than a
+* value. The token emits its own custom property; the accessor leaf is
+* callable, and carries the base itself as `.token`.
+*
+* This is Tailwind's `--spacing`: one base that the whole scale
+* multiplies, with no named steps.
+*
+* @returns A schema declaring a scale token
+*
+* @example
+* ```ts
+* let theme = createTheme({
+*     schema: { spacing: s.scale() },
+*     tokens: { spacing: "0.25rem" },
+* });
+*
+* theme.token.spacing(4); // "calc(var(--spacing) * 4)"
+* theme.token.spacing.token; // "var(--spacing)"
+* ```
+*/
+function scale() {
+	return tokenSchema("scale");
+}
+/**
+* A token with no type. Its value is emitted verbatim and its accessor
+* leaf brands as a plain `string`, which the open-grammar CSS
+* properties accept and the token-mapped longhands still reject.
+*
+* This exists for CSS values with no DTCG type, such as
+* `spin 1s linear infinite` and `16 / 9`. An untyped token may not be
+* the target of a typed token's reference, because there is no type to
+* check against.
+*
+* @returns A schema declaring an untyped token
+*/
+function any() {
+	return tokenSchema("any");
+}
+/**
+* A node that is itself typed and also carries per-child overrides.
+* `self` applies to that node and to every descendant without its own
+* entry; each key in `children` overrides it from there down.
+*
+* The self schema rides on a symbol key, so no token name is reserved:
+* a token named `default` can carry its own type.
+*
+* @param self - The schema for this node and its unlabelled descendants
+* @param children - Per-child schema overrides
+* @returns A schema group
+*
+* @example
+* ```ts
+* let schema = {
+*     control: s.group(s.dimension(), { color: s.color(), opacity: s.number() }),
+* };
+* // control.height.sm is a dimension; control.color.border is a color.
+* ```
+*/
+function group(self, children) {
+	return {
+		...children,
+		[SELF]: self
+	};
+}
+/**
+* True when a node declares a token type rather than grouping others.
+*
+* @internal
+*/
+function isTokenSchema(node) {
+	return typeof node === "object" && node !== null && TAG in node;
+}
+/**
+* The schema a node declares for itself and its unlabelled children,
+* or `undefined` when it only groups.
+*
+* @internal
+*/
+function selfSchema(node) {
+	if (isTokenSchema(node)) return node;
+	if (typeof node === "object" && node !== null && SELF in node) return node[SELF];
+}
+/**
+* The schema node for one child key, or `undefined` when the parent
+* declares nothing for it.
+*
+* @internal
+*/
+function childSchema(node, key) {
+	if (typeof node !== "object" || node === null || isTokenSchema(node)) return void 0;
+	if (!Object.hasOwn(node, key)) return void 0;
+	return node[key];
+}
+//#endregion
+export { assertNoStringReference as C, referenceTarget as D, mentionedVarNames as E, ThemeError as S, kebabSegment as T, selfSchema as _, childSchema as a, transition as b, duration as c, gradient as d, group as f, scale as g, pathKey as h, border as i, easing as l, number as m, TAG as n, color as o, isTokenSchema as p, any as r, dimension as s, SELF as t, font as u, shadow as v, collectTokens as w, serializeValue as x, stroke as y };

package/dist/schema.d.mts

@@ -0,0 +1,2 @@
+import { C as stroke, S as shadow, _ as isTokenSchema, a as TAG, b as scale, c as border, d as dimension, f as duration, g as group, h as gradient, i as SchemaTag, l as childSchema, m as font, n as SchemaGroup, o as TokenSchema, p as easing, r as SchemaNode, s as any, t as SELF, u as color, v as number, w as transition, x as selfSchema, y as pathKey } from "./schema-CRP607Pg.mjs";
+export { SELF, SchemaGroup, SchemaNode, SchemaTag, TAG, TokenSchema, any, border, childSchema, color, dimension, duration, easing, font, gradient, group, isTokenSchema, number, pathKey, scale, selfSchema, shadow, stroke, transition };

package/dist/schema.mjs

@@ -0,0 +1,2 @@
+import { _ as selfSchema, a as childSchema, b as transition, c as duration, d as gradient, f as group, g as scale, h as pathKey, i as border, l as easing, m as number, n as TAG, o as color, p as isTokenSchema, r as any, s as dimension, t as SELF, u as font, v as shadow, y as stroke } from "./schema-JmfNnMzr.mjs";
+export { SELF, TAG, any, border, childSchema, color, dimension, duration, easing, font, gradient, group, isTokenSchema, number, pathKey, scale, selfSchema, shadow, stroke, transition };