Bug 241866 - Implement AccentColor/AccentColorText
Summary: Implement AccentColor/AccentColorText
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-06-22 13:24 PDT by Bramus
Modified: 2022-07-11 10:13 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Bramus 2022-06-22 13:24:52 PDT
These were recently added to CSS Color 4 – https://github.com/w3c/csswg-drafts/commit/8c1fe16402cee71211530ef5283a0372c8740e7d

- AccentColor = Background of accented user interface controls.
- AccentColorText = Text of accented user interface controls.

There's already a `-webkit-focus-ring-color` exposed, so could be aliased. 

Relevant CSS WG Discussions:
- https://github.com/w3c/csswg-drafts/issues/5900
- https://github.com/w3c/csswg-drafts/issues/7347

Other vendor bugs:
- Blink/Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1338061
- Gecko/Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1775527
Comment 1 Bramus 2022-06-22 13:28:43 PDT
Scrap that link to CSSWG issue 5900. Only 7347 is relevant here.
Comment 2 Alexey Proskuryakov 2022-06-22 18:54:00 PDT
IIRC we don't expose accent colors to prevent fingerprinting, so while this can be implemented with a fixed value, that wouldn't be terribly useful.
Comment 3 Bramus 2022-06-23 02:16:36 PDT
Just checked. `-webkit-focus-ring-color` not exposed indeed. Wrongfully assumed info in the WG issue on that was correct, but it was not.
Comment 4 Radar WebKit Bug Importer 2022-06-29 13:25:15 PDT
<rdar://problem/96163997>
Comment 5 Luke 2022-07-11 09:30:19 PDT
Would there be no way to implement this to be the same colour as `accent-color: auto`, while avoiding fingerprinting?
Comment 6 Luke 2022-07-11 09:35:11 PDT
Again apologies if I've misunderstood but it would seem that `-webkit-focus-ring-color` is exposed.

https://jsfiddle.net/78539gym/
Comment 7 Luke 2022-07-11 10:13:11 PDT
Based on this quick test:

https://jsfiddle.net/01vz2osr/

All three browsers expose an OS accent colour derivative, at least on macOS 12.4.

Tested in Chrome Dev 105, Firefox Stable 102, and Safari 15.5.

While they don't all match each other they're a derivative of the OS colour so cover the fingerprinting front, even if not necessarily the legitimate use case of trying to style your elements to match `accent-color: auto`.

Also the new AccentColor property can be tested in latest Firefox Nightly, and it exposes the accent colour.

Per discussion in https://github.com/w3c/csswg-drafts/issues/7347 this is correct behaviour.