Support for wider color gamuts

[kevmodrome]

Safari supports eye-popping colors using the the color() function. I wonder if it'd be neat to maybe add support for this with graceful fallback to regular old hex/hsl.

I have successfully used this on the Svelte Summit website and I think the result is pretty nice. You can see the difference by visiting on Chrome vs Safari.

It would be as simple as figuring out what colors that would be nice to have and then just adding support via something like this (example taken from the WebKit explainer page):

:root {
    --bright-green: rgb(0, 255, 0);
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bright-green: color(display-p3 0 1 0);
    }
}

Another idea is to support the lch() and lab() functions.

Here's a site where you can compare between the two - you need to use Safar on a Mac or iPhone to see differences.

[madeleineostoja]

Like the idea! It would be complex to add only because mapping config → variables is currently 1:1 with no support for queries. Adding that kind of support would also open up responsive variables generated straight from config which is something I’ve been thinking about.

I can’t think of an elegant API for it off the top of my head, but def open to discussion/proposals for a generic solution to both.

[madeleineostoja]

Opened a new issue at #63 to track the wider support for queries this would need

[kevmodrome]

Ah, I hadn't realised there was a mroe complicated build process under the hood here. I really just thought it was a straight up css file, my bad! 🤦

[madeleineostoja]

Oh yeah it was originally, but Pollen now has an optional config driven build step (and a default CSS file generated from it) so you can generate your own custom design systems

[madeleineostoja]

Closed by 458389eb6bf605f9d134ef73eba9f0537511aa3a