Tailwind Shade Generator

shadeGenerator.js

// This code mostly stolen and modified from: 
// https://github.com/nickgraffis/tailwind-color-generator/blob/main/logics.js

"use strict";
exports.__esModule = true;
exports.shade = void 0;
var hexToHSL = function (hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  var r = parseInt(result[1], 16);
  var g = parseInt(result[2], 16);
  var b = parseInt(result[3], 16);
  (r /= 255), (g /= 255), (b /= 255);
  var max = Math.max(r, g, b),
    min = Math.min(r, g, b);
  var h = 0,
    s = 0;
  var l = (max + min) / 2;
  if (max == min) {
    h = s = 0; // achromatic
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }
    h /= 6;
  }
  var HSL = new Object();
  HSL["h"] = h * 360;
  HSL["s"] = s * 100;
  HSL["l"] = l * 100;
  return HSL;
};
var hslToHex = function (h, s, l) {
  l /= 100;
  var a = (s * Math.min(l, 1 - l)) / 100;
  var f = function (n) {
    var k = (n + h / 30) % 12;
    var color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
    return Math.round(255 * color)
      .toString(16)
      .padStart(2, "0"); // convert to Hex and prefix "0" if needed
  };
  return "#".concat(f(0)).concat(f(8)).concat(f(4));
};
var whereToStart = function (value) {
  var values = [];
  var first = 97;
  for (var i = 0; i < 10; i++) {
    if (i > 0) {
      first -= 7.4;
    }
    values.push(first);
  }
  var closest = values.reduce(function (prev, curr) {
    return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
  });
  var start = values.indexOf(closest);
  return start;
};
var shade = function (color, saturationFactor, lightFactor) {
  if (saturationFactor === void 0) {
    saturationFactor = 1.771968374684816;
  }
  if (lightFactor === void 0) {
    lightFactor = 7.3903743315508015;
  }
  var s = saturationFactor;
  var l = lightFactor;
  var hsl = hexToHSL(color);
  var start = whereToStart(hsl.l);
  var currentS = hsl.s;
  var currentL = hsl.l;
  var globalCount = 0;
  var final = [];
  for (var i = 0; i < 10 - start; i++) {
    globalCount++;
    if (i !== 0) {
      currentS -= s;
      currentL -= l;
    }
    final.push(hslToHex(hsl.h, currentS, currentL));
  }
  if (globalCount < 10) {
    var ogS = hsl.s;
    var ogL = hsl.l;
    for (var i = 1; i < 11 - globalCount; i++) {
      if (ogS + s <= 100) ogS += s;
      else ogS = 100;
      if (ogL + l <= 100) ogL += l;
      else ogL = 100;
      final.unshift(hslToHex(hsl.h, ogS, ogL));
    }
  }
  var shades = [
    "50",
    "100",
    "200",
    "300",
    "400",
    "500",
    "600",
    "700",
    "800",
    "900",
  ];
  var finalObj = {};
  var finalInvertedObj = {};
  final.map(function (color, idx) {
    var thisShade = shades[idx];
    finalObj[thisShade] = color;
  });
  final.reverse().map(function (color, idx) {
    var thisShade = shades[idx];
    finalInvertedObj[thisShade] = color;
  });
  final.asTailwindColorObject = finalObj;
  final.asInvertedTailwindColorObject = finalInvertedObj;
  final.reverse();
  return final;
};
exports.shade = shade;