Skip to content

[css-color-adjust-1] Add example for color-mix() in Forced Colors Mode. #11097 #11277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 28, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions css-color-adjust-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -572,6 +572,23 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
UAs may further tweak these <a>forced colors mode</a> heuristics
to provide better user experience.

<div class="example">
Authors may still use features such as ''color-mix()'' in [=forced colors mode=].
In such cases, the [=computed value=] will behave as it would normally,
but the [=used value=] will be overridden with an appropriate [=system color=].

<pre highlight=css>
.example {
color: color-mix(in srgb, CanvasText, Canvas);
}
</pre>

The [=computed value=] for 'color' will be a 50-50 blend of the ''CanvasText'' and ''Canvas'' [=system colors=].
That value will inherit to descendants and be observable via APIs such as {{Element/computedStyleMap()}}.

The [=used value=] for 'color' will be a system color chosen by the UA, for example ''CanvasText''.
</div>

Opting Out of a Forced Color Palette: the 'forced-color-adjust' property {#forced-color-adjust-prop}
-----------------------------------------------------------------

Expand Down