Intent to Ship: CSS light-dark() Color Function

[Rune Lillesveen]

Contact emails

fut...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-color-5/#light-dark

Summary

Allows authors to provide separate colors for light and dark color-schemes on a per element basis. System colors and UA form controls are rendered with different colors depending on the color-scheme set on an element. Authors can have the same possibility through the light-dark() function: #target { background-color: light-dark(lime, green); } The #target element will have a green background if the used color-scheme for the element is 'dark'. Otherwise, the background will be lime.

Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=1856999) Shipped in 120

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=262914) Enabled by default: https://github.com/WebKit/WebKit/pull/23364

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

Colors in the light-dark() function can be edited like it is currently possible for the color-mix() function. No changes needed.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

Existing tests: https://wpt.fyi/results/css/css-color/light-dark-basic.html https://wpt.fyi/results/css/css-color/light-dark-currentcolor.html https://wpt.fyi/results/css/css-color/light-dark-inheritance.html To be added by Chromium implementation: https://wpt.fyi/results/css/css-color/light-dark-currentcolor-in-color.html (https://chromium-review.googlesource.com/c/chromium/src/+/5245470/5/third_party/blink/web_tests/external/wpt/css/css-color/light-dark-currentcolor-in-color.html)

Flag name on chrome://flags

None

Finch feature name

CSSLightDarkColors

Requires code in //chrome?

False

Tracking bug

https://crbug.com/1490618

Estimated milestones

Shipping on desktop

123

Shipping on Android

123

Shipping on WebView

123

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/4909742688567296

This intent message was generated by Chrome Platform Status.

--

Rune Lillesveen

[Chris Harrelson]

LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeRdn47UWS8NzHSxokHbkEwkyXbqqceBJg50QSGh3Q4sQg%40mail.gmail.com.

[Mike Taylor]

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw8UVSF9e0BeJE1dVaksDHJ4QGniGa8rqEkn401JtYDDjg%40mail.gmail.com.

[Daniel Bratell]

LGTM3

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/3b0cb34e-386a-45a3-8842-df4ced99c5db%40chromium.org.