Making My Own HSL Grabber

[jh3y]

Hey John 👋

I had a go at creating my own color-converter based on yours to try out some more of the API.

// Menu: HSL
// Description: Convert any color to HSL.
// Author: Jhey Tompkins
// Twitter: @jh3yy

let { setSelectedText } = await kit('text')
const Color = await npm('color')

const stringColor = await arg('Color String:', (input) => {
  try {
    const value = Color(input).hsl() || input
    return [
      {
        name: `hsl: ${value}`,
        value,
        info: `<div style="background-color: ${input}; height: 100px;
        width: 100px;">${input || ''}</div>`,
      },
    ]
  } catch (err) {
    return err
  }
})

setSelectedText(stringColor)

This "sort of" works. Based on your example, I'd thought that I'd get a square with the right color being shown?

But, in my logs I get

[warn] UNCAUGHT EXCEPTION: TypeError: text.replaceAll is not a function

And I'm unable to copy the content on click 🤔

Is there a particular format required for setSelectedText to play ball here?

[johnlindquist]

Install hsl-refactored

@jh3y Here's what I came up with. Any questions?

// Menu: HSL
// Description: Convert any color to HSL.
// Author: Jhey Tompkins
// Twitter: @jh3yy

let { setSelectedText } = await kit("text")
const Color = await npm("color")

const createHTML = color =>
  `<div class="h-full text-xs flex justify-center items-center" style="background-color: ${color}"><span class="p-2">${
    color || ""
  }</span></div>`

const createChoices = (input, value) => {
  return [
    {
      name: `hsl: ${value}`,
      value: value,
      //I renamed "info" to "html"
      html: createHTML(input),
    },
  ]
}

const hslArray = await arg("Color String:", input => {
  let hsl = input
  try {
    hsl = Color(input).hsl()
  } catch {
    //catch error and return whatever
    return createChoices(input, "Invalid color")
  }
  //The HSL lib was returning an object with a "color" prop as an Array
  return createChoices(input, hsl.color.join(" "))
})

setSelectedText(hslArray)

[jh3y]

That's great! Thanks. That was the part tripping me up it seems 👍
I changed hsl.color.join(" ") to hsl.toString() and it works as expected now.

I do get this error in the log though which I'm not sure if it's a concern or not.

execution error: System Events got an error: osascript is not allowed to send keystrokes. (1002)

It's great though. Totally what I was after to try out some more parts of the API. Am I right in thinking we have access to some Tailwind classes there then? 👀

Thank you again John! 👏 🙏

[johnlindquist]

@jh3y That "execution error means" the "Allow Kit to control System Events" prompt was dismissed the first time it popped up. You can enable it here:

Re: Tailwind. Yes! Most tailwind classes are available. Let me know if there are any missing that you might need and I'll whitelist them in the build.

[jh3y]

Perfect. Thank you. I got my installation stuck in some sort of loop and reinstalled. Must have missed the dialog for this 😅
I'll make a note of it.
Ooo. That's interesting to know. I'll certainly have a play with them as I get more comfortable with things 😄
Thank you again for all the help!