search

endigma / unocss-preset-radix

A preset for UnoCSS to let you use Radix color palette
https://endigma.github.io/unocss-preset-radix/
MIT License
32 stars 6 forks source link

Add alpha variants and overlay colors #9

Closed r0nsha closed 1 year ago

r0nsha commented 1 year ago

As mentioned in #8, this PR makes it so alpha variants of the chosen palette are generated automatically for you, and also adds the overlay colors blackA and whiteA. Alpha variants are also added for aliases, so for a given alias brand: blue, the alias brandA: blueA will also be generated.

endigma commented 1 year ago

Did you check that hue continues to work? I think you will need to expand it to contain the alpha variants.

r0nsha commented 1 year ago

Oh yeah I'll add the alpha variants to hue too. Also I tried using the hue feature and I found that hue12 didn't work for me. It was caused because the hue indices were 0-based (since it was an array). I switched it to a mapped object instead like all of the other scales. It works for me now.

r0nsha commented 1 year ago

The last commit made it so you can do something like hue-redA or hue-brandA for aliases too.

endigma commented 1 year ago

I would prefer if it was like: hue-red & bg-hueA12, you should be able to just add another set of aliases into the template literal in the hue block.

The idea of hue is so you can have things like buttons, cards, etc with many colors without a lot of string substitution in component code, you can just safelist the hues you use everywhere and you can then safely use hue-${hue} for example.

Other than that, this looks really good, thanks for contributing!

r0nsha commented 1 year ago

That makes more sense, I'll do it when I have time this week

r0nsha commented 1 year ago

@endigma Done.

There's one issue. Since unocss parses color classes using kebab-case, the class bg-hueA12 doesn't work. Here's a related issue: https://github.com/unocss/unocss/issues/1894.

These work though: bg-hueA-12 and bg-hue-a-12

What do you think? I couldn't find a way to do this. I also tried using hueA1...12 as keys instead of nesting hueA: { 1...12 } but it didn't work.

endigma commented 1 year ago

The scuffed way is fine, if you're feeling fancy just add it in the readme. I'll merge this either way.

r0nsha commented 1 year ago

I'm not sure what to write in the README, maybe you could explain it better?

r0nsha commented 1 year ago

Thank you for accepting the PR! Are you planning on publishing the change to npm? I'd like to switch back from my fork

endigma commented 1 year ago

I will after I work out some other changes.

endigma commented 1 year ago

@r0nsha this is in as of 2.4.0, albeit with a slightly different API than you had. It's now like bg-blue12A not bg-blue-a-12, they are treated as extra shades not extra scales.

r0nsha commented 1 year ago

That's a neat solution