createPaletteVis = (
colorsArray,
n = colorsArray.length,
backgroundColor = "white"
) => {
console.log("n: ", n);
const w = n * SWATCH_SIZE + SWATCH_STROKE * 2;
const h = SWATCH_SIZE + SWATCH_STROKE * 2;
return htl.svg`<svg viewBox="0 0 ${w} ${h}" style="max-height:${MAX_PALETTE_HEIGHT}px;">
<rect x="0" y="0" width="${w}" height="${h}" fill="${backgroundColor}" />
${colorsArray.map((oklch, index) =>
createSwatch(
getCssColorString(oklch),
backgroundColor,
index * SWATCH_SIZE + SWATCH_STROKE
)
)}
</svg>`;
}