[css-color] Fix rgb() grammar to correctly state that you have to use all numbers or all %s. Since grammar is getting complex, move legacy syntaxes lower down, and make hsl() match.

Author: tabatkins

css-color/Overview.bs

@@ -171,15 +171,12 @@ The RGB functions: ''rgb()'' and ''rgba()''</h3>
 	Its syntax is:
 
 	<pre class='prod'>
-	<dfn>rgb()</dfn> = rgb( <<rgb-component>>{3} [ / <<alpha-value>> ]? ) |
-	        rgb( <<rgb-component>>#{3} , <<alpha-value>>? )
-	<dfn>rgba()</dfn> = rgba( <<rgb-component>>{3} [ / <<alpha-value>> ]? ) |
-	         rgba( <<rgb-component>>#{3} , <<alpha-value>>? )
-	<dfn>&lt;rgb-component></dfn> = <<number>> | <<percentage>>
+	<dfn>rgb()</dfn> = rgb( <<percentage>>{3} [ / <<alpha-value>> ]? ) |
+	        rgb( <<number>>{3} [ / <<alpha-value>> ]? )
 	<dfn>&lt;alpha-value></dfn> = <<number>> | <<percentage>>
 	</pre>
 
-	The three <<rgb-component>>s specify the red, green, and blue channels of the color, respectively.
+	The first three arguments specify the red, green, and blue channels of the color, respectively.
 	''0%'' represents the minimum value for that color channel in the sRGB gamut,
 	and ''100%'' represents the maximum value.
 	A <<number>> is equivalent to a <<percentage>>,
@@ -204,14 +201,18 @@ The RGB functions: ''rgb()'' and ''rgba()''</h3>
 	Values outside these ranges are not invalid,
 	but are clamped to the ranges defined here at computed-value time.
 
-	Note: For legacy reasons,
-	the ''rgb()'' function and ''rgba()'' functions both exist,
-	but are aliases of each other.
+	For legacy reasons,
+	''rgb()'' also supports an alternate syntax
+	that separates all of its arguments with commas:
+
+	<pre class='prod'>
+	rgb() = rgb( <<percentage>>#{3} , <<alpha-value>>? ) |
+	        rgb( <<number>>#{3} , <<alpha-value>>? )
+	</pre>
+
 	Also for legacy reasons,
-	both functions have an alternate syntax separating their arguments with commas,
-	rather than the standard color-function format
-	of space-separated arguments
-	and an optional slash-separated opacity.
+	an <dfn>rgba()</dfn> function also exists,
+	with an identical grammar and behavior to ''rgb()''.
 
 <h3 id='hex-notation'>
 The RGB hexadecimal notations: ''#RRGGBB''</h3>
@@ -713,10 +714,7 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 	The syntax of the ''hsl()'' function is:
 
 	<pre class='prod'>
-	<dfn>hsl()</dfn> = hsl( <<hue>> <<percentage>> <<percentage>> [ / <<alpha-value>> ]? ) |
-	        hsl( <<hue>>, <<percentage>>, <<percentage>>, <<alpha-value>>? )
-	<dfn>hsla()</dfn> = hsla( <<hue>> <<percentage>> <<percentage>> [ / <<alpha-value>> ]? ) |
-	         hsla( <<hue>>, <<percentage>>, <<percentage>>, <<alpha-value>>? )
+	<dfn>hsl()</dfn> = hsl( <<hue>> <<percentage>> <<percentage>> [ / <<alpha-value>> ]? )
 	<dfn>&lt;hue></dfn> = <<number>> | <<angle>>
 	</pre>
 
@@ -770,13 +768,17 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 		</pre>
 	</div>
 
-	Note: For legacy reasons, the ''hsl()'' function and ''hsla()'' functions both exist,
-	but are aliases of each other.
+	For legacy reasons,
+	''hsl()'' also supports an alternate syntax
+	that separates all of its arguments with commas:
+
+	<pre class='prod'>
+	hsl() = hsl( <<hue>>, <<percentage>>, <<percentage>>, <<alpha-value>>? )
+	</pre>
+
 	Also for legacy reasons,
-	both functions have an alternate syntax separating their arguments with commas,
-	rather than the standard color-function format
-	of space-separated arguments
-	and an optional slash-separated opacity.
+	an <dfn>hsla()</dfn> function also exists,
+	with an identical grammar and behavior to ''hsl()''.
 
 
 <h3 id='hsl-to-rgb'>