<dl>
  <dt class="AccentColor">AccentColor</dt>
  <dd>AccentColor. Background of accented user interface controls</dd>

  <dt class="AccentColorText">AccentColorText</dt>
  <dd>AccentColorText. Text of accented user interface controls</dd>

  <dt class="ActiveText">ActiveText</dt>
  <dd>ActiveText. Text of active links</dd>

  <dt class="ButtonBorder">ButtonBorder</dt>
  <dd>ButtonBorder. Base border color of controls</dd>

  <dt class="ButtonFace">ButtonFace</dt>
  <dd>ButtonFace. Background color of controls</dd>

  <dt class="ButtonText">ButtonText</dt>
  <dd>ButtonText. Text color of controls</dd>

  <dt class="Canvas">Canvas</dt>
  <dd>Canvas. Background of application content or documents</dd>

  <dt class="CanvasText">CanvasText</dt>
  <dd>CanvasText. Text color in application content or documents</dd>

  <dt class="Field">Field</dt>
  <dd>Field. Background of input fields</dd>

  <dt class="FieldText">FieldText</dt>
  <dd>FieldText. Text in input fields</dd>

  <dt class="GrayText">GrayText</dt>
  <dd>GrayText. Text color for disabled items (e.g. a disabled control)</dd>

  <dt class="Highlight">Highlight</dt>
  <dd>Highlight. Background of selected items</dd>

  <dt class="HighlightText">HighlightText</dt>
  <dd>HighlightText. Text color of selected items</dd>

  <dt class="LinkText">LinkText</dt>
  <dd>LinkText. Text of non-active, non-visited links</dd>

  <dt class="Mark">Mark</dt>
  <dd>Mark. Background of text that has been specially marked (such as by the HTML mark element)</dd>

  <dt class="MarkText">MarkText</dt>
  <dd>MarkText. Text that has been specially marked (such as by the HTML mark element)</dd>

  <dt class="VisitedText">VisitedText</dt>
  <dd>VisitedText. Text of visited links</dd>
</dl>
  
<p><small>Switch to dark mode to see which colors change (different per browser)</small></p>

/* System Colors */
.AccentColor { background-color: AccentColor; }
.AccentColorText { background-color: AccentColorText; }
.ActiveText { background-color: ActiveText; }
.ButtonBorder { background-color: ButtonBorder; }
.ButtonFace { background-color: ButtonFace; }
.ButtonText { background-color: ButtonText; }
.Canvas { background-color: Canvas; }
.CanvasText { background-color: CanvasText; }
.Field { background-color: Field; }
.FieldText { background-color: FieldText; }
.GrayText { background-color: GrayText; }
.Highlight { background-color: Highlight; }
.HighlightText { background-color: HighlightText; }
.LinkText { background-color: LinkText; }
.Mark { background-color: Mark; }
.MarkText { background-color: MarkText; }
.VisitedText { background-color: VisitedText; }

body {
  background-color: Canvas;
  color: CanvasText;
  color-scheme: light dark;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
dl {
  display: grid;
  grid-template-columns: 1fr 4fr;
}
dd { color: GrayText; font-size: small; }
dd, dt {
  border-block-end: 1px solid GrayText;
  padding: 1ch;
}
dt { color: transparent; }