[css-color-4] Clarified that the computed value of a deprecated system color is the color of the corresponding (non-deprecated) system color #13459

Author: svgeesus

css-color-4/Overview.bs

@@ -6731,34 +6731,63 @@ Resolving values of the ''color()'' function</h3>
 	* [=system colors=],
 	* <a href="#deprecated-system-colors">deprecated system colors</a>
 	* ''transparent''
-	* ''color>/currentcolor''.
+	* ''currentcolor''.
 
 	If the color was explicitly specified by the author 
 	as a [=system color=]
-	or deprecated system color,
+	or as a deprecated system color,
 	the [=declared value=] is itself, converted to
 	<a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a>.
 
-	The computed and used value
-	is the corresponding color in its color space.
+	<div class="example" id="ex-system-declared">
+		For example, in this html:
+
+		<pre class="lang-html">&lt;mark style="color: <span class="swatch" style="--color: MarkText"></span> MarkText; background: <span class="swatch" style="--color: Mark"></span> Mark">example&lt;/mark></pre>
+	
+		The declared value for background-color is "mark".
+	</div>	
+
+	For [=system colors=], the computed and used value
+	is the corresponding color in its color space,
 	paired with the specified alpha component
 	(after clamping to [0, 1]).
 
-	However, system colors and deprecated system colors 
-	must not be altered by
-	[=forced colors mode=].
+	For <a href="#deprecated-system-colors">deprecated system colors</a>,
+	the computed and used value
+	is the color
+	of the corresponding  [=system color=]
+	(as listed in [[#deprecated-system-colors]])
+	in its color space,
+	paired with the specified alpha component
+	(after clamping to [0, 1]).
 
+	<div class="example" id="ex-deprecated-computed">
+		For example, given this css:
+
+		<pre class="lang-css">.foo {
+			color: <span class="swatch" style="--color: InfoText"></span> InfoText;
+		}</pre>
+
+		The corresponding system color for ''InfoText'' is ''CanvasText''.
+		Suppose that ''CanvasText'' is #333;
+		then the computed value for ''InfoText'' will also be #333;
+
+	</div>
 
 	<div class="example" id="ex-system-resolve">
 		For example, in this html:
 
 		<pre class="lang-html">&lt;button style="color: <span class="swatch" style="--color: ButtonText"></span> ButtonText; background: <span class="swatch" style="--color: ButtonFace"></span> ButtonFace">&lt;/button></pre>
 
-		The declared value of the color property is "ButtonText"
+		The declared value of the color property is "buttontext"
 		while the computed value could be, for example,
-		<span class="swatch" style="--color: #FFF"></span> rgb(0, 0, 0).
+		<span class="swatch" style="--color: #000"></span> rgb(0, 0, 0).
 	</div>
 
+	However, system colors and deprecated system colors 
+	must not be altered by
+	[=forced colors mode=].
+
 	The declared value of ''transparent'' is "transparent"
 	while the computed and used value  is [=transparent black=].
 
@@ -7906,84 +7935,84 @@ Appendix A: Deprecated CSS System Colors</h2>
 
 	<dl dfn-type="value" dfn-for="<color>, <deprecated-color>">
 		<dt><dfn>ActiveBorder</dfn>
-		<dd>Active window border. Same as ''ButtonBorder''.
+		<dd>Active window border. Computes to the color of ''ButtonBorder''.
 
 		<dt><dfn>ActiveCaption</dfn>
-		<dd>Active window caption. Same as ''Canvas''.
+		<dd>Active window caption. Computes to the color of ''Canvas''.
 
 		<dt><dfn>AppWorkspace</dfn>
-		<dd>Background color of multiple document interface. Same as ''Canvas''.
+		<dd>Background color of multiple document interface. Computes to the color of ''Canvas''.
 
 		<dt><dfn>Background</dfn>
-		<dd>Desktop background. Same as ''Canvas''.
+		<dd>Desktop background. Computes to the color of ''Canvas''.
 
 		<dt><dfn>ButtonHighlight</dfn>
 		<dd>The color of the border facing the light source for 3-D elements
-		that appear 3-D due to one layer of surrounding border. Same as ''ButtonFace''.
+		that appear 3-D due to one layer of surrounding border. Computes to the color of ''ButtonFace''.
 
 		<dt><dfn>ButtonShadow</dfn>
 		<dd>The color of the border away from the light source for 3-D elements
-		that appear 3-D due to one layer of surrounding border. Same as ''ButtonFace''.
+		that appear 3-D due to one layer of surrounding border. Computes to the color of ''ButtonFace''.
 
 		<dt><dfn>CaptionText</dfn>
-		<dd>Text in caption, size box, and scrollbar arrow box. Same as ''CanvasText''.
+		<dd>Text in caption, size box, and scrollbar arrow box. Computes to the color of ''CanvasText''.
 
 		<dt><dfn>InactiveBorder</dfn>
-		<dd>Inactive window border. Same as ''ButtonBorder''.
+		<dd>Inactive window border. Computes to the color of ''ButtonBorder''.
 
 		<dt><dfn>InactiveCaption</dfn>
-		<dd>Inactive window caption. Same as ''Canvas''.
+		<dd>Inactive window caption. Computes to the color of ''Canvas''.
 
 		<dt><dfn>InactiveCaptionText</dfn>
-		<dd>Color of text in an inactive caption. Same as ''GrayText''.
+		<dd>Color of text in an inactive caption. Computes to the color of ''GrayText''.
 
 		<dt><dfn>InfoBackground</dfn>
-		<dd>Background color for tooltip controls. Same as ''Canvas''.
+		<dd>Background color for tooltip controls. Computes to the color of ''Canvas''.
 
 		<dt><dfn>InfoText</dfn>
-		<dd>Text color for tooltip controls. Same as ''CanvasText''.
+		<dd>Text color for tooltip controls. Computes to the color of ''CanvasText''.
 
 		<dt><dfn>Menu</dfn>
-		<dd>Menu background. Same as ''Canvas''.
+		<dd>Menu background. Computes to the color of ''Canvas''.
 
 		<dt><dfn>MenuText</dfn>
-		<dd>Text in menus. Same as ''CanvasText''.
+		<dd>Text in menus. Computes to the color of ''CanvasText''.
 
 		<dt><dfn>Scrollbar</dfn>
-		<dd>Scroll bar gray area. Same as ''Canvas''.
+		<dd>Scroll bar gray area. Computes to the color of ''Canvas''.
 
 		<dt><dfn>ThreeDDarkShadow</dfn>
 		<dd>The color of the darker (generally outer) of the two borders away
 		from the light source for 3-D elements that appear 3-D due to two
-		concentric layers of surrounding border. Same as ''ButtonBorder''.
+		concentric layers of surrounding border. Computes to the color of ''ButtonBorder''.
 
 		<dt><dfn>ThreeDFace</dfn>
 		<dd>The face background color for 3-D elements that appear 3-D due to
-		two concentric layers of surrounding border. Same as ''ButtonFace''.
+		two concentric layers of surrounding border. Computes to the color of ''ButtonFace''.
 
 		<dt><dfn>ThreeDHighlight</dfn>
 		<dd>The color of the lighter (generally outer) of the two borders facing
 		the light source for 3-D elements that appear 3-D due to two
-		concentric layers of surrounding border. Same as ''ButtonBorder''.
+		concentric layers of surrounding border. Computes to the color of ''ButtonBorder''.
 
 		<dt><dfn>ThreeDLightShadow</dfn>
 		<dd>The color of the darker (generally inner) of the two borders facing
 		the light source for 3-D elements that appear 3-D due to two
-		concentric layers of surrounding border. Same as ''ButtonBorder''.
+		concentric layers of surrounding border. Computes to the color of ''ButtonBorder''.
 
 		<dt><dfn>ThreeDShadow</dfn>
 		<dd>The color of the lighter (generally inner) of the two borders away
 		from the light source for 3-D elements that appear 3-D due to two
-		concentric layers of surrounding border. Same as ''ButtonBorder''.
+		concentric layers of surrounding border. Computes to the color of ''ButtonBorder''.
 
 		<dt><dfn>Window</dfn>
-		<dd>Window background. Same as ''Canvas''.
+		<dd>Window background. Computes to the color of ''Canvas''.
 
 		<dt><dfn>WindowFrame</dfn>
-		<dd>Window frame. Same as ''ButtonBorder''.
+		<dd>Window frame. Computes to the color of ''ButtonBorder''.
 
 		<dt><dfn>WindowText</dfn>
-		<dd>Text in windows. Same as ''CanvasText''.
+		<dd>Text in windows. Computes to the color of ''CanvasText''.
 	</dl>
 
 	<wpt>
@@ -8247,6 +8276,12 @@ Changes</h2>
 	<a href="https://www.w3.org/TR/2025/CRD-css-color-4-20250424/">Candidate Recommendation Draft of 24 April 2025</a></h3>
 
 <ul>
+	<li>Clarified that the computed value of a deprecated system color 
+		is the color of the corresponding (non-deprecated) system color
+		(<a href="https://github.com/w3c/csswg-drafts/issues/3873">Issue 3873</a>,
+		<a href="https://github.com/w3c/csswg-drafts/issues/13459">Issue 13459></a>,
+		<a href="https://github.com/w3c/csswg-drafts/issues/13719">Issue 13719</a>)
+	</li>
 	<li>Consolidated the resolution of system colors and deprecated system colors
 		(<a href="https://github.com/w3c/csswg-drafts/issues/13450">Issue 13450</a>)
 	</li>