Add support for color directly by text in the colorpicker

[Rednas83]

Besides Hex, HSLA and RGBA also add support for direct color names like red or from a css class like bg-gray-200 or bg-success'.

Something like

<FormKit
  type="colorpicker"
  value="red" 
  options=["red", "bg-gray-200", "bg-success"]
  label="A default colorpicker input with support for direct names or css classes"
  popover
  help="Just the way it comes out of the box but then by direct name or css class."
/>

Similar how it's done with icons
<Icon name="uil:github" color="black" />

No idea if it's doable, but could be very convenient I think

[fenilli]

Well maybe in the swatches and making you have a hex/hsla/rgba representation might be indeed possible, otherwise it wouldn't "work" as what is red? the string red is just a string, it could be anywhere in the picker itself.

Do you think this is useful in what cases? as I can see mostly useful for a text input and that would already work.

[Rednas83]

I would like to use some already defined colors in the swatches but I don't know how to access the value.

Sometimes it's also complex because there is a formula behind the color in the css.

For example:

Tried something like:

<style>
.red {
  color: red;
}
</style>

<script setup lang="ts">
onMounted(() => {
  console.log(`color of element=${window.getComputedStyle(document.querySelector(".red")).color}`)
  console.log(`color of element=${window.getComputedStyle(document.querySelector(".bg-gray-200")).color}`)
  console.log(`color of element=${window.getComputedStyle(document.querySelector(".bg-success")).color}`)
})

But it returns some strange error

[fenilli]

That is what I mean, most css classes are arbitrary, meaning a red in x css could be totally different than red in y css, so what would you show to the enduser when it selects/writes red in the watches?