Color alpha

[mmpneo]

Hey, thank you for this wonderful library, big fan 🧡

As mentioned in #118 alpha is not supported, so for now i'm fully overriding color tag for bg,input,badge,text,border etc. (for everything basically) manually in the main css file for multiple themes.

What is the recommended way of working with alpha?

As an example use case, twitch's secondary color is white with 0.2 alpha and it's blending pretty well with different elevations (bg-100,200,300 in our case):

Edit: I know about opacity utils (bg-primary/50), this is even worse, lol

[saadeghi]

Alpha is not technically a part of color value. It's the opacity of color and since Tailwind has utility classes for opacity, I'm not sure if there's a better way to handle opacity. Even with Tailwind's original colors, when we use bg-green-500 This is the generated CSS:

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
}

I'm applying the same method with daisyUI colors. except I use HSLA and CSS variables:

:root {
  --p: 259 94.4% 51.2%;
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: hsla(var(--p) / var(--tw-bg-opacity));
}

This is also suggested by Tailwind team.
But if you know a better way to handle colors, I'll be glad.