Skip to content

Commit

Permalink
[css-color-adjust-1] Add example for color-mix() in Forced Colors m…
Browse files Browse the repository at this point in the history
…ode. #11097
  • Loading branch information
kbabbitt authored and svgeesus committed Nov 28, 2024
1 parent 1f4e5de commit 6e6a84f
Showing 1 changed file with 17 additions and 0 deletions.
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

0 comments on commit 6e6a84f

Please sign in to comment.