lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

CSS Color Level 5

Open devongovett opened this issue 3 years ago • 4 comments

v1.5.0 adds support for level 4, let's add support for level 5 as well: https://drafts.csswg.org/css-color-5/

  • [x] color-mix()
  • [ ] color-contrast()
  • [x] Relative color syntax
  • [ ] @color-profile
  • [ ] device-cmyk
  • [ ] convert colors using ICC profiles??

Not sure how stable the spec is. I think Firefox and Safari already have implementations of some of this under a flag.

devongovett avatar Mar 02 '22 16:03 devongovett

Safari TP has support for color-mix(), color-contrast() and RCS. Firefox and Chrome are investigating color-mix() although one of those implementations is currently sRGB-only at the moment.

Support for CSS Color 4 and (parts of) CSS Color 5, specifically color-mix( and color-contrast() is part of Interop 2022 (see also Safari blog post on Interop 2022) so the latest versions of all major browsers are aiming to support this by the end of this year!

Which will intensify the support need for older browsers.

No browser currently has support for @color-profile or device-cmyk and those parts of the spec are not part of Interop 2022; but support is showing up in the CSS-to-PDF converters. So I could see down-conversion in parcel-css being useful for people targeting print/ebooks as well as Web.

svgeesus avatar Mar 07 '22 20:03 svgeesus

Implemented the relative color syntax in 44a402da404436fbaed684edfc569e99a4403a0f, passing the tests from WPT. 🥳 Only limitation is that it cannot work with variables due to being a build-time transform.

devongovett avatar Sep 18 '22 20:09 devongovett

Implemented the relative color syntax in 44a402d, passing the tests from WPT. 🥳 Only limitation is that it cannot work with variables due to being a build-time transform.

Em... Is there a way to perform this, now? Thanks

hare0319 avatar Oct 15 '23 18:10 hare0319