feature:(#305) Add support for oklab and oklch color functions
#436
+352
−79
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ctions __RESOLVES:__ _feature_ - *Add new CSS color functions* \[[microsoft#305](https://github.com/microsoft/vscode-css-languageservice/issues/305)\] __DESCRIPTION:__ CSS Color Module Level 4 adds support for `oklch` and `oklab` to browsers. They are becoming more popular, and I wanted to use them with color previews in my editor. This feature is built of of the original [microsoft#306](microsoft#306) which included steps for `lab` and `lch` but not the `ok` variants. Generally this code was designed using real world color [examples](https://www.oddcontrast.com/#hex__*f00__*4d216f80__srgb). __STEPS TO TEST:__
|
Any questions or concerns? Anything I can do to help move this along? |
aeschli
approved these changes
May 7, 2025
|
@rgant Looks good, thanks a lot! |
benibenj
approved these changes
May 7, 2025
rgant
commented
May 7, 2025
| export interface LAB { l: number; a: number; b: number; alpha?: number; } | ||
|
|
||
| export function labFromLCH(l: number, c: number, h: number, alpha: number = 1.0): LAB { | ||
| const DEGREES_TO_RADIANS_FACTOR = Math.PI / 180; |
There was a problem hiding this comment.
Suggested change
| const DEGREES_TO_RADIANS_FACTOR = Math.PI / 180; | |
| const DEGREES_TO_RADIANS_FACTOR = Math.PI / (DEGREES_PER_CIRCLE / 2); |
I think there should be a minor change here to re-use the constants better. Would you like that added to this PR, or a new one?
There was a problem hiding this comment.
Could also be const DEGREES_TO_RADIANS_FACTOR = Math.PI / DEGREES_PER_CIRCLE * 2;
If fewer parenthesis are preferred.
There was a problem hiding this comment.
You can make a follow-up PR, if you want. I think the brackets help, even if not strictly necessary.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
RESOLVES:
feature - Add new CSS color functions [#305]
DESCRIPTION:
CSS Color Module Level 4 adds support for
oklchandoklabto browsers. They are becoming more popular, and I wanted to use them with color previews in my editor.This feature is built off of the original #306 which included steps for
labandlchbut not theokvariants.Generally this code was designed using real world color examples.
STEPS TO TEST:
Tests were added to relevant files following established patterns. Should be able to just run
npm run test. However I don't use vscode, so I did not test in an actual editor.