[css-color] Dfn system colors, and add them to the definition of <color>.

Author: tabatkins

css-color/Overview.bs

@@ -123,7 +123,8 @@ Representing Colors: the <<color>> type</h2>
 	<pre class='prod'>
 	<dfn>&lt;color></dfn> = <<rgb()>> | <<rgba()>> | <<hsl()>> | <<hsla()>> |
 	          <<hwb()>> | <<gray()>> | <<device-cmyk()>> | <<color()>> |
-	          <<hex-color>> | <<named-color>> | currentcolor
+	          <<hex-color>> | <<named-color>> | currentcolor |
+	          <<deprecated-system-color>>
 	</pre>
 
 	Some operations work differently on <dfn export>achromatic</dfn> colors.
@@ -2346,6 +2347,7 @@ Sample style sheet for (X)HTML</h2>
 Appendix A: Deprecated CSS System Colors</h2>
 
 	Earlier versions of CSS defined several additional named color keywords,
+	the <dfn>&lt;deprecated-system-color></dfn>s,
 	which were meant to take their value from operating system themes.
 	These color names have been <strong>deprecated</strong>, however,
 	as they are insufficient for their original purpose

css-color/Overview.html

@@ -82,7 +82,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Color Module Level 4</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20140327>27 March 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140415>15 April 2014</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-color/>http://dev.w3.org/csswg/css-color/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-color/>http://dev.w3.org/csswg/css-color/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-color%5D%20feedback">www-style@w3.org</a>
@@ -262,7 +262,8 @@ <h2 class="heading settled heading" data-level=3 id=color-type><span class=secno
 
 	<pre class=prod><dfn class=css-code data-dfn-type=type data-export="" id=typedef-color>&lt;color&gt;<a class=self-link href=#typedef-color></a></dfn> = <a class="production css-code" data-link-type=function href=#funcdef-rgb title=rgb()>&lt;rgb()&gt;</a> | <a class="production css-code" data-link-type=function href=#funcdef-rgba title=rgba()>&lt;rgba()&gt;</a> | <a class="production css-code" data-link-type=function href=#funcdef-hsl title=hsl()>&lt;hsl()&gt;</a> | <a class="production css-code" data-link-type=function href=#funcdef-hsla title=hsla()>&lt;hsla()&gt;</a> |
           <a class="production css-code" data-link-type=function href=#funcdef-hwb title=hwb()>&lt;hwb()&gt;</a> | <a class="production css-code" data-link-type=function href=#funcdef-gray title=gray()>&lt;gray()&gt;</a> | <a class="production css-code" data-link-type=function href=#funcdef-device-cmyk title=device-cmyk()>&lt;device-cmyk()&gt;</a> | <a class="production css-code" data-link-type=function href=#funcdef-color title=color()>&lt;color()&gt;</a> |
-          <a class="production css-code" data-link-type=type href=#typedef-hex-color title="<hex-color>">&lt;hex-color&gt;</a> | <a class="production css-code" data-link-type=type href=#typedef-named-color title="<named-color>">&lt;named-color&gt;</a> | currentcolor
+          <a class="production css-code" data-link-type=type href=#typedef-hex-color title="<hex-color>">&lt;hex-color&gt;</a> | <a class="production css-code" data-link-type=type href=#typedef-named-color title="<named-color>">&lt;named-color&gt;</a> | currentcolor |
+          <a class="production css-code" data-link-type=type href=#typedef-deprecated-system-color title="<deprecated-system-color>">&lt;deprecated-system-color&gt;</a>
 </pre>
 <p>	Some operations work differently on <dfn data-dfn-type=dfn data-export="" id=achromatic>achromatic<a class=self-link href=#achromatic></a></dfn> colors.
 	An <a data-link-type=dfn href=#achromatic title=achromatic>achromatic</a> color is a shade of gray:
@@ -776,7 +777,7 @@ <h3 class="heading settled heading" data-level=5.2 id=currentcolor-color><span c
 </pre>	</div>
 
 	<div class=example>
