Provide color channels for allowing modifications

[Mayank]

I see the colors are currently coded as hex strings. It would be useful to expose the channels that a color is made of. One very popular use case is to add opacity to a color, which isn't possible with the current implementation (while we wait for relative color syntax).

Example: --grape-6 is currently defined as #be4bdb which converts to hsl(288deg 67% 58%). An "internal" variable --__grape-6-hsl could be defined as 288deg 67% 58%, which would allow specifying alpha channel like this:

background-color: hsl(var(--__grape-6-hsl) / 80%);

Example 2: --__grape-6-hsl could be broken down further into --__grape-6-h, --__grape-6-s, and --__grape-6-l. This would allow even more advanced usage like constructing slightly different variants of the original colors.

--my-lighter-grape-6:  hsl(var(--__grape-6-h), var(--__grape-6-s), 40% / 80%);

Admittedly, this second use case would be less popular and might not be worth the extra bloat. It might even make users ask for rgb channels (or lab/lch when available).

---

Note: The only reason I'm using the __ prefix is to depict that these values are "internal" and not exported by default. It makes sense that these modifications would require an extra import.

[Adam Argyle]

i'm kinda considering swapping out entirely from shipping the hex (def small and portable which is nice) to shipping the hsl channels. but no tradeoffs would need managed if OP just shipped the channels as an optional import (or shipped them by default for use with JIT props). i like to think of OP as modern, and the modern way to ship color right now is to tuck channels into props so you can use functional notation to adjust opacity. no doubt about that.

i def feel it's overkill to stash all 3 channels into props for OP, the point of OP is sane/easy/limited defaults, shipping channels is best for folks who know what they're doing.

@import "https://unpkg.com/open-props/grape.channels.min.css";

:root {
  --_my-button-hover-outline: hsl(var(--grape-9-hsl) / 50%);
}