Skip to content

Commit

Permalink
[css-color-4][editorial] Put system colors in alphabetical order. Hel…
Browse files Browse the repository at this point in the history 
…ps when checking for complete WPT coverage.
  • Loading branch information
@svgeesus
svgeesus committed Nov 27, 2023
1 parent 0752513 commit 5213ed6
Showing 1 changed file with 32 additions and 39 deletions.
71 changes: 32 additions & 39 deletions css-color-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1805,54 +1805,47 @@ System Colors</h3>
The <<system-color>> keywords are defined as follows:

<dl id="system-color-values" data-dfn-type="value" dfn-for="<system-color>">
<dt><dfn>Canvas</dfn>
<dd><span class="swatch" style="--color: canvas"></span>&nbsp;Background of application content or documents.
<dt><dfn>CanvasText</dfn>
<dd><span class="swatch" style="--color: canvastext"></span>&nbsp;Text in application content or documents.
<dt><dfn>LinkText</dfn>
<dd><span class="swatch" style="--color: linktext"></span>&nbsp;Text in non-active, non-visited links. For light backgrounds, traditionally blue.
<dt><dfn>VisitedText</dfn>
<dd><span class="swatch" style="--color: visitedtext"></span>&nbsp;Text in visited links. For light backgrounds, traditionally purple.
<dt><dfn>AccentColor</dfn>
<dd><span class="swatch" style="--color: accentcolor"></span>&nbsp;Background of accented user interface controls.
<dt><dfn>AccentColorText</dfn>
<dd><span class="swatch" style="--color: accentcolortext"></span>&nbsp;Text of accented user interface controls.
<dt><dfn>ActiveText</dfn>
<dd><span class="swatch" style="--color: activetext"></span>&nbsp;Text in active links. For light backgrounds, traditionally red.

<dd><span class="swatch" style="--color: activetext"></span>&nbsp;Text in active links. For light backgrounds, traditionally red.
<dt><dfn>ButtonBorder</dfn>
<dd><span class="swatch" style="--color: buttonborder"></span>&nbsp;The base border color for push buttons.
<dt><dfn>ButtonFace</dfn>
<dd><span class="swatch" style="--color: buttonface"></span>&nbsp;The face background color for push buttons.
<dd><span class="swatch" style="--color: buttonface"></span>&nbsp;The face background color for push buttons.
<dt><dfn>ButtonText</dfn>
<dd><span class="swatch" style="--color: buttontext"></span>&nbsp;Text on push buttons.
<dt><dfn>ButtonBorder</dfn>
<dd><span class="swatch" style="--color: buttonborder"></span>&nbsp;The base border color for push buttons.

<dd><span class="swatch" style="--color: buttontext"></span>&nbsp;Text on push buttons.
<dt><dfn>Canvas</dfn>
<dd><span class="swatch" style="--color: canvas"></span>&nbsp;Background of application content or documents.
<dt><dfn>CanvasText</dfn>
<dd><span class="swatch" style="--color: canvastext"></span>&nbsp;Text in application content or documents.
<dt><dfn>Field</dfn>
<dd><span class="swatch" style="--color: field"></span>&nbsp;Background of input fields.
<dd><span class="swatch" style="--color: field"></span>&nbsp;Background of input fields.
<dt><dfn>FieldText</dfn>
<dd><span class="swatch" style="--color: fieldtext"></span>&nbsp;Text in input fields.

<dd><span class="swatch" style="--color: fieldtext"></span>&nbsp;Text in input fields.
<dt><dfn>GrayText</dfn>
<dd><span class="swatch" style="--color: graytext"></span>&nbsp;Disabled text.
(Often, but not necessarily, gray.)
<dt><dfn>Highlight</dfn>
<dd><span class="swatch" style="--color: highlight"></span>&nbsp;Background of selected text, for example from ::selection.
<dd><span class="swatch" style="--color: highlight"></span>&nbsp;Background of selected text, for example from ::selection.
<dt><dfn>HighlightText</dfn>
<dd><span class="swatch" style="--color: highlighttext"></span>&nbsp;Text of selected text.

<dt><dfn>SelectedItem</dfn>
<dd><span class="swatch" style="--color: selecteditem"></span>&nbsp;Background of selected items, for example a selected checkbox.
<dt><dfn>SelectedItemText</dfn>
<dd><span class="swatch" style="--color: selecteditemtext"></span>&nbsp;Text of selected items.

<dd><span class="swatch" style="--color: highlighttext"></span>&nbsp;Text of selected text.
<dt><dfn>LinkText</dfn>
<dd><span class="swatch" style="--color: linktext"></span>&nbsp;Text in non-active, non-visited links. For light backgrounds, traditionally blue.
<dt><dfn>Mark</dfn>
<dd><span class="swatch" style="--color: mark"></span>&nbsp;Background of text that has been specially marked
(such as by the HTML <{mark}> element).
<dd><span class="swatch" style="--color: mark"></span>&nbsp;Background of text that has been specially marked
(such as by the HTML <{mark}> element).
<dt><dfn>MarkText</dfn>
<dd><span class="swatch" style="--color: marktext"></span>&nbsp;Text that has been specially marked
(such as by the HTML <{mark}> element).

<dt><dfn>GrayText</dfn>
<dd><span class="swatch" style="--color: graytext"></span>&nbsp;Disabled text.
(Often, but not necessarily, gray.)

<dt><dfn>AccentColor</dfn>
<dd><span class="swatch" style="--color: accentcolor"></span>&nbsp;Background of accented user interface controls.
<dt><dfn>AccentColorText</dfn>
<dd><span class="swatch" style="--color: accentcolortext"></span>&nbsp;Text of accented user interface controls.
<dd><span class="swatch" style="--color: marktext"></span>&nbsp;Text that has been specially marked
(such as by the HTML <{mark}> element).
<dt><dfn>SelectedItem</dfn>
<dd><span class="swatch" style="--color: selecteditem"></span>&nbsp;Background of selected items, for example a selected checkbox.
<dt><dfn>SelectedItemText</dfn>
<dd><span class="swatch" style="--color: selecteditemtext"></span>&nbsp;Text of selected items.
<dt><dfn>VisitedText</dfn>
<dd><span class="swatch" style="--color: visitedtext"></span>&nbsp;Text in visited links. For light backgrounds, traditionally purple.
</dl>

<wpt>
Expand Down

0 comments on commit 5213ed6

Please sign in to comment.