-		For example, the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-decor-3/#text-emphasis-color title=text-emphasis-color>text-emphasis-color</a> property <a data-biblio-type=informative data-link-type=biblio href=#css3-text-decor title=css3-text-decor>[CSS3-TEXT-DECOR]</a>,
+		For example, the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-emphasis-color title=text-emphasis-color>text-emphasis-color</a> property <a data-biblio-type=informative data-link-type=biblio href=#css3-text-decor title=css3-text-decor>[CSS3-TEXT-DECOR]</a>,
 		whose initial value is <a class=css data-link-type=maybe href=#valuedef-currentcolor title=currentcolor>currentcolor</a>,
 		by default matches the text color
 		even as the <a class=property data-link-type=propdesc href=#propdef-color title=color>color</a> property changes across elements.
@@ -1738,7 +1739,7 @@ <h2 class="heading settled heading" data-level=8 id=grays><span class=secno>8 </
 <p>	<span class=css data-link-type=maybe title=gray(a)>gray(A)</span> represents the same color as <span class=css data-link-type=maybe title=rgb(a,a,a)>rgb(A,A,A)</span>.
 	<span class=css data-link-type=maybe title=gray(a,b)>gray(A,B)</span> represents the same color as <span class=css data-link-type=maybe title=rgb(a,a,a,b)>rgb(A,A,A,B)</span>.
 
-	<div class=issue id=issue-a00cd53b><a class=self-link href=#issue-a00cd53b></a>
+	<div class=issue id=issue-840a4cfe><a class=self-link href=#issue-840a4cfe></a>
 		<a data-link-type=functionish href=#funcdef-gray title=gray()>gray()</a> should have a keyword arg that opts it into smarter modes.
 		"luminance", for example, instead of being a simple expansion to <a class=css data-link-type=maybe href=#funcdef-rgb title=rgb()>rgb()</a>,
 		could actually compute the gray with the specified luminance.
@@ -1941,7 +1942,7 @@ <h2 class="heading settled heading" data-level=10 id=modifying-colors><span clas
 		(<span class=css data-link-type=maybe title="hsl(120deg, 20%, 56%)">hsl(120deg, 20%, 56%)</span>, slightly lighter and brighter than the original color, which is what was intended).
 	</div>
 
-	<div class=issue id=issue-71a06996><a class=self-link href=#issue-71a06996></a>
+	<div class=issue id=issue-929de920><a class=self-link href=#issue-929de920></a>
 		More possibilities:
 
 <p>		<ul>
@@ -2203,7 +2204,7 @@ <h3 class="heading settled heading" data-level=10.4 id=blend-adjuster><span clas
 				but isn’t motivated by any theory.
 	</dl>
 
-	<p class=issue id=issue-4877d794><a class=self-link href=#issue-4877d794></a>
+	<p class=issue id=issue-055d1232><a class=self-link href=#issue-055d1232></a>
 		Should we swap the defaults,
 		so <span class=css data-link-type=maybe title=blend()>blend()</span> does the alpha blending,
 		and another name (or maybe another parameter) ignores alpha like <span class=css data-link-type=maybe title=blend()>blend()</span> currently does?
@@ -2434,6 +2435,7 @@ <h2 class="no-num heading settled heading" id=system-colors><span class=content>
 Appendix A: Deprecated CSS System Colors</span><a class=self-link href=#system-colors></a></h2>
 
 <p>	Earlier versions of CSS defined several additional named color keywords,
+	the <dfn class=css-code data-dfn-type=type data-export="" id=typedef-deprecated-system-color>&lt;deprecated-system-color&gt;<a class=self-link href=#typedef-deprecated-system-color></a></dfn>s,
 	which were meant to take their value from operating system themes.
 	These color names have been <strong>deprecated</strong>, however,
 	as they are insufficient for their original purpose
@@ -2710,7 +2712,7 @@ <h2 class="no-num no-ref heading settled heading" id=references><span class=cont
 
 <h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
 Normative References</span><a class=self-link href=#normative></a></h3>
