[css-color-4][editorial] Refactor <color> syntax section

* Split out conceptual definitions from syntactic definitions,
  pulling the former up into the main intro.
* Define “color function” properly as a term.
* Give an actual overview of all the color syntaxes in the intro,
  so readers have a map of what's coming.
* Push legacy syntax into its own subsection.
* Shift non-normative text about hue angles into a note.

Author: fantasai

css-color-4/Overview.bs

@@ -614,89 +614,154 @@ Transparency: the 'opacity' property</h2>
 <h2 id='color-type'>
 Representing Colors: the <<color>> type</h2>
 
-	CSS has several syntaxes for specifying color values.
-	Some directly specify an sRGB color by its channels,
-	such as the [=hex color notation=] or ''rgb()'' function.
-	Others are more human-friendly to write and understand,
-	such as the ''hsl()'' and ''lch()'' functions,
-	or the long list of [=named colors=].
 
-<h3 id="color-syntax">The <<color>> syntax</h3>
-
-	Colors are represented as a list of components,
+	Colors in CSS are represented as a list of color components,
 	also sometimes called “channels”,
 	representing axises in the color space.
 	Each channel has a minimum and maximum value,
 	and can take any value between those two.
 	Additionally, every color is accompanied by
 	an <dfn lt="alpha channel | alpha component" export>alpha component</dfn>,
 	indicating how transparent it is,
