@saas-ui/palette/dist/index.mjs

Color palette generator for Chakra UI

'use client'

// src/index.ts
import chroma from "chroma-js";
import { theme } from "@chakra-ui/react";
var names = {
  0: "red",
  30: "orange",
  50: "yellow",
  150: "green",
  180: "teal",
  190: "cyan",
  210: "blue",
  260: "purple",
  330: "pink"
};
var hueName = (h) => {
  const i = Math.round((h - 2) / 10) * 10;
  const name = names[i];
  return name;
};
var getLumsFromThemeColors = (name) => {
  const themeColors = theme.colors;
  const lums = [];
  let color = themeColors[name];
  if (!color) {
    color = themeColors.red;
  }
  for (const lum in color) {
    lums.push(chroma.hex(color[lum]).luminance());
  }
  return lums;
};
var createArray = (length) => {
  const arr = [];
  for (let i = 0; i < length; i++) {
    arr.push(i);
  }
  return arr;
};
var createHues = (length) => {
  const hueStep = 360 / length;
  return (base) => {
    const hues = createArray(length).map(
      (n) => Math.floor((base + n * hueStep) % 360)
    );
    return hues;
  };
};
var createBlack = (hex, lum = 0) => {
  return chroma(hex).luminance(lum).hex();
};
var createShades = (hex, lums) => {
  return lums.map((lum) => {
    return chroma(hex).luminance(lum).hex();
  });
};
var getColorName = (hex) => {
  const [hue, sat] = chroma(hex).hsl();
  const name = hueName(hue);
  return name;
};
var mapValues = (values) => {
  const keys = [
    "50",
    "100",
    "200",
    "300",
    "400",
    "500",
    "600",
    "700",
    "800",
    "900"
  ];
  const obj = {};
  for (const key in values) {
    obj[keys[key]] = values[key];
  }
  return obj;
};
var createPalette = (hex, options = {}) => {
  const colors = options.colors || {};
  const color = chroma(hex);
  const palette = {};
  const [hue, sat, lte] = color.hsl();
  const hues = createHues(36)(hue);
  const gray = colors.gray || color.hex();
  palette.black = createBlack(gray, options.blackLuminance);
  palette.gray = mapValues(createShades(gray, getLumsFromThemeColors("gray")));
  hues.forEach((h) => {
    let c = chroma.hsl(h, sat, lte);
    const name = getColorName(c);
    if (!name) {
      return;
    }
    if (colors[name]) {
      c = chroma.hex(colors[name]);
    }
    palette[name] = mapValues(
      createShades(c.hex(), getLumsFromThemeColors(name))
    );
  });
  Object.entries(colors).forEach(([name, value]) => {
    if (!palette[name]) {
      const c = chroma(value);
      palette[name] = mapValues(
        createShades(c.hex(), getLumsFromThemeColors(name))
      );
    }
  });
  return Object.assign(palette);
};
export {
  createPalette
};
//# sourceMappingURL=index.mjs.map