-<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=srgb title=SRGB><a class=self-link href=#srgb></a>[SRGB]<dd>???. <a href="http://www.iec.ch/nr1899.htm ">Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</a>. as amended by Amendment A1:2003.  URL: <a href="http://www.iec.ch/nr1899.htm ">http://www.iec.ch/nr1899.htm </a><dt id=svg11 title=SVG11><a class=self-link href=#svg11></a>[SVG11]<dd>Erik Dahlström; et al. <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/>http://www.w3.org/TR/2011/REC-SVG11-20110816/</a></dl></div>
+<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=srgb title=SRGB><a class=self-link href=#srgb></a>[SRGB]<dd>???. <a href=http://www.iec.ch/nr1899.htm>Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</a>. as amended by Amendment A1:2003. URL: <a href=http://www.iec.ch/nr1899.htm>http://www.iec.ch/nr1899.htm</a><dt id=svg11 title=SVG11><a class=self-link href=#svg11></a>[SVG11]<dd>Erik Dahlström; et al. <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/>http://www.w3.org/TR/2011/REC-SVG11-20110816/</a></dl></div>
 
 <h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
 Informative References</span><a class=self-link href=#informative></a></h3>
@@ -2783,6 +2785,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>darkviolet, <a href=#valuedef-darkviolet title="section 5">5</a>
 <li>deeppink, <a href=#valuedef-deeppink title="section 5">5</a>
 <li>deepskyblue, <a href=#valuedef-deepskyblue title="section 5">5</a>
+<li>&lt;deprecated-system-color&gt;, <a href=#typedef-deprecated-system-color title="section Unnumbered section">Unnumbered section</a>
 <li>device-cmyk(), <a href=#funcdef-device-cmyk title="section 9">9</a>
 <li>dimgray, <a href=#valuedef-dimgray title="section 5">5</a>
 <li>dimgrey, <a href=#valuedef-dimgrey title="section 5">5</a>
@@ -2934,9 +2937,9 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>
 Property index</span><a class=self-link href=#property-index></a></h2>
 <div data-fill-with=property-index><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Computed value<tbody>
-<tr><th scope=row><a data-property="">color</a><td>&lt;color&gt;<td>UA-defined, see prose<td>all elements<td>yes<td>N/A<td>visual<td>an RGBA color
-<tr><th scope=row><a data-property="">opacity</a><td>&lt;alpha-value&gt;<td>1<td>all elements<td>no<td>N/A<td>visual<td>The specified value, clamped to the range [0,1].
-<tr><th scope=row><a data-property="">color-correction</a><td>auto | sRGB<td>auto<td>all elements<td>yes<td>N/A<td>visual<td>as specified</table></div>
+<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-color title=color>color</a><td>&lt;color&gt;<td>UA-defined, see prose<td>all elements<td>yes<td>N/A<td>visual<td>an RGBA color
+<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-opacity title=opacity>opacity</a><td>&lt;alpha-value&gt;<td>1<td>all elements<td>no<td>N/A<td>visual<td>The specified value, clamped to the range [0,1].
+<tr><th scope=row><a class=css-code data-link-type=property href=#propdef-color-correction title=color-correction>color-correction</a><td>auto | sRGB<td>auto<td>all elements<td>yes<td>N/A<td>visual<td>as specified</table></div>
 
 
 <h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue>
@@ -2964,7 +2967,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 		you convert between contrast-ratio space and luminance space
 		with <code>L = 21^p</code>,
 		then find the gray with that luminance.
-	</p><a href=#issue-a00cd53b> ↵ </a></div>
+	</p><a href=#issue-840a4cfe> ↵ </a></div>
 
 
 <div class=issue>
@@ -2987,7 +2990,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 			<li>
 				Warmer/cooler.  How to define?  What’s warmer, red or yellow?  What’s cooler, blue or green?
 		</ul>
-	<a href=#issue-71a06996> ↵ </a></div>
+	<a href=#issue-929de920> ↵ </a></div>
 
 
 <div class=issue>
@@ -3002,7 +3005,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 		and another name (or maybe another parameter) ignores alpha like <span class=css data-link-type=maybe title=blend()>blend()</span> currently does?
 
 
-<a href=#issue-4877d794> ↵ </a></div><div class=issue>
+<a href=#issue-055d1232> ↵ </a></div><div class=issue>
 		Really?  Shouldn’t video be consistent with images?
 		Or do implementations really do this differently?