color-utils.ts•1.87 kB
import type { Paint, RGBA } from "@figma/rest-api-spec";
import { logger } from "./error-handling.js";
/**
* Converts Figma RGBA color to hex format with opacity.
*/
export const convertColor = ({
color,
opacity = 1,
}: {
color: RGBA;
opacity?: number | undefined;
}): { hex: string; opacity: number } => {
const r = Math.round(color.r * 255);
const g = Math.round(color.g * 255);
const b = Math.round(color.b * 255);
const a = Math.round(opacity * color.a * 100) / 100;
const hex =
"#" +
((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
return { hex, opacity: a };
};
/**
* Formats RGBA color into CSS rgba() string.
*/
export const formatRGBAColor = ({
color,
opacity = 1,
}: {
color: RGBA;
opacity?: number | undefined;
}): string => {
const r = Math.round(color.r * 255);
const g = Math.round(color.g * 255);
const b = Math.round(color.b * 255);
const a = Math.round(opacity * color.a * 100) / 100;
return `rgba(${r}, ${g}, ${b}, ${a})`;
};
/**
* Parses Figma paint object into standardized format.
* Handles different paint types: solid colors, images, gradients.
*/
export const parsePaint = (
raw: Paint
): { type: string; value: string; scaleMode?: string } | null => {
if (raw.type === "IMAGE") {
return {
type: "IMAGE",
value: raw.imageRef,
scaleMode: raw.scaleMode,
};
} else if (raw.type === "SOLID") {
const { hex, opacity } = convertColor({
color: raw.color!,
opacity: raw.opacity,
});
if (opacity === 1) {
return { type: "HEX", value: hex };
} else {
return {
type: "RGBA",
value: formatRGBAColor({ color: raw.color!, opacity }),
};
}
} else {
logger.warn(`Unknown paint type encountered: ${raw.type}`, {
paintType: raw.type,
});
return null;
}
};