[css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341

Author: tabatkins

css-values-5/Overview.bs

@@ -411,7 +411,7 @@ Interpolated Property Values: the ''mix()'' notation</h3>
 
 	<pre class="prod">
 		<dfn><<mix()>></dfn> =
-		  mix( <<progress>> ';' <<declaration-value>>? ';' <<declaration-value>>? ) |
+		  mix( <<progress>> ';' <<whole-value>> ';' <<whole-value>> ) |
 		  mix( <<progress>> && of <<'animation-name'>> )
 	</pre>
 
@@ -475,12 +475,10 @@ Interpolated Property Values: the ''mix()'' notation</h3>
 		</pre>
 	</div>
 
-	A ''mix()'' notation is invalid
-	if it is not the sole value of the property;
-	if either of its <<declaration-value>>s
-	are invalid when specified as the entire value
-	for the property the function is used in;
-	or if the property using it is [=not animatable=].
+	The ''mix()'' notation is a <<whole-value>>.
+	Additionally,
+	if any of its <<whole-value>> arguments are [=not animatable=],
+	the notation is invalid.
 
 	<div class="example">
 		For example, the following declarations are invalid,
@@ -501,6 +499,28 @@ Interpolated Property Values: the ''mix()'' notation</h3>
 <h2 id="value-insert">
 Miscellaneous Value Substituting Functions</h2>
 
+<h3 id="whole-value" type lt="<whole-value>">
+Representing An Entire Property Value: the <<whole-value>> type</h3>
+
+	Several functions defined in this specification
+	can only be used as the "whole value" of a property.
+	For example, ''background-position: toggle(50px 50px, center);'' is valid,
+	but ''background-position: toggle(50px, center) 50px;'' is not.
+	The <<whole-value>> production represents these values.
+
+	All properties implicitly accept a <<whole-value>>
+	as their entire value,
+	just as they accept the [=CSS-wide keywords=]
+	as their entire value.
+
+	When used as a component value of a function,
+	<<whole-value>> also represents any CSS value
+	normally valid as the whole value
+	of the property in which it is used
+	(including additional <<whole-value>> functions).
+	However, some functions may restrict
+	what a <<whole-value>> argument can include.
+
 <!--
 ████████  ███████   ██████    ██████   ██       ████████   ███ ███
    ██    ██     ██ ██    ██  ██    ██  ██       ██        ██     ██
@@ -536,22 +556,16 @@ Toggling Between Values: ''toggle()''</h3>
 
 	The syntax of the ''toggle()'' expression is:
 
-	<pre>toggle( <<toggle-value>> [ ';' <<toggle-value>> ]+ )</pre>
-
-	where <dfn>&lt;toggle-value></dfn> is any CSS value
-	that is valid where the expression is placed.
-	If any of the values inside are not valid,
-	then the entire ''toggle()'' expression is invalid.
-	The ''toggle()'' expression may be used as the value of any property,
-	but must be the only component in that property's value.
+	<pre>toggle( <<whole-value>> [ ';' <<whole-value>> ]+ )</pre>
 
 	Note: This [=functional notation=] uses semicolons to separate arguments
 	rather than the more typical comma
 	because the values themselves can contain commas.
 
-	The ''toggle()'' notation is not allowed to be nested;
-	nor may it contain ''attr()'' or ''calc()'' notations.
-	Declarations containing such constructs are invalid.
+	The ''toggle()'' notation is a <<whole-value>>.
+	However, it is not allowed to be nested,
+	nor may it contain ''attr()'' or ''calc()'' notations;
+	declarations containing such constructs are invalid.
 
 	<div class="example">
 		The following ''toggle()'' examples are all invalid: