# CSS System Colors

( case-insensitive; `CanvasText` == `canvastext` )

|        fg        |        bg        |  details                      
|------------------+------------------+-------------------------------
| CanvasText       | Canvas           | application content or documents
| AccentColorText  | AccentColor      | accented user interface controls
| HighlightText    | Highlight        | selected items
| SelectedItemText | SelectedItem     | selected items, (checkbox)
| FieldText        | Field            | input fields
| MarkText         | Mark             | `<mark>`
|------------------+------------------+-------------------------------
| ButtonText       | ButtonFace       | controls;
| ButtonBorder     |                  | controls;
| GrayText         |                  | controls; disabled
|------------------+------------------+-------------------------------
| ActiveText       |                  | links; active links
| LinkText         |                  | links; non-active, non-visited links
| VisitedText      |                  | links; visited links

```css
.sys-canvas {
	color: canvastext;
	background-color: canvas;
}
.sys-accent {
	color: accentcolortext;
	background-color: accentcolor;
}
.sys-highlight {
	color: hightlighttext;
	background-color: highlight;
}
.sys-selected {
	color: selecteditemtext;
	background-color: selecteditem;
}
.sys-field {
	color: fieldtext;
	background-color: field;
}
.sys-mark {
	color: marktext;
	background-color: mark;
}
.sys-button {
	color: buttontext;
	background-color: buttonface;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled */
	&[disabled], &:disabled { color: graytext; }
}
.sys-link {
	background-color: color-mix( in srgb, canvas 50%, transparent );
	&:hover, &:focus { color: activetext; }
	&:link { color: linktext; }
	&:visited { color: visitedtext; }
}
```