summaryrefslogtreecommitdiff
path: root/apps/web/src/lib/gradients
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/lib/gradients')
-rw-r--r--apps/web/src/lib/gradients/canvas.ts923
-rw-r--r--apps/web/src/lib/gradients/index.ts2
-rw-r--r--apps/web/src/lib/gradients/parser.ts652
3 files changed, 1577 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})`;
+};
diff --git a/apps/web/src/lib/gradients/index.ts b/apps/web/src/lib/gradients/index.ts
new file mode 100644
index 00000000..490a8fbf
--- /dev/null
+++ b/apps/web/src/lib/gradients/index.ts
@@ -0,0 +1,2 @@
+export * from "./parser";
+export * from "./canvas";
diff --git a/apps/web/src/lib/gradients/parser.ts b/apps/web/src/lib/gradients/parser.ts
new file mode 100644
index 00000000..55440e3c
--- /dev/null
+++ b/apps/web/src/lib/gradients/parser.ts
@@ -0,0 +1,652 @@
+/*
+ * Original source: https://github.com/rafaelcaricio/gradient-parser/blob/master/lib/parser.js
+ */
+
+type GradientType =
+ | "linear-gradient"
+ | "repeating-linear-gradient"
+ | "radial-gradient"
+ | "repeating-radial-gradient";
+
+type DirectionalOrientation = { type: "directional"; value: string };
+type AngularOrientation = { type: "angular"; value: string };
+type LinearOrientation = DirectionalOrientation | AngularOrientation;
+
+type Distance =
+ | { type: "%"; value: string }
+ | { type: "position-keyword"; value: string }
+ | { type: "calc"; value: string }
+ | { type: "px"; value: string }
+ | { type: "em"; value: string };
+
+type PositionValue = { x?: Distance; y?: Distance };
+type Position = { type: "position"; value: PositionValue };
+
+type ExtentKeyword = { type: "extent-keyword"; value: string };
+
+type ShapeValue = "circle" | "ellipse";
+type Shape = {
+ type: "shape";
+ value: ShapeValue;
+ style?: Distance | ExtentKeyword | Position;
+ at?: Position;
+};
+
+type DefaultRadial = { type: "default-radial"; at: Position };
+
+type RadialOrientation =
+ | Shape
+ | (ExtentKeyword & { at?: Position })
+ | DefaultRadial;
+
+export type GradientOrientation = LinearOrientation | Array<RadialOrientation>;
+
+export type Color =
+ | { type: "hex"; value: string }
+ | { type: "literal"; value: string }
+ | { type: "rgb"; value: Array<string> }
+ | { type: "rgba"; value: Array<string> }
+ | { type: "hsl"; value: [string, string, string] }
+ | { type: "hsla"; value: [string, string, string, string] }
+ | { type: "var"; value: string };
+
+export type ColorStop = Color & { length?: Distance };
+
+export type GradientAst = {
+ type: GradientType;
+ orientation: GradientOrientation | undefined;
+ colorStops: Array<ColorStop>;
+};
+
+type Tokens = {
+ linearGradient: RegExp;
+ repeatingLinearGradient: RegExp;
+ radialGradient: RegExp;
+ repeatingRadialGradient: RegExp;
+ sideOrCorner: RegExp;
+ extentKeywords: RegExp;
+ positionKeywords: RegExp;
+ pixelValue: RegExp;
+ percentageValue: RegExp;
+ emValue: RegExp;
+ angleValue: RegExp;
+ radianValue: RegExp;
+ startCall: RegExp;
+ endCall: RegExp;
+ comma: RegExp;
+ hexColor: RegExp;
+ literalColor: RegExp;
+ rgbColor: RegExp;
+ rgbaColor: RegExp;
+ varColor: RegExp;
+ calcValue: RegExp;
+ variableName: RegExp;
+ number: RegExp;
+ hslColor: RegExp;
+ hslaColor: RegExp;
+};
+
+const tokens: Tokens = {
+ linearGradient: /^(-(webkit|o|ms|moz)-)?(linear-gradient)/i,
+ repeatingLinearGradient:
+ /^(-(webkit|o|ms|moz)-)?(repeating-linear-gradient)/i,
+ radialGradient: /^(-(webkit|o|ms|moz)-)?(radial-gradient)/i,
+ repeatingRadialGradient:
+ /^(-(webkit|o|ms|moz)-)?(repeating-radial-gradient)/i,
+ sideOrCorner:
+ /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+ extentKeywords:
+ /^(closest-side|closest-corner|farthest-side|farthest-corner|contain|cover)/,
+ positionKeywords: /^(left|center|right|top|bottom)/i,
+ pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+ percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))%/,
+ emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+ angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+ radianValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))rad/,
+ startCall: /^\(/,
+ endCall: /^\)/,
+ comma: /^,/,
+ hexColor: /^#([0-9a-fA-F]+)/,
+ literalColor: /^([a-zA-Z]+)/,
+ rgbColor: /^rgb/i,
+ rgbaColor: /^rgba/i,
+ varColor: /^var/i,
+ calcValue: /^calc/i,
+ variableName: /^(--[a-zA-Z0-9-,\s#]+)/,
+ number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/,
+ hslColor: /^hsl/i,
+ hslaColor: /^hsla/i,
+};
+
+let input = "";
+
+const error = ({ message }: { message: string }): never => {
+ const err = new Error(`${input}: ${message}`);
+ (err as Error & { source?: string }).source = input;
+ throw err;
+};
+
+const getAst = (): Array<GradientAst> => {
+ const ast = matchListDefinitions();
+
+ if (input.length > 0) {
+ error({ message: "Invalid input not EOF" });
+ }
+
+ return ast;
+};
+
+const matchListDefinitions = (): Array<GradientAst> =>
+ matchListing({ matcher: matchDefinition });
+
+const matchDefinition = (): GradientAst | undefined =>
+ matchGradient({
+ gradientType: "linear-gradient",
+ pattern: tokens.linearGradient,
+ orientationMatcher: matchLinearOrientation,
+ }) ||
+ matchGradient({
+ gradientType: "repeating-linear-gradient",
+ pattern: tokens.repeatingLinearGradient,
+ orientationMatcher: matchLinearOrientation,
+ }) ||
+ matchGradient({
+ gradientType: "radial-gradient",
+ pattern: tokens.radialGradient,
+ orientationMatcher: matchListRadialOrientations,
+ }) ||
+ matchGradient({
+ gradientType: "repeating-radial-gradient",
+ pattern: tokens.repeatingRadialGradient,
+ orientationMatcher: matchListRadialOrientations,
+ });
+
+const matchGradient = ({
+ gradientType,
+ pattern,
+ orientationMatcher,
+}: {
+ gradientType: GradientType;
+ pattern: RegExp;
+ orientationMatcher: () => GradientOrientation | undefined;
+}): GradientAst | undefined =>
+ matchCall({
+ pattern,
+ callback: () => {
+ const orientation = orientationMatcher();
+ if (orientation && !scan({ regexp: tokens.comma })) {
+ error({ message: "Missing comma before color stops" });
+ }
+
+ return {
+ type: gradientType,
+ orientation,
+ colorStops: matchListing({ matcher: matchColorStop }),
+ };
+ },
+ });
+
+const matchCall = <T>({
+ pattern,
+ callback,
+}: {
+ pattern: RegExp;
+ callback: (captures: RegExpExecArray) => T;
+}): T | undefined => {
+ const captures = scan({ regexp: pattern });
+
+ if (!captures) {
+ return undefined;
+ }
+
+ if (!scan({ regexp: tokens.startCall })) {
+ error({ message: "Missing (" });
+ }
+
+ const result = callback(captures);
+
+ if (!scan({ regexp: tokens.endCall })) {
+ error({ message: "Missing )" });
+ }
+
+ return result;
+};
+
+const matchLinearOrientation = (): LinearOrientation | undefined => {
+ const sideOrCorner = matchSideOrCorner();
+ if (sideOrCorner) {
+ return sideOrCorner;
+ }
+
+ const legacyDirection = match({
+ type: "position-keyword",
+ pattern: tokens.positionKeywords,
+ captureIndex: 1,
+ });
+ if (legacyDirection) {
+ return {
+ type: "directional",
+ value: legacyDirection.value,
+ };
+ }
+
+ return matchAngle();
+};
+
+const matchSideOrCorner = (): DirectionalOrientation | undefined =>
+ match({ type: "directional", pattern: tokens.sideOrCorner, captureIndex: 1 });
+
+const matchAngle = (): AngularOrientation | undefined =>
+ match({ type: "angular", pattern: tokens.angleValue, captureIndex: 1 }) ||
+ match({ type: "angular", pattern: tokens.radianValue, captureIndex: 1 });
+
+const matchListRadialOrientations = ():
+ | Array<RadialOrientation>
+ | undefined => {
+ const radialOrientation = matchRadialOrientation();
+ if (!radialOrientation) {
+ return undefined;
+ }
+
+ const radialOrientations: Array<RadialOrientation> = [radialOrientation];
+ const lookaheadCache = input;
+
+ if (!scan({ regexp: tokens.comma })) {
+ return radialOrientations;
+ }
+
+ const nextRadial = matchRadialOrientation();
+ if (!nextRadial) {
+ input = lookaheadCache;
+ return radialOrientations;
+ }
+
+ radialOrientations.push(nextRadial);
+ return radialOrientations;
+};
+
+const matchRadialOrientation = (): RadialOrientation | undefined => {
+ const radialType = matchCircle() || matchEllipse();
+ if (radialType) {
+ radialType.at = matchAtPosition();
+ return radialType;
+ }
+
+ const extent = matchExtentKeyword();
+ if (extent) {
+ const positionAt = matchAtPosition();
+ if (positionAt) {
+ return { ...extent, at: positionAt };
+ }
+ return extent;
+ }
+
+ const implicitEllipse = matchImplicitEllipse();
+ if (implicitEllipse) {
+ return implicitEllipse;
+ }
+
+ const atPosition = matchAtPosition();
+ if (atPosition) {
+ return { type: "default-radial", at: atPosition };
+ }
+
+ const defaultPosition = matchPositioning();
+ if (defaultPosition) {
+ return { type: "default-radial", at: defaultPosition };
+ }
+
+ return undefined;
+};
+
+const matchImplicitEllipse = (): Shape | undefined => {
+ const lookaheadCache = input;
+
+ const width = matchDistance();
+ if (!width) {
+ return undefined;
+ }
+
+ const height = matchDistance();
+ if (!height) {
+ input = lookaheadCache;
+ return undefined;
+ }
+
+ const atPos = matchAtPosition();
+ if (!atPos) {
+ input = lookaheadCache;
+ return undefined;
+ }
+
+ return {
+ type: "shape",
+ value: "ellipse",
+ style: { type: "position", value: { x: width, y: height } },
+ at: atPos,
+ };
+};
+
+const matchCircle = (): Shape | undefined => {
+ const circle = match({
+ type: "shape",
+ pattern: /^(circle)/i,
+ captureIndex: 0,
+ }) as Shape | undefined;
+
+ if (!circle) {
+ return undefined;
+ }
+
+ circle.style = matchLength() || matchExtentKeyword();
+ circle.value = "circle";
+ return circle;
+};
+
+const matchEllipse = (): Shape | undefined => {
+ const ellipse = match({
+ type: "shape",
+ pattern: /^(ellipse)/i,
+ captureIndex: 0,
+ }) as Shape | undefined;
+
+ if (!ellipse) {
+ return undefined;
+ }
+
+ ellipse.style = matchPositioning() || matchDistance() || matchExtentKeyword();
+ ellipse.value = "ellipse";
+ return ellipse;
+};
+
+const matchExtentKeyword = (): ExtentKeyword | undefined =>
+ match({
+ type: "extent-keyword",
+ pattern: tokens.extentKeywords,
+ captureIndex: 1,
+ });
+
+const matchAtPosition = (): Position | undefined => {
+ if (!match({ type: "position", pattern: /^at/, captureIndex: 0 })) {
+ return undefined;
+ }
+
+ const positioning = matchPositioning();
+ if (!positioning) {
+ error({ message: "Missing positioning value" });
+ }
+
+ return positioning;
+};
+
+const matchPositioning = (): Position | undefined => {
+ const location = matchCoordinates();
+
+ if (!location.x && !location.y) {
+ return undefined;
+ }
+
+ return {
+ type: "position",
+ value: location,
+ };
+};
+
+const matchCoordinates = (): PositionValue => ({
+ x: matchDistance(),
+ y: matchDistance(),
+});
+
+const matchListing = <T>({
+ matcher,
+}: {
+ matcher: () => T | undefined;
+}): Array<T> => {
+ const captures = matcher();
+ const result: Array<T> = [];
+
+ if (!captures) {
+ return result;
+ }
+
+ result.push(captures);
+ while (scan({ regexp: tokens.comma })) {
+ const nextCapture = matcher() ?? error({ message: "One extra comma" });
+ result.push(nextCapture);
+ }
+
+ return result;
+};
+
+const matchColorStop = (): ColorStop => {
+ const color = matchColor() ?? error({ message: "Expected color definition" });
+ const length = matchDistance();
+ return { ...color, length };
+};
+
+const matchColor = (): Color | undefined =>
+ matchHexColor() ||
+ matchHSLAColor() ||
+ matchHSLColor() ||
+ matchRGBAColor() ||
+ matchRGBColor() ||
+ matchVarColor() ||
+ matchLiteralColor();
+
+const matchLiteralColor = (): Color | undefined =>
+ match({ type: "literal", pattern: tokens.literalColor, captureIndex: 0 });
+
+const matchHexColor = (): Color | undefined =>
+ match({ type: "hex", pattern: tokens.hexColor, captureIndex: 1 });
+
+const matchRGBColor = (): Color | undefined =>
+ matchCall({
+ pattern: tokens.rgbColor,
+ callback: () => ({
+ type: "rgb",
+ value: matchListing({ matcher: matchNumber }),
+ }),
+ });
+
+const matchRGBAColor = (): Color | undefined =>
+ matchCall({
+ pattern: tokens.rgbaColor,
+ callback: () => ({
+ type: "rgba",
+ value: matchListing({ matcher: matchNumber }),
+ }),
+ });
+
+const matchVarColor = (): Color | undefined =>
+ matchCall({
+ pattern: tokens.varColor,
+ callback: () => ({
+ type: "var",
+ value: matchVariableName(),
+ }),
+ });
+
+const matchHSLColor = (): Color | undefined =>
+ matchCall({
+ pattern: tokens.hslColor,
+ callback: () => {
+ const lookahead = scan({ regexp: tokens.percentageValue });
+ if (lookahead) {
+ error({
+ message:
+ "HSL hue value must be a number in degrees (0-360) or normalized (-360 to 360), not a percentage",
+ });
+ }
+
+ const hue = matchNumber();
+ scan({ regexp: tokens.comma });
+ let captures = scan({ regexp: tokens.percentageValue });
+ const sat = captures ? captures[1] : null;
+ scan({ regexp: tokens.comma });
+ captures = scan({ regexp: tokens.percentageValue });
+ const light = captures ? captures[1] : null;
+ const ensuredSat =
+ sat ??
+ error({
+ message:
+ "Expected percentage value for saturation and lightness in HSL",
+ });
+ const ensuredLight =
+ light ??
+ error({
+ message:
+ "Expected percentage value for saturation and lightness in HSL",
+ });
+ return {
+ type: "hsl",
+ value: [hue, ensuredSat, ensuredLight],
+ };
+ },
+ });
+
+const matchHSLAColor = (): Color | undefined =>
+ matchCall({
+ pattern: tokens.hslaColor,
+ callback: () => {
+ const hue = matchNumber();
+ scan({ regexp: tokens.comma });
+ let captures = scan({ regexp: tokens.percentageValue });
+ const sat = captures ? captures[1] : null;
+ scan({ regexp: tokens.comma });
+ captures = scan({ regexp: tokens.percentageValue });
+ const light = captures ? captures[1] : null;
+ scan({ regexp: tokens.comma });
+ const alpha = matchNumber();
+ const ensuredSat =
+ sat ??
+ error({
+ message:
+ "Expected percentage value for saturation and lightness in HSLA",
+ });
+ const ensuredLight =
+ light ??
+ error({
+ message:
+ "Expected percentage value for saturation and lightness in HSLA",
+ });
+ return {
+ type: "hsla",
+ value: [hue, ensuredSat, ensuredLight, alpha],
+ };
+ },
+ });
+
+const matchVariableName = (): string => {
+ const captures =
+ scan({ regexp: tokens.variableName }) ??
+ error({ message: "Expected CSS variable name" });
+ return captures[1];
+};
+
+const matchNumber = (): string => {
+ const captures =
+ scan({ regexp: tokens.number }) ?? error({ message: "Expected number" });
+ return captures[1];
+};
+
+const matchDistance = (): Distance | undefined =>
+ match({ type: "%", pattern: tokens.percentageValue, captureIndex: 1 }) ||
+ matchPositionKeyword() ||
+ matchCalc() ||
+ matchLength();
+
+const matchPositionKeyword = (): Distance | undefined =>
+ match({
+ type: "position-keyword",
+ pattern: tokens.positionKeywords,
+ captureIndex: 1,
+ });
+
+const matchCalc = (): Distance | undefined =>
+ matchCall({
+ pattern: tokens.calcValue,
+ callback: () => {
+ let openParenCount = 1;
+ let index = 0;
+
+ while (openParenCount > 0 && index < input.length) {
+ const char = input.charAt(index);
+ if (char === "(") {
+ openParenCount++;
+ } else if (char === ")") {
+ openParenCount--;
+ }
+ index++;
+ }
+
+ if (openParenCount > 0) {
+ error({ message: "Missing closing parenthesis in calc() expression" });
+ }
+
+ const calcContent = input.slice(0, index - 1);
+ consume({ size: index - 1 });
+
+ return {
+ type: "calc",
+ value: calcContent,
+ };
+ },
+ });
+
+const matchLength = (): Distance | undefined =>
+ match({ type: "px", pattern: tokens.pixelValue, captureIndex: 1 }) ||
+ match({ type: "em", pattern: tokens.emValue, captureIndex: 1 });
+
+const match = <TType extends string>({
+ type,
+ pattern,
+ captureIndex,
+}: {
+ type: TType;
+ pattern: RegExp;
+ captureIndex: number;
+}): { type: TType; value: string } | undefined => {
+ const captures = scan({ regexp: pattern });
+ if (!captures) {
+ return undefined;
+ }
+
+ return {
+ type,
+ value: captures[captureIndex],
+ };
+};
+
+const scan = ({ regexp }: { regexp: RegExp }): RegExpExecArray | null => {
+ const blankCaptures = /^[\n\r\t\s]+/.exec(input);
+ if (blankCaptures) {
+ consume({ size: blankCaptures[0].length });
+ }
+
+ const captures = regexp.exec(input);
+ if (captures) {
+ consume({ size: captures[0].length });
+ }
+
+ return captures;
+};
+
+const consume = ({ size }: { size: number }): void => {
+ input = input.slice(size);
+};
+
+export const parseGradient = ({
+ code,
+}: {
+ code: string;
+}): Array<GradientAst> => {
+ input = code.toString().trim();
+ if (input.endsWith(";")) {
+ input = input.slice(0, -1);
+ }
+ return getAst();
+};
+
+export const GradientParser = {
+ parse: parseGradient,
+};
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 14:19:57 +0000