-	and thus how much of the backdrop one can see behind the color.
+	and thus how much of the backdrop one can see through the color.
+
+	CSS has several syntaxes for specifying color values:
+	* the sRGB [=hex color notation=]
+		which represents the RGB and alpha channels in hexadecimal notation
+	* the various [=color functions=]
+		which can represent colors using a variety of color spaces and coordinate systems
+	* the constant [=named color=] keywords
+	* the variable <<system-color>> keywords and ''currentColor'' keyword.
+
+	The <dfn>color functions</dfn>
+	use CSS [=functional notation=]
+	to represent colors in a variety of [=color spaces=]
+	by specifying their channel coordinates.
+	Some of these use a <dfn export>cylindrical polar color</dfn> model,
+	specifying color by a <<hue>> angle,
+	a central axis representing lightness
+	(black-to-white),
+	and a radius representing saturation or chroma
+	(how far the color is from a neutral grey).
+	The others use a <dfn export>rectangular orthogonal color</dfn> model,
+	specifying color using three
+	(or more, in the case of CMYK or CMYKOGV)
+	orthogonal component axes.
+
+	The [=color functions=] available in Level 4 are
+	* ''rgb()'' and its ''rgba()'' alias,
+		which (like the [=hex color notation=]) specify sRGB colors directly
+		by their red/green/blue/alpha chanels.
+	* ''hsl()'' and its ''hsla()'' alias,
+		which specify sRGB colors
+		by hue, saturation, and lightness
+		using the [[#the-hsl-notation|HSL]] cylindrical coordinate model.
+	* ''hwb()'',
+		which specifies an sRGB color
+		by hue, whiteness, and blackness
+		using the [[#the-hwb-notation|HWB]] cylindrical coordinate model.
+	* ''lab()'',
+		which specifies a CIELAB color
+		by CIE Lightness and its a- and b-axis hue coordinates
+		(red/green-ness, and yellow/blue-ness)
+		using the [[#cie-lab|CIE LAB rectangular coordinate model]].
+	* ''lch()'' ,
+		which specifies a CIELAB color
+		by CIE Lightness, Chroma, and hue
+		using the [[#cie-lab|CIE LCH cylindrical coordinate model]]
+	* ''oklab()'',
+		which specifies an OKLAB color
+		by OKLAB Lightness and its a- and b-axis hue coordinates
+		(red/green-ness, and yellow/blue-ness)
+		using the [[#ok-lab|OKLAB]] rectangular coordinate model.
+	* ''oklch()'' ,
+		which specifies an OKLAB color
+		by OKLAB Lightness, Chroma, and hue
+		using the [[#ok-lab|OKLCH]] cylindrical coordinate model.
+<!--
+	* ''device-cmyk()'',
+		which specifies a device-specific CMYK color
+		by its cyan, magenta, yellow, and black components.
+-->
+	* ''color()'',
+		which allows specifying colors in a variety of color spaces
+		including
+		[[#predefined-sRGB|sRGB]],
+		[[#predefined-sRGB-linear|Linear-light sRGB]],
+		[[#predefined-display-p3|Display P3]],
+		[[#predefined-a98-rgb|A98 RGB]],
+		[[#predefined-prophoto-rgb|ProPhoto RGB]],
+		[[#predefined-rec2020|ITU-R BT.2020-2]],
+		and
+		[[#predefined-xyz|CIE XYZ]].
+
+	For easy reference in other specifications,
+	<dfn export>opaque black</dfn> is defined as the color <nobr>''rgb(0 0 0 / 100%)''</nobr>;
+	<dfn export>transparent black</dfn> is the same color,
+	but fully transparent--
+	i.e. <nobr>''rgb(0 0 0 / 0%)''</nobr>.
+
+<h3 id="color-syntax">The <<color>> syntax</h3>
 
 	Colors in CSS are represented by the <dfn export><<color>></dfn> type:
 
 	<pre class='prod'>
-	&lt;color> = <<absolute-color-base>> | currentcolor | <<system-color>> | <<device-cmyk()>>
+	&lt;color> = <<absolute-color-base>> | currentcolor | <<system-color>> <!-- | <<device-cmyk()>> -->
 
-	<dfn>&lt;absolute-color-base></dfn> = <<hex-color>> | <<named-color>> | transparent |
-	    <<rgb()>> | <<rgba()>> | <<hsl()>> | <<hsla()>> | <<hwb()>> |
-	    <<lab()>> | <<lch()>> |
-	    <<oklab()>> | <<oklch()>> |
-	    <<color()>>
+	<dfn>&lt;absolute-color-base></dfn> = <<hex-color>> | <<absolute-color-function>> | <<named-color>> | transparent
+	<dfn>&lt;absolute-color-function></dfn> = <<rgb()>> | <<rgba()>> |
+	                            <<hsl()>> | <<hsla()>> | <<hwb()>> |
+	                            <<lab()>> | <<lch()>> | <<oklab()>> | <<oklch()>> |
+	                            <<color()>>
 	</pre>
 
-	The <dfn export>color-functions</dfn> are <<rgb()>>, <<rgba()>>,
-		<<hsl()>>, <<hsla()>>, <<hwb()>>,
-		<<lab()>>, <<lch()>>,
-		<<oklab()>>, <<oklch()>>, and
-		<<color()>>.
-
-	Of those, <<hsl()>>, <<hsla()>>, <<hwb()>>, <<lch()>>, and <<oklch()>>
-		are <dfn export>cylindrical polar color</dfn> representations,
-		which specify color using a <<hue>> angle,
-		a central axis representing lightness
-		(black-to-white),
-		and a radius representing saturation or chroma
-		(how far the color is from a neutral grey).
-	The other color spaces are
-		<dfn export>rectangular orthogonal color</dfn> representations,
-		which specify color using three
-		(or more, in the case of CMYK or CMYKOGV)
-		orthogonal component axes.
-
-	For easy reference in other specifications,
-	<dfn export>opaque black</dfn> is defined as the color <nobr>''rgb(0 0 0 / 100%)''</nobr>;
-	<dfn export>transparent black</dfn> is the same color,
-	but fully transparent--
-	i.e. <nobr>''rgb(0 0 0 / 0%)''</nobr>.
+	The <<hsl()>>, <<hsla()>>, <<hwb()>>, <<lch()>>, and <<oklch()>> [=color functions=]
+	are [=cylindrical polar color=] representations using a <<hue>> angle;
+	the other [=color functions=] use [=rectangular orthogonal color=] representations.
 
-	All of the <<color>> syntactic forms
+	All of the <<absolute-color-function>> syntactic forms
 	defined in this specification
 	use space, not comma,
 	to separate the color components.
 	They also use a solidus ("/")
 	to separate an optional alpha term
 	from the color components.
 
+	<div class=example id="example-generic-syntax">
+		<p>The following represents a saturated sRGB red that is 50% opaque:
+		<pre>rgb(100% 0% 0% / 50%)</pre>
+	</div>
+
+<h4 id="color-syntax-legacy">
+Legacy Comma-separated Color Function Syntax</h4>
+
 	For Web compatibility,
-	<<color>> syntactic forms
-	defined in earlier levels of this specification
-	also support
+	the syntactic forms
+	of ''rgb()'', ''rgba()'', ''hsl()'', and ''hsla()'',
+	<!-- of ''rgb()'', ''rgba()'', ''hsl()'', ''hsla()'', and ''device-cmyk()'' -->
+	(those defined in earlier specifications)
+	also support a
 	<dfn export>legacy color syntax</dfn>
 	which has the following differences:
 
-	* color components are separated by comma-whitespace
+	* color components are separated by commas
+		(optionally preceded and/or followed by whitespace)
 	* non-opaque forms use a separate notation
-	    (for example ''hsla()'' rather than ''hsl()'')
+		(for example ''hsla()'' rather than ''hsl()'')
 	* minimum required precision is lower, 8 bits per component
 
-	For the syntactic forms introduced
+	<div class=example id="example-rgba-legacy"p>
+		<p>The following represents a saturated sRGB red that is 50% opaque:
+		<pre>rgba(100%, 0%, 0%, 0.5)</pre>
+	</div>
+
+	For the [=color functions=] introduced
 	in this or subsequent levels,
 	where there is no Web compatibility issue,
-	<a>legacy color syntax</a> is not supported,
-	and attempting to use it is an error.
+	the <a>legacy color syntax</a> is invalid.
 
-<h3 id="hue-syntax">The <<hue>> syntax</h3>
+<h3 id="hue-syntax">
+Representing Cylindrical-coordinate Hues: the <<hue>> syntax</h3>
 
 Hue is represented as an angle of the color circle
 (the rainbow, twisted around into a circle, and with purple added between violet and red).
@@ -716,7 +781,7 @@ Certain operations,
 such as hue interpolation,
 may normalize the hue angle during calculations.
 
-The angles and spacing
+Note: The angles and spacing
 corresponding to particular hues
 depend on the color space.
 For example, in HSL and HWB, which use the sRGB color space,
@@ -1604,9 +1669,9 @@ sRGB Colors</h2>
 
 	CSS provides several methods of directly specifying an sRGB color:
 	[=hex colors=],
-	''rgb()''/''rgba()'' [=color-functions=],
-	''hsl()''/''hsla()'' [=color-functions=],
-	''hwb()'' [=color-functions|color-function=],
+	''rgb()''/''rgba()'' [=color functions=],
+	''hsl()''/''hsla()'' [=color functions=],
+	''hwb()'' [=color function=],
 	[=named colors=],
 	and the ''transparent'' keyword.