codebase overhaul (#697)

1 files changed, 923 insertions, 0 deletions

diff --git a/apps/web/src/lib/gradients/canvas.ts b/apps/web/src/lib/gradients/canvas.ts
new file mode 100644
index 00000000..e2287333
--- /dev/null
+++ b/apps/web/src/lib/gradients/canvas.ts
@@ -0,0 +1,923 @@
+import type {
+	GradientAst,
+	Color,
+	ColorStop,
+	GradientOrientation,
+} from "./parser";
+import { parseGradient } from "./parser";
+
+type BackgroundLayer =
+	| { type: "color"; value: string }
+	| { type: "gradient"; value: GradientAst };
+
+type LinearPoints = {
+	x0: number;
+	y0: number;
+	x1: number;
+	y1: number;
+	length: number;
+};
+
+type RadialDimensions = {
+	cx: number;
+	cy: number;
+	rx: number;
+	ry: number;
+};
+
+type PositionKeyword = "left" | "center" | "right" | "top" | "bottom";
+
+type Distance =
+	| { type: "%"; value: string }
+	| { type: "position-keyword"; value: string }
+	| { type: "calc"; value: string }
+	| { type: "px"; value: string }
+	| { type: "em"; value: string };
+
+type Position = { type: "position"; value: { x?: Distance; y?: Distance } };
+
+type Shape = {
+	type: "shape";
+	value: "circle" | "ellipse";
+	style?: Distance | { type: "extent-keyword"; value: string } | Position;
+	at?: Position;
+};
+
+type DefaultRadial = { type: "default-radial"; at: Position };
+
+type ExtentKeyword = { type: "extent-keyword"; value: string; at?: Position };
+
+type RadialOrientation = Shape | ExtentKeyword | DefaultRadial;
+
+const gradientLayerPattern =
+	/^(?:-(webkit|o|ms|moz)-)?(linear-gradient|repeating-linear-gradient|radial-gradient|repeating-radial-gradient)/i;
+
+export function drawCssBackground({
+	ctx,
+	width,
+	height,
+	css,
+}: {
+	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+	width: number;
+	height: number;
+	css: string;
+}): void {
+	const layers = parseBackgroundLayers({ css });
+	const layersInPaintOrder = layers.slice().reverse();
+
+	for (const layer of layersInPaintOrder) {
+		if (layer.type === "color") {
+			ctx.fillStyle = layer.value;
+			ctx.fillRect(0, 0, width, height);
+			continue;
+		}
+
+		drawGradientLayer({ ctx, width, height, gradient: layer.value });
+	}
+}
+
+const parseBackgroundLayers = ({
+	css,
+}: {
+	css: string;
+}): Array<BackgroundLayer> => {
+	const segments = splitCssLayers({ css });
+	const layers: Array<BackgroundLayer> = [];
+
+	for (const segment of segments) {
+		if (!segment) {
+			continue;
+		}
+
+		if (gradientLayerPattern.test(segment)) {
+			try {
+				const parsed = parseGradient({ code: segment.trim() });
+				for (const gradient of parsed) {
+					layers.push({ type: "gradient", value: gradient });
+				}
+				continue;
+			} catch {
+				layers.push({ type: "color", value: segment });
+				continue;
+			}
+		}
+
+		layers.push({ type: "color", value: segment });
+	}
+
+	return layers;
+};
+
+const splitCssLayers = ({ css }: { css: string }): Array<string> => {
+	const layers: Array<string> = [];
+	let current = "";
+	let depth = 0;
+
+	for (const char of css) {
+		if (char === "(") {
+			depth += 1;
+		}
+		if (char === ")") {
+			depth = Math.max(0, depth - 1);
+		}
+
+		if (char === "," && depth === 0) {
+			layers.push(current.trim());
+			current = "";
+			continue;
+		}
+
+		current += char;
+	}
+
+	if (current.trim()) {
+		layers.push(current.trim());
+	}
+
+	return layers;
+};
+
+const drawGradientLayer = ({
+	ctx,
+	width,
+	height,
+	gradient,
+}: {
+	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+	width: number;
+	height: number;
+	gradient: GradientAst;
+}): void => {
+	if (gradient.type.includes("linear")) {
+		drawLinearGradient({ ctx, width, height, gradient });
+		return;
+	}
+
+	drawRadialGradient({ ctx, width, height, gradient });
+};
+
+const drawLinearGradient = ({
+	ctx,
+	width,
+	height,
+	gradient,
+}: {
+	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+	width: number;
+	height: number;
+	gradient: GradientAst;
+}): void => {
+	const { x0, y0, x1, y1, length } = resolveLinearPoints({
+		width,
+		height,
+		orientation: gradient.orientation,
+	});
+	const canvasGradient = ctx.createLinearGradient(x0, y0, x1, y1);
+	const colorStops = normalizeColorStops({
+		colorStops: gradient.colorStops,
+		gradientLength: length,
+	});
+
+	for (const stop of colorStops) {
+		canvasGradient.addColorStop(stop.offset, stop.color);
+	}
+
+	ctx.fillStyle = canvasGradient;
+	ctx.fillRect(0, 0, width, height);
+};
+
+const drawRadialGradient = ({
+	ctx,
+	width,
+	height,
+	gradient,
+}: {
+	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+	width: number;
+	height: number;
+	gradient: GradientAst;
+}): void => {
+	const { cx, cy, rx, ry } = resolveRadialDimensions({
+		width,
+		height,
+		orientation: gradient.orientation,
+	});
+	const gradientLength = Math.max(rx, ry);
+	const colorStops = normalizeColorStops({
+		colorStops: gradient.colorStops,
+		gradientLength,
+	});
+
+	if (rx === ry || ry === 0) {
+		const canvasGradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, rx);
+		for (const stop of colorStops) {
+			canvasGradient.addColorStop(stop.offset, stop.color);
+		}
+		ctx.fillStyle = canvasGradient;
+		ctx.fillRect(0, 0, width, height);
+		return;
+	}
+
+	const scaleY = ry / rx;
+	ctx.save();
+	ctx.translate(cx, cy);
+	ctx.scale(1, scaleY);
+	const canvasGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, rx);
+	for (const stop of colorStops) {
+		canvasGradient.addColorStop(stop.offset, stop.color);
+	}
+	ctx.fillStyle = canvasGradient;
+	ctx.fillRect(-cx, -cy / scaleY, width, height / scaleY);
+	ctx.restore();
+};
+
+const resolveLinearPoints = ({
+	width,
+	height,
+	orientation,
+}: {
+	width: number;
+	height: number;
+	orientation: GradientOrientation | undefined;
+}): LinearPoints => {
+	const angle = resolveLinearAngle({ orientation });
+	const radians = (angle * Math.PI) / 180;
+	const dx = Math.sin(radians);
+	const dy = -Math.cos(radians);
+	const centerX = width / 2;
+	const centerY = height / 2;
+	const halfLength = (Math.abs(width * dx) + Math.abs(height * dy)) / 2;
+	const x0 = centerX - dx * halfLength;
+	const y0 = centerY - dy * halfLength;
+	const x1 = centerX + dx * halfLength;
+	const y1 = centerY + dy * halfLength;
+	const length = Math.hypot(x1 - x0, y1 - y0);
+
+	return { x0, y0, x1, y1, length };
+};
+
+const resolveLinearAngle = ({
+	orientation,
+}: {
+	orientation: GradientOrientation | undefined;
+}): number => {
+	if (!orientation) {
+		return 180;
+	}
+
+	if (!Array.isArray(orientation)) {
+		if (orientation.type === "angular") {
+			return Number.parseFloat(orientation.value);
+		}
+
+		if (orientation.type === "directional") {
+			return angleFromDirectional({ value: orientation.value });
+		}
+	}
+
+	return 180;
+};
+
+const angleFromDirectional = ({ value }: { value: string }): number => {
+	const normalized = value.toLowerCase().replace("to", "").trim();
+	const parts = normalized.split(/\s+/).filter(Boolean);
+	let dx = 0;
+	let dy = 0;
+
+	for (const part of parts) {
+		if (part === "left") {
+			dx = -1;
+		}
+		if (part === "right") {
+			dx = 1;
+		}
+		if (part === "top") {
+			dy = -1;
+		}
+		if (part === "bottom") {
+			dy = 1;
+		}
+	}
+
+	if (dx === 0 && dy === 0) {
+		return 180;
+	}
+
+	const angle = (Math.atan2(dx, -dy) * 180) / Math.PI;
+	return (angle + 360) % 360;
+};
+
+const resolveRadialDimensions = ({
+	width,
+	height,
+	orientation,
+}: {
+	width: number;
+	height: number;
+	orientation: GradientOrientation | undefined;
+}): RadialDimensions => {
+	const centerFallback = { cx: width / 2, cy: height / 2 };
+	const radial = Array.isArray(orientation)
+		? (orientation[0] as RadialOrientation | undefined)
+		: undefined;
+
+	if (!radial) {
+		const { rx, ry } = resolveRadialExtents({
+			width,
+			height,
+			cx: centerFallback.cx,
+			cy: centerFallback.cy,
+			shape: "ellipse",
+			extent: "farthest-corner",
+		});
+		return { ...centerFallback, rx, ry };
+	}
+
+	if (radial.type === "shape") {
+		const { cx, cy } = resolveRadialCenter({
+			width,
+			height,
+			position: radial.at,
+		});
+		const shape = radial.value;
+
+		if (radial.style && radial.style.type === "position") {
+			const xDist = radial.style.value.x;
+			const yDist = radial.style.value.y;
+			const rx = xDist
+				? resolveEllipseDimension({ distance: xDist, axisSize: width })
+				: width / 2;
+			const ry = yDist
+				? resolveEllipseDimension({ distance: yDist, axisSize: height })
+				: height / 2;
+			return { cx, cy, rx, ry };
+		}
+
+		if (radial.style && radial.style.type !== "extent-keyword") {
+			const resolvedRadius = resolveDistanceInPixels({
+				distance: radial.style,
+				axisSize: Math.max(width, height),
+			});
+			if (shape === "circle") {
+				return {
+					cx,
+					cy,
+					rx: resolvedRadius ?? 0,
+					ry: resolvedRadius ?? 0,
+				};
+			}
+
+			const radius = resolvedRadius ?? 0;
+			return { cx, cy, rx: radius, ry: radius };
+		}
+
+		const extent =
+			radial.style && radial.style.type === "extent-keyword"
+				? radial.style.value
+				: "farthest-corner";
+		const { rx, ry } = resolveRadialExtents({
+			width,
+			height,
+			cx,
+			cy,
+			shape,
+			extent,
+		});
+		return { cx, cy, rx, ry };
+	}
+
+	if (radial.type === "extent-keyword") {
+		const { cx, cy } = resolveRadialCenter({
+			width,
+			height,
+			position: radial.at,
+		});
+		const { rx, ry } = resolveRadialExtents({
+			width,
+			height,
+			cx,
+			cy,
+			shape: "ellipse",
+			extent: radial.value,
+		});
+		return { cx, cy, rx, ry };
+	}
+
+	const { cx, cy } = resolveRadialCenter({
+		width,
+		height,
+		position: radial.at,
+	});
+	const { rx, ry } = resolveRadialExtents({
+		width,
+		height,
+		cx,
+		cy,
+		shape: "ellipse",
+		extent: "farthest-corner",
+	});
+	return { cx, cy, rx, ry };
+};
+
+const resolveRadialCenter = ({
+	width,
+	height,
+	position,
+}: {
+	width: number;
+	height: number;
+	position?: Position;
+}): { cx: number; cy: number } => {
+	if (!position) {
+		return { cx: width / 2, cy: height / 2 };
+	}
+
+	const normalized = normalizePositionKeywords({ position });
+	const cx = resolvePositionValue({
+		distance: normalized.value.x,
+		axisSize: width,
+		axis: "x",
+	});
+	const cy = resolvePositionValue({
+		distance: normalized.value.y,
+		axisSize: height,
+		axis: "y",
+	});
+
+	return { cx, cy };
+};
+
+const normalizePositionKeywords = ({
+	position,
+}: {
+	position: Position;
+}): Position => {
+	const xValue = position.value.x;
+	const yValue = position.value.y;
+
+	if (
+		xValue?.type === "position-keyword" &&
+		yValue?.type === "position-keyword"
+	) {
+		const xKeyword = xValue.value.toLowerCase() as PositionKeyword;
+		const yKeyword = yValue.value.toLowerCase() as PositionKeyword;
+		const xIsVertical = xKeyword === "top" || xKeyword === "bottom";
+		const yIsHorizontal = yKeyword === "left" || yKeyword === "right";
+
+		if (xIsVertical && yIsHorizontal) {
+			return {
+				type: "position",
+				value: {
+					x: { type: "position-keyword", value: yKeyword },
+					y: { type: "position-keyword", value: xKeyword },
+				},
+			};
+		}
+	}
+
+	return position;
+};
+
+const resolveRadialExtents = ({
+	width,
+	height,
+	cx,
+	cy,
+	shape,
+	extent,
+}: {
+	width: number;
+	height: number;
+	cx: number;
+	cy: number;
+	shape: "circle" | "ellipse";
+	extent: string;
+}): { rx: number; ry: number } => {
+	const left = cx;
+	const right = width - cx;
+	const top = cy;
+	const bottom = height - cy;
+
+	if (shape === "circle") {
+		const distances = [
+			Math.hypot(left, top),
+			Math.hypot(right, top),
+			Math.hypot(left, bottom),
+			Math.hypot(right, bottom),
+		];
+		if (extent === "closest-side") {
+			return { rx: Math.min(left, right, top, bottom), ry: 0 };
+		}
+		if (extent === "farthest-side") {
+			return { rx: Math.max(left, right, top, bottom), ry: 0 };
+		}
+		if (extent === "closest-corner") {
+			return { rx: Math.min(...distances), ry: 0 };
+		}
+		return { rx: Math.max(...distances), ry: 0 };
+	}
+
+	if (extent === "closest-side") {
+		return { rx: Math.min(left, right), ry: Math.min(top, bottom) };
+	}
+	if (extent === "farthest-side") {
+		return { rx: Math.max(left, right), ry: Math.max(top, bottom) };
+	}
+
+	const corners = [
+		{ dx: left, dy: top },
+		{ dx: right, dy: top },
+		{ dx: left, dy: bottom },
+		{ dx: right, dy: bottom },
+	];
+	const sorted = corners
+		.slice()
+		.sort((a, b) => Math.hypot(a.dx, a.dy) - Math.hypot(b.dx, b.dy));
+	const chosen =
+		extent === "closest-corner" ? sorted[0] : sorted[sorted.length - 1];
+	return { rx: Math.abs(chosen.dx), ry: Math.abs(chosen.dy) };
+};
+
+const resolvePositionValue = ({
+	distance,
+	axisSize,
+	axis,
+}: {
+	distance?: Distance;
+	axisSize: number;
+	axis: "x" | "y";
+}): number => {
+	if (!distance) {
+		return axisSize / 2;
+	}
+
+	if (distance.type === "%") {
+		return (Number.parseFloat(distance.value) / 100) * axisSize;
+	}
+
+	if (distance.type === "position-keyword") {
+		return keywordToPosition({
+			value: distance.value,
+			axisSize,
+			axis,
+		});
+	}
+
+	if (distance.type === "px") {
+		return Number.parseFloat(distance.value);
+	}
+
+	if (distance.type === "em") {
+		return Number.parseFloat(distance.value) * 16;
+	}
+
+	return axisSize / 2;
+};
+
+const resolveDistanceInPixels = ({
+	distance,
+	axisSize,
+}: {
+	distance: Distance;
+	axisSize: number;
+}): number | null => {
+	if (distance.type === "%") {
+		return (Number.parseFloat(distance.value) / 100) * axisSize;
+	}
+
+	if (distance.type === "px") {
+		return Number.parseFloat(distance.value);
+	}
+
+	if (distance.type === "em") {
+		return Number.parseFloat(distance.value) * 16;
+	}
+
+	return null;
+};
+
+const resolveEllipseDimension = ({
+	distance,
+	axisSize,
+}: {
+	distance: Distance;
+	axisSize: number;
+}): number => {
+	if (distance.type === "%") {
+		return (Number.parseFloat(distance.value) / 100) * axisSize;
+	}
+
+	if (distance.type === "px") {
+		return Number.parseFloat(distance.value);
+	}
+
+	if (distance.type === "em") {
+		return Number.parseFloat(distance.value) * 16;
+	}
+
+	return axisSize / 2;
+};
+
+const keywordToPosition = ({
+	value,
+	axisSize,
+	axis,
+}: {
+	value: string;
+	axisSize: number;
+	axis: "x" | "y";
+}): number => {
+	const keyword = value.toLowerCase() as PositionKeyword;
+
+	if (keyword === "center") {
+		return axisSize / 2;
+	}
+
+	if (axis === "x") {
+		if (keyword === "left") {
+			return 0;
+		}
+		if (keyword === "right") {
+			return axisSize;
+		}
+	}
+
+	if (axis === "y") {
+		if (keyword === "top") {
+			return 0;
+		}
+		if (keyword === "bottom") {
+			return axisSize;
+		}
+	}
+
+	return axisSize / 2;
+};
+
+const isTransparent = ({ color }: { color: string }): boolean => {
+	const lower = color.toLowerCase().trim();
+	if (lower === "transparent") {
+		return true;
+	}
+	const rgbaMatch = lower.match(
+		/^rgba\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*([\d.]+)\s*\)$/,
+	);
+	if (rgbaMatch && Number.parseFloat(rgbaMatch[1]) === 0) {
+		return true;
+	}
+	return false;
+};
+
+const parseColorToRgb = ({
+	color,
+}: {
+	color: string;
+}): { r: number; g: number; b: number; a: number } | null => {
+	const lower = color.toLowerCase().trim();
+
+	const hexMatch = lower.match(/^#([0-9a-f]{3,8})$/);
+	if (hexMatch) {
+		const hex = hexMatch[1];
+		if (hex.length === 3) {
+			return {
+				r: Number.parseInt(hex[0] + hex[0], 16),
+				g: Number.parseInt(hex[1] + hex[1], 16),
+				b: Number.parseInt(hex[2] + hex[2], 16),
+				a: 1,
+			};
+		}
+		if (hex.length === 6) {
+			return {
+				r: Number.parseInt(hex.slice(0, 2), 16),
+				g: Number.parseInt(hex.slice(2, 4), 16),
+				b: Number.parseInt(hex.slice(4, 6), 16),
+				a: 1,
+			};
+		}
+		if (hex.length === 8) {
+			return {
+				r: Number.parseInt(hex.slice(0, 2), 16),
+				g: Number.parseInt(hex.slice(2, 4), 16),
+				b: Number.parseInt(hex.slice(4, 6), 16),
+				a: Number.parseInt(hex.slice(6, 8), 16) / 255,
+			};
+		}
+	}
+
+	const rgbMatch = lower.match(
+		/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/,
+	);
+	if (rgbMatch) {
+		return {
+			r: Number.parseFloat(rgbMatch[1]),
+			g: Number.parseFloat(rgbMatch[2]),
+			b: Number.parseFloat(rgbMatch[3]),
+			a: 1,
+		};
+	}
+
+	const rgbaMatch = lower.match(
+		/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/,
+	);
+	if (rgbaMatch) {
+		return {
+			r: Number.parseFloat(rgbaMatch[1]),
+			g: Number.parseFloat(rgbaMatch[2]),
+			b: Number.parseFloat(rgbaMatch[3]),
+			a: Number.parseFloat(rgbaMatch[4]),
+		};
+	}
+
+	return null;
+};
+
+const fixTransparentStops = ({
+	stops,
+}: {
+	stops: Array<{ color: string; offset: number | null }>;
+}): Array<{ color: string; offset: number | null }> => {
+	if (stops.length === 0) {
+		return stops;
+	}
+
+	const result = stops.map((stop) => ({ ...stop }));
+
+	for (let i = 0; i < result.length; i++) {
+		if (!isTransparent({ color: result[i].color })) {
+			continue;
+		}
+
+		let donorColor: { r: number; g: number; b: number } | null = null;
+
+		for (let j = i - 1; j >= 0; j--) {
+			if (!isTransparent({ color: result[j].color })) {
+				const parsed = parseColorToRgb({ color: result[j].color });
+				if (parsed) {
+					donorColor = parsed;
+					break;
+				}
+			}
+		}
+
+		if (!donorColor) {
+			for (let j = i + 1; j < result.length; j++) {
+				if (!isTransparent({ color: result[j].color })) {
+					const parsed = parseColorToRgb({ color: result[j].color });
+					if (parsed) {
+						donorColor = parsed;
+						break;
+					}
+				}
+			}
+		}
+
+		if (donorColor) {
+			result[i].color =
+				`rgba(${donorColor.r},${donorColor.g},${donorColor.b},0)`;
+		}
+	}
+
+	return result;
+};
+
+const normalizeColorStops = ({
+	colorStops,
+	gradientLength,
+}: {
+	colorStops: Array<ColorStop>;
+	gradientLength: number;
+}): Array<{ color: string; offset: number }> => {
+	const mappedStops = colorStops.map((stop) => ({
+		color: colorToString({ color: stop }),
+		offset: resolveStopOffset({ stop, gradientLength }),
+	}));
+
+	const fixedStops = fixTransparentStops({ stops: mappedStops });
+	const resolvedStops = fixedStops.map((stop) => ({ ...stop }));
+	const knownIndices = resolvedStops
+		.map((stop, index) => (stop.offset === null ? null : index))
+		.filter((index): index is number => index !== null);
+
+	if (knownIndices.length === 0) {
+		const step = resolvedStops.length > 1 ? 1 / (resolvedStops.length - 1) : 1;
+		for (let index = 0; index < resolvedStops.length; index += 1) {
+			resolvedStops[index].offset = step * index;
+		}
+		return clampStops({ stops: resolvedStops });
+	}
+
+	const firstKnown = knownIndices[0];
+	if (resolvedStops[firstKnown].offset === null) {
+		resolvedStops[firstKnown].offset = 0;
+	}
+
+	for (let index = 0; index < firstKnown; index += 1) {
+		const nextOffset = resolvedStops[firstKnown].offset ?? 0;
+		resolvedStops[index].offset = (nextOffset * index) / firstKnown;
+	}
+
+	for (let i = 0; i < knownIndices.length - 1; i += 1) {
+		const startIndex = knownIndices[i];
+		const endIndex = knownIndices[i + 1];
+		const startOffset = resolvedStops[startIndex].offset ?? 0;
+		const endOffset = resolvedStops[endIndex].offset ?? startOffset;
+		const gap = endIndex - startIndex;
+
+		if (gap <= 1) {
+			continue;
+		}
+
+		const step = (endOffset - startOffset) / gap;
+		for (let index = 1; index < gap; index += 1) {
+			resolvedStops[startIndex + index].offset = startOffset + step * index;
+		}
+	}
+
+	const lastKnown = knownIndices[knownIndices.length - 1];
+	const lastOffset = resolvedStops[lastKnown].offset ?? 1;
+	if (lastKnown < resolvedStops.length - 1) {
+		const gap = resolvedStops.length - 1 - lastKnown;
+		const step = (1 - lastOffset) / gap;
+		for (let index = 1; index <= gap; index += 1) {
+			resolvedStops[lastKnown + index].offset = lastOffset + step * index;
+		}
+	}
+
+	return clampStops({ stops: resolvedStops });
+};
+
+const clampStops = ({
+	stops,
+}: {
+	stops: Array<{ color: string; offset: number | null }>;
+}): Array<{ color: string; offset: number }> => {
+	return stops.map((stop) => ({
+		color: stop.color,
+		offset: clamp01({ value: stop.offset ?? 0 }),
+	}));
+};
+
+const resolveStopOffset = ({
+	stop,
+	gradientLength,
+}: {
+	stop: ColorStop;
+	gradientLength: number;
+}): number | null => {
+	if (!stop.length) {
+		return null;
+	}
+
+	if (stop.length.type === "%") {
+		return Number.parseFloat(stop.length.value) / 100;
+	}
+
+	if (stop.length.type === "px") {
+		return Number.parseFloat(stop.length.value) / gradientLength;
+	}
+
+	if (stop.length.type === "em") {
+		return (Number.parseFloat(stop.length.value) * 16) / gradientLength;
+	}
+
+	return null;
+};
+
+const clamp01 = ({ value }: { value: number }): number => {
+	if (value < 0) {
+		return 0;
+	}
+	if (value > 1) {
+		return 1;
+	}
+	return value;
+};
+
+const colorToString = ({ color }: { color: Color }): string => {
+	if (color.type === "hex") {
+		return `#${color.value}`;
+	}
+
+	if (color.type === "literal") {
+		return color.value;
+	}
+
+	if (color.type === "rgb") {
+		return `rgb(${color.value.join(",")})`;
+	}
+
+	if (color.type === "rgba") {
+		return `rgba(${color.value.join(",")})`;
+	}
+
+	if (color.type === "hsl") {
+		return `hsl(${color.value.join(",")})`;
+	}
+
+	if (color.type === "hsla") {
+		return `hsla(${color.value.join(",")})`;
+	}
+
+	return `var(${color.value})`;
+};