Colour
System Colors section of the CSS Color spec| Token | Description | Example |
|---|---|---|
var(--Canvas)
|
Background of application content or documents. |
Light:
Dark: |
var(--CanvasText)
|
Text in application content or documents. |
Light:
Dark: |
var(--LinkText)
|
Text in non-active, non-visited links. For light backgrounds, traditionally blue. |
Light:
Dark: |
var(--VisitedText)
|
Text in visited links. For light backgrounds, traditionally purple. |
Light:
Dark: |
var(--ActiveText)
|
Text in active links. For light backgrounds, traditionally red. |
Light:
Dark: |
var(--ButtonFace)
|
The face background color for push buttons. |
Light:
Dark: |
var(--ButtonText)
|
Text on push buttons. |
Light:
Dark: |
var(--ButtonBorder)
|
The base border color for push buttons. |
Light:
Dark: |
var(--Field)
|
Background of input fields. |
Light:
Dark: |
var(--FieldText)
|
Text in input fields. |
Light:
Dark: |
var(--Highlight)
|
Background of selected text, for example from `::selection`. |
Light:
Dark: |
var(--HighlightText)
|
Text of selected text. |
Light:
Dark: |
var(--SelectedItem)
|
Background of selected items, for example a selected checkbox. |
Light:
Dark: |
var(--SelectedItemText)
|
Text of selected items. |
Light:
Dark: |
var(--Mark)
|
Background of text that has been specially marked (such as by the HTML mark element). |
Light:
Dark: |
var(--MarkText)
|
Text that has been specially marked (such as by the HTML mark element). |
Light:
Dark: |
var(--GrayText)
|
Disabled text. (Often, but not necessarily, gray.) |
Light:
Dark: |
var(--AccentColor)
|
Background of accented user interface controls. |
Light:
Dark: |
var(--AccentColorText)
|
Text of accented user interface controls. |
Light:
Dark: |