Skip to content

Commit 4fc9857

Browse files
author
Melanie Richards
committed
[css-color-4] Add new set of CSS system colors (addresses #3804)
1 parent 9f5facd commit 4fc9857

File tree

1 file changed

+73
-33
lines changed

1 file changed

+73
-33
lines changed

‎css-color-4/Overview.bs

Lines changed: 73 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ Representing sRGB Colors: the <<color>> type</h2>
129129
<dfn>&lt;color></dfn> = <<rgb()>> | <<rgba()>> | <<hsl()>> | <<hsla()>> |
130130
<<hwb()>> | <<gray()>> | <<device-cmyk()>> |
131131
<<hex-color>> | <<named-color>> | currentcolor |
132-
<<deprecated-system-color>>
132+
<<system-color>>
133133
</pre>
134134

135135
Some operations work differently on <dfn export>achromatic</dfn> colors.
@@ -209,7 +209,7 @@ Resolving Color values</h2>
209209

210210
<li>
211211
The computed value and used value of
212-
<a>named colors</a> (including <<deprecated-system-color>> colors),
212+
<a>named colors</a> (including <<system-color>> colors),
213213
3 and 6 digits <a>hex colors</a>,
214214
4 and 8 digits <a>hex colors</a> with an explicitly opaque alpha channel,
215215
comma separated ''rgb()'' colors without an alpha channel,
@@ -366,11 +366,18 @@ The RGB hexadecimal notations: ''#RRGGBB''</h3>
366366

367367

368368

369-
<h2 id='named-colors'>
370-
Named Colors</h2>
369+
<h2 id='color-keywords'>
370+
Color Keywords</h2>
371371

372372
In addition to the various numeric syntaxes for <<color>>s,
373-
CSS defines a large set of <dfn id="named-color" lt="named color" export>named colors</dfn> that can be used instead,
373+
CSS defines several sets of color keywords that can be used instead—
374+
each with their own advantages or use cases.
375+
376+
377+
<h3 id="named-colors">
378+
Named Colors</h3>
379+
380+
CSS defines a large set of <dfn id="named-color" lt="named color" export>named colors</dfn>,
374381
so that common colors can be written and read more easily.
375382
A <dfn>&lt;named-color></dfn> is written as an <<ident>>,
376383
accepted anywhere a <<color>> is.
@@ -704,6 +711,57 @@ Named Colors</h2>
704711
Note: this list of colors and their definitions is a superset of the list of <a href="https://www.w3.org/TR/SVG/types.html#ColorKeywords">named colors defined by SVG 1.1</a>.
705712
For historical reasons, this is also referred to as the X11 color set.
706713

714+
715+
<h3 id="css-system-colors">
716+
CSS System Colors</h3>
717+
718+
In addition to being able to assign color keyword values to text, backgrounds, etc.,
719+
CSS defines a set of <dfn id="system-color" type="value" export>&lt;system-color></dfn> values,
720+
to allow authors to specify colors in a manner that integrate them into the user's graphic environment.
721+
722+
<<system-color>>s incur some privacy and security risk, as detailed in [[#priv-sec]].
723+
724+
For systems that do not have a corresponding value,
725+
the specified value should be mapped to the nearest system color value,
726+
or to a default color.
727+
Note that some profiles of CSS may not support System Colors at all.
728+
729+
The following lists the additional values for color-related CSS values and their general meaning.
730+
Any color property can take one of the following names.
731+
These names are case-insensitive and shown here with mixed capitalization for legibility.
732+
733+
<dl id="system-color-values" data-dfn-type="value" dfn-for="<system-color>" export>
734+
<dt><dfn>ActiveText</dfn>
735+
<dd>Text in active links.
736+
<dt><dfn>ButtonFace</dfn>
737+
<dd>The face background color for push buttons.
738+
<dt><dfn>ButtonText</dfn>
739+
<dd>Text on push buttons.
740+
<dt><dfn>Canvas</dfn>
741+
<dd>Background of application content or documents.
742+
<dt><dfn>Field</dfn>
743+
<dd>Background of input fields.
744+
<dt><dfn>FieldText</dfn>
745+
<dd>Text in input fields.
746+
<dt><dfn>GrayText</dfn>
747+
<dd>Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
748+
<dt><dfn>Highlight</dfn>
749+
<dd>Background of item(s) selected in a control.
750+
<dt><dfn>HighlightText</dfn>
751+
<dd>Text of item(s) selected in a control.
752+
<dt><dfn>LinkText</dfn>
753+
<dd>Text in non-active, non-visited links.
754+
<dt><dfn>Text</dfn>
755+
<dd>Text in application content or documents.
756+
<dt><dfn>VisitedText</dfn>
757+
<dd>Text in visited links.
758+
</dl>
759+
760+
Earlier versions of CSS defined additional <<system-color>>s,
761+
which have since been deprecated.
762+
These are documented in [[#deprecated-system-colors]].
763+
764+
707765
<h3 id='transparent-color'>
708766
The ''transparent'' keyword</h3>
709767

@@ -2759,12 +2817,10 @@ Default Style Rules</h2>
27592817

27602818
</pre>
27612819

2762-
<h2 id="system-colors" class="no-num">
2820+
<h2 id="deprecated-system-colors" class="no-num">
27632821
Appendix A: Deprecated CSS System Colors</h2>
27642822

2765-
Earlier versions of CSS defined several additional named color keywords,
2766-
the <dfn>&lt;deprecated-system-color></dfn>s,
2767-
which were meant to take their value from operating system themes.
2823+
Earlier versions of CSS defined several additional <<system-color>>s.
27682824
These color names have been <strong>deprecated</strong>, however,
27692825
as they are insufficient for their original purpose
27702826
(making website elements look like their native OS counterparts),
@@ -2790,10 +2846,6 @@ Appendix A: Deprecated CSS System Colors</h2>
27902846
<dt><dfn>Background</dfn>
27912847
<dd>Desktop background.
27922848

2793-
<dt><dfn>ButtonFace</dfn>
2794-
<dd>The face background color for 3-D elements that appear 3-D due to
2795-
one layer of surrounding border.
2796-
27972849
<dt><dfn>ButtonHighlight</dfn>
27982850
<dd>The color of the border facing the light source for 3-D elements
27992851
that appear 3-D due to one layer of surrounding border.
@@ -2802,22 +2854,9 @@ Appendix A: Deprecated CSS System Colors</h2>
28022854
<dd>The color of the border away from the light source for 3-D elements
28032855
that appear 3-D due to one layer of surrounding border.
28042856

2805-
<dt><dfn>ButtonText</dfn>
2806-
<dd>Text on push buttons.
2807-
28082857
<dt><dfn>CaptionText</dfn>
28092858
<dd>Text in caption, size box, and scrollbar arrow box.
28102859

2811-
<dt><dfn>GrayText</dfn>
2812-
<dd>Grayed (disabled) text. This color is set to #000 if
2813-
the current display driver does not support a solid gray color.
2814-
2815-
<dt><dfn>Highlight</dfn>
2816-
<dd>Item(s) selected in a control.
2817-
2818-
<dt><dfn>HighlightText</dfn>
2819-
<dd>Text of item(s) selected in a control.
2820-
28212860
<dt><dfn>InactiveBorder</dfn>
28222861
<dd>Inactive window border.
28232862

@@ -2880,8 +2919,10 @@ Appendix A: Deprecated CSS System Colors</h2>
28802919
<h2 id="acknowledgments" class="no-num no-ref">
28812920
Acknowledgments</h2>
28822921

2883-
Thanks to Brad Pettit both for writing up color-profiles, and for implementing it. Thanks to Steven Pemberton for his write up on HSL colors.
2884-
Thanks especially to the feedback from Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczy&#x0144;ski, Chris Moschini, Chris Murphy, Christoph P&auml;per, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL working group, and all the rest of the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
2922+
Thanks to Brad Pettit both for writing up color-profiles, and for implementing it.
2923+
Thanks to Steven Pemberton for his write-up on HSL colors.
2924+
Thanks to Melanie Richards for updating the system colors write-up.
2925+
Thanks especially to the feedback from Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczy&#x0144;ski, Chris Moschini, Chris Murphy, Christoph P&auml;per, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL working group, and all the rest of the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
28852926

28862927
And thanks to Chris Lilley for being the resident CSS Color expert.
28872928

@@ -2891,6 +2932,7 @@ Changes</h2>
28912932
<h3 id="changes-from-20160705" class='no-num'>Changes since <a href="http://www.w3.org/TR/2016/WD-css-color-4-20160705/">Working Draft of 05 July 2016</a></h3>
28922933

28932934
<ul>
2935+
<li>Add new list of CSS system colors</li>
28942936
<li>Initial value of the "color" property is now black</li>
28952937
<li>Clarify hue in LCH is modulo 360deg</li>
28962938
<li>Clarify allowed range of L in LCH and Lab, and meaning of L=100</li>
@@ -2968,13 +3010,11 @@ Security and Privacy Considerations {#priv-sec}
29683010
This specification defines "system" colors,
29693011
which theoretically can expose details of the user's OS settings,
29703012
which is a fingerprinting risk.
2971-
However, these values are now defined to be settings-neutral,
2972-
and should be implemented in a generic way that does not actually expose system colors.
29733013

29743014
The system colors,
29753015
if they actually correspond to the user's system colors,
29763016
also pose a security risk,
29773017
as they make it easier for a malware site
2978-
to create a dialog that appears to be a system dialog.
2979-
However, as they are now defined to be "generic",
2980-
this risk should be eliminated.
3018+
to create user interfaces that appear to be from the system.
3019+
However, as several system colors are now defined to be "generic",
3020+
this risk should be mitigated.

0 commit comments

Comments
 (0)