Skip to content

Commit 0603907

Browse files
committed
[css-color-adjust-1] Add example for color-mix() in Forced Colors mode. w3c#11097
1 parent 2c6c996 commit 0603907

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

css-color-adjust-1/Overview.bs

+17
Original file line numberDiff line numberDiff line change
@@ -572,6 +572,23 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
572572
UAs may further tweak these <a>forced colors mode</a> heuristics
573573
to provide better user experience.
574574

575+
<div class="example">
576+
Authors may still use features such as ''color-mix()'' in [=forced colors mode=].
577+
In such cases, the [=computed value=] will behave as it would normally,
578+
but the [=used value=] will be overridden with an appropriate [=system color=].
579+
580+
<pre highlight=css>
581+
.example {
582+
color: color-mix(in srgb, CanvasText, Canvas);
583+
}
584+
</pre>
585+
586+
The [=computed value=] for 'color' will be a 50-50 blend of the ''CanvasText'' and ''Canvas'' [=system colors=].
587+
That value will inherit to descendants and be observable via APIs such as {{Element/computedStyleMap()}}.
588+
589+
The [=used value=] for 'color' will be a system color chosen by the UA, for example ''CanvasText''.
590+
</div>
591+
575592
Opting Out of a Forced Color Palette: the 'forced-color-adjust' property {#forced-color-adjust-prop}
576593
-----------------------------------------------------------------
577594

0 commit comments

Comments
 (0)