Skip to content

Commit 8c1fe16

Browse files
svgeesussvgeesus
committed
[css-color-4] Add AccentColor and AccentColorText, fix w3c#7347 
1 parent a334975 commit 8c1fe16

1 file changed

Lines changed: 24 additions & 16 deletions

File tree

‎css-color-4/Overview.bs‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2149,6 +2149,11 @@ System Colors</h3>
21492149
<dt><dfn>GrayText</dfn>
21502150
<dd><span class="swatch" style="--color: graytext"></span>&nbsp;Disabled text.
21512151
(Often, but not necessarily, gray.)
2152+
2153+
<dt><dfn>AccentColor</dfn>
2154+
<dd><span class="swatch" style="--color: mark"></span>&nbsp;Background of accented user interface controls.
2155+
<dt><dfn>AccentColorText</dfn>
2156+
<dd><span class="swatch" style="--color: marktext"></span>&nbsp;Text of accented user interface controls.
21522157
</dl>
21532158

21542159
<wpt>
@@ -2175,6 +2180,7 @@ System Colors</h3>
21752180
* ''ButtonFace'' or ''Field'' background with a ''ButtonBorder'' border and adjacent color ''Canvas'''
21762181
* ''Highlight'' background with ''HighlightText'' foreground.
21772182
* ''SelectedItem'' background with ''SelectedItemText'' foreground.
2183+
* ''AccentColor'' background with ''AccentColorText'' foreground.
21782184
</ul>
21792185

21802186
Additionally, ''GrayText'' is expected to be readable,
@@ -2184,22 +2190,24 @@ System Colors</h3>
21842190
<div class="example" id="ex-SystemCombo">
21852191
For example, the system color combinations in the browser you are currently using:
21862192

2187-
<p>Canvas with CanvasText <span style="background-color:Canvas; color:CanvasText">CanvasText</span></p>
2188-
<p>Canvas with LinkText <span style="background-color:Canvas; color:LinkText">LinkText</span></p>
2189-
<p>Canvas with VisitedText <span style="background-color:Canvas; color:VisitedText">VisitedText</span></p>
2190-
<p>Canvas with ActiveText <span style="background-color:Canvas; color:ActiveText">ActiveText</span></p>
2191-
<p>Canvas with GrayText <span style="background-color:Canvas; color:GrayText">GrayText</span></p>
2192-
<p>Canvas with ButtonBorder and adjacent Canvas <span style="background-color:Canvas; border: ButtonBorder; color:CanvasText; padding: 3px">CanvasText</span><span style="background-color:Canvas; color:CanvasText">Adjacent</span></p>
2193-
<p>ButtonFace with ButtonText <span style="background-color:ButtonFace; color:ButtonText">ButtonText</span></p>
2194-
<p>ButtonFace with ButtonText and ButtonBorder <span style="background-color:ButtonFace; color:ButtonText; border:ButtonBorder; padding: 3px">ButtonText</span></p>
2195-
<p>ButtonFace with GrayText <span style="background-color:ButtonFace; color:GrayText">GrayText</span></p>
2196-
<p>Field with FieldText <span style="background-color:Field; color:FieldText">FieldText</span></p>
2197-
<p>Field with GrayText <span style="background-color:Field; color:GrayText">GrayText</span></p>
2198-
<p>Mark with MarkText <span style="background-color:Mark; color:MarkText">MarkText</span></p>
2199-
<p>Mark with GrayText <span style="background-color:Mark; color:GrayText">GrayText</span></p>
2200-
<p>Highlight with HighlightText <span style="background-color:Highlight; color:HighlightText">HighlightText</span></p>
2201-
<p>Highlight with GrayText <span style="background-color:Highlight; color:GrayText">GrayText</span></p>
2202-
<p>SelectedItem with SelectedItemText <span style="background-color:SelectedItem; color:SelectedItemText">SelectedItemText</span></p>
2193+
<p>Canvas with CanvasText: <span style="background-color:Canvas; color:CanvasText">CanvasText</span></p>
2194+
<p>Canvas with LinkText: <span style="background-color:Canvas; color:LinkText">LinkText</span></p>
2195+
<p>Canvas with VisitedText: <span style="background-color:Canvas; color:VisitedText">VisitedText</span></p>
2196+
<p>Canvas with ActiveText: <span style="background-color:Canvas; color:ActiveText">ActiveText</span></p>
2197+
<p>Canvas with GrayText: <span style="background-color:Canvas; color:GrayText">GrayText</span></p>
2198+
<p>Canvas with ButtonBorder and adjacent Canvas: <span style="background-color:Canvas; border: ButtonBorder; color:CanvasText; padding: 3px">CanvasText</span><span style="background-color:Canvas; color:CanvasText">Adjacent</span></p>
2199+
<p>ButtonFace with ButtonText: <span style="background-color:ButtonFace; color:ButtonText">ButtonText</span></p>
2200+
<p>ButtonFace with ButtonText and ButtonBorder: <span style="background-color:ButtonFace; color:ButtonText; border:ButtonBorder; padding: 3px">ButtonText</span></p>
2201+
<p>ButtonFace with GrayText: <span style="background-color:ButtonFace; color:GrayText">GrayText</span></p>
2202+
<p>Field with FieldText: <span style="background-color:Field; color:FieldText">FieldText</span></p>
2203+
<p>Field with GrayText: <span style="background-color:Field; color:GrayText">GrayText</span></p>
2204+
<p>Mark with MarkText: <span style="background-color:Mark; color:MarkText">MarkText</span></p>
2205+
<p>Mark with GrayText: <span style="background-color:Mark; color:GrayText">GrayText</span></p>
2206+
<p>Highlight with HighlightText: <span style="background-color:Highlight; color:HighlightText">HighlightText</span></p>
2207+
<p>Highlight with GrayText: <span style="background-color:Highlight; color:GrayText">GrayText</span></p>
2208+
<p>SelectedItem with SelectedItemText: <span style="background-color:SelectedItem; color:SelectedItemText">SelectedItemText</span></p>
2209+
<p>AccentColor with AccentColorText: <span style="background-color:AccentColor; color:AccentColorText">AccentColorText</span></p>
2210+
<p>AccentColor with GrayText: <span style="background-color:AccentColor; color:GrayText">GrayText</span></p>
22032211
</div>
22042212

22052213
Earlier versions of CSS defined additional <<system-color>>s,

0 commit comments

Comments
 (0)