cal/packages/config/ColorPalletGenerator.js

const tailwindcssPaletteGenerator = (input) => {
  // addColor function
  const addColor = (color) => {
    let colorParams = {
      hex: "",
      name: "",
      shades: params.shades,
    };

    // check input params
    if (typeof color === "string") colorParams.hex = color;
    if (typeof color === "object" && Array.isArray(color)) {
      colorParams.name = color.shift();
      colorParams.hex = color.shift();
    }
    if (typeof color === "object" && !Array.isArray(color)) {
      if (Object.keys(color).length === 1) {
        colorParams.name = Object.keys(color)[0];
        colorParams.hex = Object.values(color)[0];
      }
      if (Object.keys(color).length !== 1) colorParams = Object.assign(colorParams, color);
    }

    // check if string is invalid
    if (!/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/.test(colorParams.hex)) return;

    // add hash tag if needed
    if (!/^#/.test(colorParams.hex)) colorParams.hex = "#" + colorParams.hex;

    // if no name present, get a default name
    if (colorParams.name === "") colorParams.name = params.colorNames.shift();

    // set palette name
    palette[colorParams.name] = {};

    // generate shades
    Object.keys(colorParams.shades).forEach((shade) => {
      palette[colorParams.name][shade] =
        colorParams.shades[shade].type === "lighten"
          ? lighten(colorParams.hex, colorParams.shades[shade].intensity)
          : darken(colorParams.hex, colorParams.shades[shade].intensity);
    });
  };

  // darken function
  const darken = (hex, intensity) => {
    // get r, g, b values
    let { r, g, b } = hexToRgb(hex);

    // darken the r, g, b values
    r = Math.round(r * (1 - intensity));
    g = Math.round(g * (1 - intensity));
    b = Math.round(b * (1 - intensity));

    // return the new hex color
    return rgbToHex(r, g, b);
  };

  // lighten function
  const lighten = (hex, intensity) => {
    // get r, g, b values
    let { r, g, b } = hexToRgb(hex);

    // lighten the r, g, b values
    r = Math.round(r + (255 - r) * intensity);
    g = Math.round(g + (255 - g) * intensity);
    b = Math.round(b + (255 - b) * intensity);

    // return the new hex color
    return rgbToHex(r, g, b);
  };

  // hexToRgb function
  const hexToRgb = (string) => {
    // get the r,g,b values
    const [r, g, b] = string
      .replace("#", "")
      .match(/.{1,2}/g)
      .map((a) => parseInt(a, 16));

    return { r, g, b };
  };

  // rgbToHex function
  const rgbToHex = (r, g, b) => `#${toHex(r)}${toHex(g)}${toHex(b)}`;

  // toHex function
  const toHex = (n) => `0${n.toString(16)}`.slice(-2).toUpperCase();

  // initiate palette
  const palette = {};

  // set default params
  let params = {
    colors: [],
    colorNames: [
      "primary",
      "secondary",
      "tertiary",
      "quaternary",
      "quinary",
      "senary",
      "septenary",
      "octonary",
      "nonary",
      "denary",
    ],
    shades: {
      50: {
        intensity: 0.95,
        type: "lighten",
      },
      100: {
        intensity: 0.9,
        type: "lighten",
      },
      200: {
        intensity: 0.75,
        type: "lighten",
      },
      300: {
        intensity: 0.6,
        type: "lighten",
      },
      400: {
        intensity: 0.3,
        type: "lighten",
      },
      500: {
        intensity: 0,
        type: "lighten",
      },
      600: {
        intensity: 0.1,
        type: "darken",
      },
      700: {
        intensity: 0.25,
        type: "darken",
      },
      800: {
        intensity: 0.4,
        type: "darken",
      },
      900: {
        intensity: 0.51,
        type: "darken",
      },
    },
  };

  // check input params
  if (typeof input === "string") params.colors.push(input);
  if (typeof input === "object" && Array.isArray(input)) params.colors = input;
  if (typeof input === "object" && !Array.isArray(input)) params = Object.assign(params, input);

  // loop through colors
  params.colors.forEach(addColor);

  return palette;
};

module.exports = tailwindcssPaletteGenerator;