Add OKLCH and OKLab functions to reference

[ai]

Summary

I added OKLab color functions to CSS Functional Notation.

Motivation

They are part of CSS Color Modules 4.

Adding them to this list will fix Stylelint function-no-unknown since Stylelint uses this document as a source of all valid CSS function names.

Supporting details

Safari TP should support these functions.

Metadata

• Adds a new document
• Rewrites (or significantly expands) a document
• Fixes a typo, bug, or other error

[teoli2003]

Is there any browser implementing them? If not, we should wait before merging this.

[ai]

Is there any browser implementing them?

Safari TP mentions oklch() support in release notes.

[teoli2003]

Assigning myself for review (I'm reorganizing CSS Colors). Before landing this, I want to be sure the BCD information is up-to-date, and the subpages created (the mention is pretty useless without them)

[github-actions]

Preview URLs

• https://pr15033.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/CSS_Functions
• https://pr15033.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/color_value/oklab
• https://pr15033.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/color_value/oklch

Flaws

URL: /en-US/docs/Web/CSS/CSS_Functions
Title: CSS Functional Notation
on GitHub
Flaw count: 23

• macros:
  • /en-US/docs/Web/CSS/acos does not exist
  • /en-US/docs/Web/CSS/asin does not exist
  • /en-US/docs/Web/CSS/atan does not exist
  • /en-US/docs/Web/CSS/atan2 does not exist
  • /en-US/docs/Web/CSS/cos does not exist
  • and 18 more flaws omitted

---

URL: /en-US/docs/Web/CSS/color_value/oklch
Title: oklch()
on GitHub
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: css.types.color.oklch

---

URL: /en-US/docs/Web/CSS/color_value/oklab
Title: oklab()
on GitHub
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: css.types.color.oklab

External URLs

URL: /en-US/docs/Web/CSS/CSS_Functions
Title: CSS Functional Notation
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/color_value/oklch
Title: oklch()
on GitHub

• https://bottosson.github.io/posts/oklab/ (1 time) (Note! This may be a new URL 👀)
• https://webkit.org/blog/12156/release-notes-for-safari-technology-preview-137/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/color_value/oklab
Title: oklab()
on GitHub

• https://bottosson.github.io/posts/oklab/ (1 time) (Note! This may be a new URL 👀)
• https://webkit.org/blog/12156/release-notes-for-safari-technology-preview-137/ (1 time) (Note! This may be a new URL 👀)

(this comment was updated 2022-06-02 14:24:31.706526)

[ai]

@teoli2003 I added pages for oklab and oklch

I took lch() and lab() pages and:

1. Replaced names
2. Replaced examples according to OKLCH Converter (oklab() result was converted by culori Node.js module)
3. Replaced Safari TP release
4. Replaced link to Oklab announce article
5. Replaced CIE Lightness to perceived lightness (the creator ok Oklab used this term).
6. Replaced C max value to max value for sRGB and P3 colors (Rec. 2020 C value is 0.5 but there is no Rec. 2020 monitors yet).

I also added oklch() and oklab() to redirects.

Questions:

1. How can I add compatibility data?
2. Will {{Specifications}} macros work automatically?

[ai]

@teoli2003 just to clarity why I force these changes:

The reason of this PR is not to add docs but to solve problem with CSS linters. They use MDN as a source of valid functions and right now, any CSS code with oklch() will be marked as invalid.

[teoli2003]

Hi, ai! No worry, I just didn't have enough time to go back to this. I will review this PR this week!

[ai]

@teoli2003 friendly ping for the glory of OKLCH 😺

[teoli2003]

👍

[ai]

Thanks! Just a small question: will it deploy automatically or did I need another step to make it public?

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch

[teoli2003]

It will deploy automatically, in about 24h.

[ai]

I sent PR to compat data as well mdn/browser-compat-data#16526