[css-variables] Specify a <custom-property-name> production, use it in var() definition.

Author: tabatkins

css-variables/Overview.bs

@@ -65,6 +65,8 @@ Defining Custom Properties: the '--*' family of properties</h2>
 	A <dfn export>custom property</dfn> is any property
 	whose name starts with two dashes (U+002D HYPHEN-MINUS),
 	like ''--foo''.
+	The <dfn>&lt;custom-property-name></dfn> production corresponds to this:
+	it's defined as any valid <a>identifier</a> that starts with two dashes.
 	<a>Custom properties</a> are solely for use by authors and users;
 	CSS will never give them a meaning beyond what is presented here.
 
@@ -351,7 +353,7 @@ Using Cascading Variables: the ''var()'' notation</h2>
 	The syntax of ''var()'' is:
 
 	<pre class='prod'>
-	<dfn>var()</dfn> = var( <<custom-ident>> [, <<any-value>> ]? )
+	<dfn>var()</dfn> = var( <<custom-property-name>> [, <<any-value>> ]? )
 	</pre>
 
 	The ''var()'' function can be used in place of any part of a value in any property on an element.

css-variables/Overview.html

@@ -56,7 +56,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Custom Properties for Cascading Variables Module Level 1</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=20140331>31 March 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140401>1 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-variables/>http://dev.w3.org/csswg/css-variables/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-variables-1/>http://www.w3.org/TR/css-variables-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-variables/>http://dev.w3.org/csswg/css-variables/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css-variables-1-20130620/ rel=previous>http://www.w3.org/TR/2013/WD-css-variables-1-20130620/</a><dd><a href=http://www.w3.org/TR/2013/WD-css-variables-20130312/ rel=previous>http://www.w3.org/TR/2013/WD-css-variables-20130312/</a><dd><a href=http://www.w3.org/TR/2012/WD-css-variables-20120410/ rel=previous>http://www.w3.org/TR/2012/WD-css-variables-20120410/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-variables%5D%20feedback">www-style@w3.org</a>
@@ -178,6 +178,8 @@ <h2 class="heading settled heading" data-level=2 id=defining-variables><span cla
 <p>	A <dfn data-dfn-type=dfn data-export="" id=custom-property>custom property<a class=self-link href=#custom-property></a></dfn> is any property
 	whose name starts with two dashes (U+002D HYPHEN-MINUS),
 	like <span class=css data-link-type=maybe title=--foo>--foo</span>.
+	The <dfn class=css-code data-dfn-type=type data-export="" id=typedef-custom-property-name>&lt;custom-property-name&gt;<a class=self-link href=#typedef-custom-property-name></a></dfn> production corresponds to this:
+	it’s defined as any valid <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#identifier title=identifier>identifier</a> that starts with two dashes.
 	<a data-link-type=dfn href=#custom-property title="custom properties">Custom properties</a> are solely for use by authors and users;
 	CSS will never give them a meaning beyond what is presented here.
 
@@ -423,7 +425,7 @@ <h2 class="heading settled heading" data-level=3 id=using-variables><span class=
 	with the <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> function.
 	The syntax of <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> is:
 
-	<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-var>var()<a class=self-link href=#funcdef-var></a></dfn> = var( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> [, <a class="production css-code" data-link-type=type href=#typedef-any-value title="<any-value>">&lt;any-value&gt;</a> ]? )
+	<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-var>var()<a class=self-link href=#funcdef-var></a></dfn> = var( <a class="production css-code" data-link-type=type href=#typedef-custom-property-name title="<custom-property-name>">&lt;custom-property-name&gt;</a> [, <a class="production css-code" data-link-type=type href=#typedef-any-value title="<any-value>">&lt;any-value&gt;</a> ]? )
 </pre>
 <p>	The <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> function can be used in place of any part of a value in any property on an element.
 	The <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> function can not be used as
@@ -829,6 +831,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>--*, <a href=#propdef--- title="section 2">2</a>
 <li>&lt;any-value&gt;, <a href=#typedef-any-value title="section 2.1">2.1</a>
 <li>custom property, <a href=#custom-property title="section 2">2</a>
+<li>&lt;custom-property-name&gt;, <a href=#typedef-custom-property-name title="section 2">2</a>
 <li>invalid at computed-value time, <a href=#invalid-at-computed-value-time title="section 3.1">3.1</a>
 <li>pending-substitution value, <a href=#pending-substitution-value title="section 3.2">3.2</a>
 <li>substitute a var(), <a href=#substitute-a-var title="section 3">3</a>