Skip to content

Commit

Permalink
Merge pull request #4091 from melanierichards/new-system-colors
Browse files Browse the repository at this point in the history 
[css-color-4] Add new set of CSS system colors (addresses #3804)
  • Loading branch information
@svgeesus
svgeesus authored Aug 8, 2019
2 parents 4e18f2d + 4fc9857 commit 8bb9019
Showing 1 changed file with 73 additions and 33 deletions.
106 changes: 73 additions & 33 deletions css-color-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ Representing sRGB Colors: the <<color>> type</h2>
<dfn>&lt;color></dfn> = <<rgb()>> | <<rgba()>> | <<hsl()>> | <<hsla()>> |
<<hwb()>> | <<gray()>> | <<device-cmyk()>> |
<<hex-color>> | <<named-color>> | currentcolor |
<<deprecated-system-color>>
<<system-color>>
</pre>

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

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



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

In addition to the various numeric syntaxes for <<color>>s,
CSS defines a large set of <dfn id="named-color" lt="named color" export>named colors</dfn> that can be used instead,
CSS defines several sets of color keywords that can be used instead—
each with their own advantages or use cases.


<h3 id="named-colors">
Named Colors</h3>

CSS defines a large set of <dfn id="named-color" lt="named color" export>named colors</dfn>,
so that common colors can be written and read more easily.
A <dfn>&lt;named-color></dfn> is written as an <<ident>>,
accepted anywhere a <<color>> is.
Expand Down Expand Up @@ -704,6 +711,57 @@ Named Colors</h2>
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>.
For historical reasons, this is also referred to as the X11 color set.


<h3 id="css-system-colors">
CSS System Colors</h3>

In addition to being able to assign color keyword values to text, backgrounds, etc.,
CSS defines a set of <dfn id="system-color" type="value" export>&lt;system-color></dfn> values,
to allow authors to specify colors in a manner that integrate them into the user's graphic environment.

<<system-color>>s incur some privacy and security risk, as detailed in [[#priv-sec]].

For systems that do not have a corresponding value,
the specified value should be mapped to the nearest system color value,
or to a default color.
Note that some profiles of CSS may not support System Colors at all.

The following lists the additional values for color-related CSS values and their general meaning.
Any color property can take one of the following names.
These names are case-insensitive and shown here with mixed capitalization for legibility.

<dl id="system-color-values" data-dfn-type="value" dfn-for="<system-color>" export>
<dt><dfn>ActiveText</dfn>
<dd>Text in active links.
<dt><dfn>ButtonFace</dfn>
<dd>The face background color for push buttons.
<dt><dfn>ButtonText</dfn>
<dd>Text on push buttons.
<dt><dfn>Canvas</dfn>
<dd>Background of application content or documents.
<dt><dfn>Field</dfn>
<dd>Background of input fields.
<dt><dfn>FieldText</dfn>
<dd>Text in input fields.
<dt><dfn>GrayText</dfn>
<dd>Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
<dt><dfn>Highlight</dfn>
<dd>Background of item(s) selected in a control.
<dt><dfn>HighlightText</dfn>
<dd>Text of item(s) selected in a control.
<dt><dfn>LinkText</dfn>
<dd>Text in non-active, non-visited links.
<dt><dfn>Text</dfn>
<dd>Text in application content or documents.
<dt><dfn>VisitedText</dfn>
<dd>Text in visited links.
</dl>

Earlier versions of CSS defined additional <<system-color>>s,
which have since been deprecated.
These are documented in [[#deprecated-system-colors]].


<h3 id='transparent-color'>
The ''transparent'' keyword</h3>

Expand Down Expand Up @@ -2759,12 +2817,10 @@ Default Style Rules</h2>

</pre>

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

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

<dt><dfn>ButtonFace</dfn>
<dd>The face background color for 3-D elements that appear 3-D due to
one layer of surrounding border.

<dt><dfn>ButtonHighlight</dfn>
<dd>The color of the border facing the light source for 3-D elements
that appear 3-D due to one layer of surrounding border.
Expand All @@ -2802,22 +2854,9 @@ Appendix A: Deprecated CSS System Colors</h2>
<dd>The color of the border away from the light source for 3-D elements
that appear 3-D due to one layer of surrounding border.

<dt><dfn>ButtonText</dfn>
<dd>Text on push buttons.

<dt><dfn>CaptionText</dfn>
<dd>Text in caption, size box, and scrollbar arrow box.

<dt><dfn>GrayText</dfn>
<dd>Grayed (disabled) text. This color is set to #000 if
the current display driver does not support a solid gray color.

<dt><dfn>Highlight</dfn>
<dd>Item(s) selected in a control.

<dt><dfn>HighlightText</dfn>
<dd>Text of item(s) selected in a control.

<dt><dfn>InactiveBorder</dfn>
<dd>Inactive window border.

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

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.
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.
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.
Thanks to Melanie Richards for updating the system colors write-up.
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.

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

Expand All @@ -2891,6 +2932,7 @@ Changes</h2>
<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>

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

The system colors,
if they actually correspond to the user's system colors,
also pose a security risk,
as they make it easier for a malware site
to create a dialog that appears to be a system dialog.
However, as they are now defined to be "generic",
this risk should be eliminated.
to create user interfaces that appear to be from the system.
However, as several system colors are now defined to be "generic",
this risk should be mitigated.

0 comments on commit 8bb9019

Please sign in to comment.