From 6e6a84f2c2dff0ee5b2e23ecbbded952c65c518e Mon Sep 17 00:00:00 2001
From: Kevin Babbitt <kbabbitt@microsoft.com>
Date: Tue, 26 Nov 2024 16:45:35 -0800
Subject: [PATCH] [css-color-adjust-1] Add example for `color-mix()` in Forced
 Colors mode. #11097

---
 css-color-adjust-1/Overview.bs | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/css-color-adjust-1/Overview.bs b/css-color-adjust-1/Overview.bs
index acbca1861e8..71db6b84d05 100644
--- a/css-color-adjust-1/Overview.bs
+++ b/css-color-adjust-1/Overview.bs
@@ -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}
 -----------------------------------------------------------------