Skip to content

postcss-lab-function : gamut mapping and display-p3 #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 50 commits into from
Feb 12, 2022

Conversation

romainmenke
Copy link
Member

@romainmenke romainmenke commented Dec 13, 2021

Bring postcss-lab-function up to speed with css-color-4


Also tracked in this effort :

  • implement gamut mapping
  • support all color functions from css-color-4 (lab, lch, hwb, ...)
    • lab
    • lch
    • hwb (merged)
    • hsl (covered by postcss-color-functional-notation)
    • color (merged)
    • oklab
    • oklch

notes :

@romainmenke romainmenke changed the title css-color-4 & css-color-5 css-color-4 Dec 13, 2021
@romainmenke

This comment has been minimized.

@depoulo

This comment has been minimized.

@romainmenke

This comment has been minimized.

@depoulo depoulo mentioned this pull request Jan 18, 2022
6 tasks
@romainmenke romainmenke mentioned this pull request Jan 20, 2022
@romainmenke
Copy link
Member Author

@Antonio-Laguna Also includes a few small readme and test comment fixes for color() and oklab. Nothing functional changed in either.

@romainmenke romainmenke marked this pull request as ready for review February 11, 2022 16:21
Copy link
Member

@Antonio-Laguna Antonio-Laguna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Astounding! This looks great! Thanks a lot for doing all of this and being the Color expert! Love that we've lost the python scripts too :)

Left some minor nitpicky comments/suggestions mostly on wordings. Let me know if you want to discuss any of them.

Would it make sense to abstract those transformation functions into their own package? We're repeating all of these functions here and elsewhere and even though they shouldn't change, it would be better if they were centralized. Thoughts? Sharing code between plugins is always a recurring theme here 😂

@ai
Copy link

ai commented Feb 11, 2022

Try color expert. Your work will affect of how people will work with colors in CSS.

romainmenke and others added 3 commits February 11, 2022 23:28
@romainmenke
Copy link
Member Author

Would it make sense to abstract those transformation functions into their own package? We're repeating all of these functions here and elsewhere and even though they shouldn't change, it would be better if they were centralized. Thoughts? Sharing code between plugins is always a recurring theme here

In my head it looks something like this :

  1. Implement and ship css-color-4, this phase can be ugly and messy in code
  2. Get some initial feedback and iterate on this
  3. Start on css-color-5 and build a good mental model of all the moving parts
  4. Find the right form for shared code and publish that as a utility package.

At this point I found that I did not need to change anything between oklab and lab for example. Which is promising for being able to extract this into its own package in the future.

My main concern is creating roadblocks for myself. Copy/paste is just the cheapest way to reuse code while writing.

Left some minor nitpicky comments/suggestions mostly on wordings

Thank you for those!
Added all of them and also brought them over to color() and oklab()

color expert

hehe, just reading the specs and depending on the awesome work and examples by @svgeesus and @LeaVerou among others.

My main contribution is time :)

@romainmenke
Copy link
Member Author

@Antonio-Laguna This contains unreleased changes for :

  • postcss-preset-env
  • postcss-color-function
  • postcss-lab-function
  • postcss-ok-lab-function

@Antonio-Laguna
Copy link
Member

In my head it looks something like this :

  1. Implement and ship css-color-4, this phase can be ugly and messy in code
  2. Get some initial feedback and iterate on this
  3. Start on css-color-5 and build a good mental model of all the moving parts
  4. Find the right form for shared code and publish that as a utility package.

Sounds like a great plan to me!

color expert

hehe, just reading the specs and depending on the awesome work and examples by @svgeesus and @LeaVerou among others.

My main contribution is time :)

Don't sell yourself short! This is huge ❤️

@romainmenke romainmenke changed the title css-color-4 postcss-lab-function : gamut mapping and display-p3 Feb 12, 2022
@Antonio-Laguna Antonio-Laguna merged commit bd275c6 into main Feb 12, 2022
@Antonio-Laguna Antonio-Laguna deleted the css-color-4--affectionate-crab-6c5bb7cdbb branch February 12, 2022 14:11
@Antonio-Laguna
Copy link
Member

All done!

  • postcss-preset-env released as 7.3.2
  • postcss-color-function released as 1.0.2
  • postcss-lab-function released as 4.1.0
  • postcss-ok-lab-function released as 1.0.1

@LeaVerou
Copy link

LeaVerou commented Feb 12, 2022

Hey @romainmenke, I noticed you're using the sample code for the specs. We (@svgeesus and I) have actually also authored a library to make conversions like this easier: https://colorjs.io/
Instead of re-implementing stuff from the sample code from the spec, you could also offload conversions to it and it takes care of tricky steps like color adaptation automatically. If you decide to try it out, report any bugs back to us!

@romainmenke
Copy link
Member Author

@LeaVerou Using that library would be awesome going forward.
At first I wanted to also gain a better understanding of how everything works and fits together. The spec examples and sample code were great for this.

We are also very cautious when adding new features and dependencies as postcss-preset-env is used by so many people. If I don't fully understand what I am adding I also won't be able to support users adequately.

For css-color-5 we will revisit the current setup and implementation and will definitely try out colorjs.io. More than happy to provide issues or code contributions if needed :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants