[css] Add new CSS color functions

[ai]

CSS Color Modules 4 added many new color functions. This spec already Candidate Recommendation Draft and was implemented in Safari 15 without any flags. We already have a few articles about the most interesting of them oklch() and lch().

We need the same color preview box as we have for other colors like red.

Functions:

• oklch() and oklab()
• lch() and lab()

[aeschli]

Help is welcome. Implementation would be in https://github.com/microsoft/vscode-css-languageservice

[WaqasAliAbbasi]

https://github.com/microsoft/vscode-css-languageservice/blob/main/src/languageFacts/colors.ts#L409 seems like a place to start around. I can take a look at it over the next week if that's okay with you?

[GauravB159]

I'd love to help out with this, or even assist on a smaller part of it if someone more experienced picks it up.

Update:

I've got the conversion functions for LAB to RGB up, I'm still trying to figure out how to connect it to the editor since any changes aren't being reflected it seems. Is there an issue created in https://github.com/microsoft/vscode-css-languageservice that I could possibly send a pull request to once I am done?

@aeschli

Update 2:

I've got the autofill for LAB working, but I still cannot figure out the color picker logic. I can see that it's in this file src\vs\editor\contrib\colorPicker\browser\colorDetector.ts but I do not understand how to get it to detect the lab() function from the CSS file. I can see a ColorProvider coming from an extension, but I do not understand how I might add a new color format for the CSS ColorProvider.

Any help would be appreciated, thanks.

Update 3:

I have got it working as a preview as well, not sure if that is all the work that is needed, or do we need to add this function to the color picker code as well? That might be a bit too complex for me.

@ai

Update 4:

So another issue - lab() takes possible negative values in the second and third argument. Since no other color function does this, the parser apparently has not handled this case. So the code does not work for negative values. I've figured out the change I need to make but I'm not sure if this will affect something else. Certain unit tests are failing so I'm probably breaking something with this, looking for a better fix.

Update 5:

All tests are passing with this logic

[ryanleichty]

Was just looking for a solution to preview oklch() colors. @GauravB159 Your PR looks promising! Is it stalled currently?

[DutchEllie]

Hey guys, please pick this up again? I love these functions, but everlacking support for new things makes them hard to work with. I always thought browser implementations were slow, but I should've expected this...

[Richard-L]

+1 to have this. Would be so fantastic 🙏

[GauravB159]

@ryanleichty I'm not sure, I haven't looked at this in a while but I don't think I received a response on my PR for it. I can have a look again to make sure it's working.

Edit: My PR was in draft, I've put it up for review now but I think there was still some stuff to do to complete it from the comments I see on it

[jrmoynihan]

Thanks for submitting the PR @GauravB159 ! This is going to be a great addition when it passes all the tests!

[AShortcuts]

Please keep up the great work. Thank you for what you've done so far

[sashareds]

Thanks for submitting the PR @GauravB159 ! This is going to be a great addition when it passes all the tests!

Any update on that? oklch/lch still don't have previews @jrmoynihan

[jrmoynihan]

Thanks for submitting the PR @GauravB159 ! This is going to be a great addition when it passes all the tests!

Any update on that? oklch/lch still don't have previews @jrmoynihan

I'm not a maintainer or the author of the PR, so nothing from me. Looks like it still isn't merged. Maybe more review to do?

[robzor]

+1 for the implementation of this into VSCode, I'm using oklch on a new project after reading the excellent evil martians article

[Sofahamster]

Almost two years and we're still lacking support for oklch. What can be done to get this integrated?

[Richard-L]

+1 for the implementation of this into VSCode, I'm using oklch on a new project after reading the excellent evil martians article

This article is indeed fantastic and excites you about CSS colour capabilities. Really hope VSCode can add support for oklch, or at least an extension might surface.