Generate tints and shades

export const take = [
  { label: "Number of tints and shades", type: "number", value: 12 },
  { label: "Base color", type: "color" },
]

export const make = ([length, color]) => {
  let value

  if (length <= 1) {
    value = [color]
  } else {
    const base10 = (v) => parseInt(v, 16)
    const base16 = (v) => ("0" + Math.round(v).toString(16)).slice(-2)

    let [r, g, b] = color.match(/[\dA-F]{2}/gi).map(base10)

    value = Array.from({ length }, (e, i) => {
      const s = i >= length / 2
      const f = (2 * i) / (length - 1) - (s ? 1 : 0)

      const c = [
        s ? r + f * (255 - r) : f * r,
        s ? g + f * (255 - g) : f * g,
        s ? b + f * (255 - b) : f * b,
      ]

      return "#" + c.map(base16).join("")
    })
  }

  return [
    {
      label: "Tints and shades",
      type: "colorlist",
      value,
    },
  ]
}