8000 [css-color] Syntax highlighting · w3c/csswg-drafts@e2b3360 · GitHub
Skip to content

Commit e2b3360

Browse files
tabatkinstabatkins
committed
[css-color] Syntax highlighting
--HG-- extra : rebase_source : 923f50b14d81bb7e75e06dc10db713867c4ac019
1 parent e6ae441 commit e2b3360

2 files changed

Lines changed: 1207 additions & 759 deletions

File tree

‎css-color/Overview.bs‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1897,8 +1897,8 @@ RGBA Adjustment</h3>
18971897
altering the amount of red, green, blue, or alpha in the color.
18981898

18991899
<dl>
1900-
<dt>''[red( | green( | blue( | alpha( | a(] ['+' | '-']? [<<number>> | <<percentage>>] )''
1901-
<dt>''[red( | green( | blue( | alpha( | a(] '*' <<percentage>> )''
1900+
<dt><css>[red( | green( | blue( | alpha( | a(] ['+' | '-']? [<<number>> | <<percentage>>] )</css>
1901+
<dt><css>[red( | green( | blue( | alpha( | a(] '*' <<percentage>> )</css>
19021902
<dd>
19031903
Sets or adjust the red, blue, green, or alpha channels of the <var>base color</var>.
19041904

@@ -1912,7 +1912,7 @@ RGBA Adjustment</h3>
19121912
If the operator is ''*'',
19131913
the given channel is multipled by the given value.
19141914

1915-
<dt>''rgb( ['+' | '-']? [<<number>> | <<percentage>>]{3} )''
1915+
<dt><css>rgb( ['+' | '-']? [<<number>> | <<percentage>>]{3} )</css>
19161916
<dd>
19171917
Adjusts the <var>base color</var> in the red, green, and blue channels simultaneously.
19181918
All three channels are interpreted as the matching type (<<number>> or <<percentage>>)
@@ -1921,7 +1921,7 @@ RGBA Adjustment</h3>
19211921
the second value adjusting the green channel,
19221922
and the third value adjusting the blue channel.
19231923

1924-
<dt>''rgb( [&apos;+&apos; | &apos;-&apos;] <<hash-token>> )''
1924+
<dt><css>rgb( [&apos;+&apos; | &apos;-&apos;] <<hash-token>> )</css>
19251925
<dd>
19261926
Identical to the previous clause,
19271927
except that the adjustments to the three channels are specified in hexadecimal format;
@@ -1938,7 +1938,7 @@ RGBA Adjustment</h3>
19381938
resulting in a final color of ''#ff4400''.
19391939
</div>
19401940

1941-
<dt>''rgb( '*' <<percentage>> )''
1941+
<dt><css>rgb( '*' <<percentage>> )</css>
19421942
<dd>
19431943
The red, green, and blue channels of the <var>base color</var> are multiplied by the given value.
19441944
</dl>
@@ -1957,7 +1957,7 @@ HSL/HWB Adjustment</h3>
19571957
Similarly, the ''color()'' function allows a color to be adjusted in these "virtual channels".
19581958

19591959
<dl>
1960-
<dt>''[hue( | h(] ['+' | '-' | '*']? <<angle>> )''
1960+
<dt><css>[hue( | h(] ['+' | '-' | '*']? <<angle>> )</css>
19611961
<dd>
19621962
Sets or adjusts the hue of the <var>base color</var>,
19631963
when <var>base color</var> is interpreted as an HSL color.
@@ -1972,10 +1972,10 @@ HSL/HWB Adjustment</h3>
19721972
If the <a>hue angle is null</a>,
19731973
the adjuster instead does nothing.
19741974

1975-
<dt>''[saturation( | s(] ['+' | '-' | '*']? <<percentage>> )''
1976-
<dt>''[lightness( | l(] ['+' | '-' | '*']? <<percentage>> )''
1977-
<dt>''[whiteness( | w(] ['+' | '-' | '*']? <<percentage>> )''
1978-
<dt>''[blackness( | b(] ['+' | '-' | '*']? <<percentage>> )''
1975+
<dt><css>[saturation( | s(] ['+' | '-' | '*']? <<percentage>> )</css>
1976+
<dt><css>[lightness( | l(] ['+' | '-' | '*']? <<percentage>> )</css>
1977+
<dt><css>[whiteness( | w(] ['+' | '-' | '*']? <<percentage>> )</css>
1978+
<dt><css>[blackness( | b(] ['+' | '-' | '*']? <<percentage>> )</css>
19791979
<dd>
19801980
Sets or adjusts the saturation, lightness, whiteness, or blackness of the <var>base color</var>,
19811981
when <var>base color</var> is interpreted as an HSL or HWB color, as appropriate.
@@ -2563,7 +2563,7 @@ The RGBColor Object</h3>
25632563
callback ColorStringifierCallback = DOMString (CSSColor color, any ...args);
25642564
</pre>
25652565

2566-
<dl dfn-for="RGBColor">
2566+
<dl dfn-for="RGBColor" class="lang-javascript">
25672567
<dt><dfn constructor title="RGBColor(r, g, b, a) | RGBColor(r, g, b)">RGBColor</dfn>(double r, double g, double b, optional double a=1)
25682568
<dd link-for="RGBColor">
25692569
Defined as follows in ECMAScript:
@@ -2761,7 +2761,7 @@ The HSLColor Class</h3>
27612761
};
27622762
</pre>
27632763

2764-
<dl dfn-for="HSLColor">
2764+
<dl dfn-for="HSLColor" class="lang-javascript">
27652765
<dt><dfn constructor title="HSLColor(h, s, l, a) | HSLColor(h, s, l)">HSLColor</dfn>(double h, double s, double l, optional double a=1)
27662766
<dd>
27672767
Defined as follows in ECMAScript:
@@ -2968,7 +2968,7 @@ The HexColor Class</h3>
29682968
};
29692969
</pre>
29702970

2971-
<dl dfn-for="HexColor">
2971+
<dl dfn-for="HexColor" class="lang-javascript">
29722972
<dt><dfn constructor title="HexColor(r, g, b, a) | HexColor(r, g, b)">HexColor</dfn>([Clamp] octet r, [Clamp] octet g, [Clamp] octet b, optional [Clamp] octet a=255)
29732973
<dd>
29742974
Defined as follows in ECMAScript:
@@ -3131,7 +3131,7 @@ The CMYKColor Class</h3>
31313131
};
31323132
</pre>
31333133

3134-
<dl dfn-for="CMYKColor">
3134+
<dl dfn-for="CMYKColor" class="lang-javascript">
31353135
<dt><dfn constructor title="CMYKColor(c, m, y, k, a, fallb 9F7E ack) | CMYKColor(c, m, y, k, a) | CMYKColor(c, m, y, k)">CMYKColor</dfn>(double c, double m, double y, double k, optional double a=1, optional RGBColor? fallback=null)
31363136
<dd>
31373137
Defined as follows in ECMAScript:
@@ -3349,7 +3349,7 @@ Adding New Color-Manipulating Methods</h4>
33493349
here's how you would add a "lightness" method to all color classes,
33503350
which computes the approximate perceptual lightness of a color:
33513351

3352-
<pre>
3352+
<pre class="lang-javascript">
33533353
RGBColor.prototype.lightness = function() {
33543354
return .2126 * Math.pow(this.r, 2.2) +
33553355
.7152 * Math.pow(this.g, 2.2) +
@@ -3408,7 +3408,7 @@ Adding New Color Classes</h4>
34083408
For example,
34093409
here is the bare minimum of code required to correctly implement an <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">HSV</a> color class:
34103410

3411-
<pre>
3411+
<pre class="lang-javascript">
34123412
function HSVColor(...args) {
34133413
if(args.length == 1 && args[0] instanceof RGBColor) {
34143414
let {r, g, b, a} = args[0];
@@ -3528,7 +3528,7 @@ Adding New Color Classes</h4>
35283528
so let's see what it looks like with all of these additions:
35293529

35303530
<div class='example'>
3531-
<pre>
3531+
<pre class="lang-javascript">
35323532
function HSVColor(...args) {
35333533
const undefined = void 0;
35343534

@@ -3690,19 +3690,19 @@ The CSSColor Object</h3>
36903690

36913691
The following code sets <code>color</code> to a {{HexColor}} object:
36923692

3693-
<pre>var color = CSSColor.parse("#96c");</pre>
3693+
<pre class="lang-javascript">var color = CSSColor.parse("#96c");</pre>
36943694

36953695
While this code sets <code>color</code> to an {{HSLColor}} object:
36963696

3697-
<pre>var color = CSSColor.parse("hsl(120deg, 100%, 50%)");</pre>
3697+
<pre class="lang-javascript">var color = CSSColor.parse("hsl(120deg, 100%, 50%)");</pre>
36983698

36993699
Note that this returns a color class matching the type of input provided to it.
37003700
If a particular color class is desired,
37013701
the class's constructor can be passed a string instead.
37023702
For example, the following will set <code>color</code> to an {{RGBColor}} object,
37033703
even though it uses the ''hsl()'' function:
37043704

3705-
<pre>var color = new RGBColor("hsl(120deg, 100%, 50%)")</pre>
3705+
<pre class="lang-javascript">var color = new RGBColor("hsl(120deg, 100%, 50%)")</pre>
37063706
</div>
37073707

37083708
<pre class='idl'>
@@ -3725,7 +3725,7 @@ The CSSColor Object</h3>
37253725
};
37263726
</pre>
37273727

3728-
<dl dfn-for=CSSColor>
3728+
<dl dfn-for=CSSColor class="lang-javascript">
37293729
<dt><dfn constructor>CSSColor()</dfn>
37303730
<dd>
37313731
Throw an XXXError.

0 commit comments

Comments
 (0)