Transform hex to hsl so opacity/etc work properly

[endigma]

Default unocss colors are like hsl(--var-whatever, --uno-opacity or something, this is similar to tailwind. I should somehow transform the radix colors into a format like this and update the color alias to work with opacity properly.

[waffleflopper]

Just for clarity, you'd want to have the hsl objects provided by Radix converted to so instead of providing strings that include hsl(), they'll just have the h, s, l values so opacity can be defined? Like this?

const tomato = {
  tomato1: '10 100% 99.4%',
  tomato2: '8 100% 98.4%',
  // ...
  tomato12: '10 50.0% 13.5%',
}

[endigma]

Radix actually has their own opacity scale, so I'm not sure how this fits in at the moment.

The thing technically preventing this from working is not writing out the colors like hsla(h, s, l, %alpha), which is how normal color opacity works in "vanilla" unocss, doing like red-900/90 sets the opacity value to 0.9. The way preset-mini gets this in is through a placeholder like this hsla(h, s, l, %alpha) (src).

If the preset were to preprocess the Radix colors set into HSL strings with the placeholder like that it would work but I'm not sure how useful it would be given I already support the Radix alpha scales. I don't use opacities much except for a backdrop darken/blur for modals in the application this preset is developed for.

[waffleflopper]

So ideally you would need something like tomato1: 'hsla(10, 100%, 94.4%, %alpha)'?

Funnily enough, my long time friend was part of the team that developed Radix, which is why I'm interested in contributing. So while I'm not the insanely experienced developer that he is I can certainly pick his brain if need be :)

edit: And also, thanks for the super quick reply!

[endigma]

I'd love to "fix" the radix colors library to have a more sane object format, but I've considered that out of scope for this project. This preset would probably need to parse/reconstruct the colors to get the correct color format.

Cool that you know someone on the team, perhaps you can ask them if its a meaningless thing to offer precise opacity controls or what the scaled opacity vs precise opacity could be used for.

I don't have the time or need to build this out right now, but I'm happy to accept any contributions that improve the project.

[silveltman]

I would also really like the feature for the blue/50 syntax, using transparent colors that match the radix scales.

Any tips for best way of achieving this atm? Only thing that comes to mind is manually looking for the color and than manually create that one with opacity...

[endigma]

The preset does support the built in radix opacity scales at the moment, but I don't have a way to do the opacity in Uno ATM. I haven't worked with the internals of this library in a while but you may be able to do something like hsla(var(--blue8), 50) depending on how I store the colors in the variables. The variables have a prefix that I don't know at the moment (on mobile), it's in the config type I think.

[LaneSun]

I've mapped all the HEX color values to HSL here: radix-color-hsl.json