css-system-colors.css

/***************************************************************************************************************
 * This has two sets of classes: system-<name> and <name>. 
 * There is one system-<name> class for every system-color.
 * The <name> classes use one name to reference a 'combo' of related settings.
 * They are less verbose.
 * The system-<name> classes are more verbose, but they allow you to specify the color 
 * and background-color separately.
 **/
/* Class combinations for different UI elements */
/* name(s), the class combos */

.Canvas {
  /* application content or documents */
  color: CanvasText;
  background-color: Canvas;
}

.Accent {
  /* accented user interface controls */
  color: AccentColorText;
  background-color: AccentColor;
}

.Field {
  /* input fields */
  color: FieldText;
  background-color: Field;
}

.Mark {
  /* specially marked with <mark> tag*/
  color: MarkText;
  background-color: Mark;
}

.Button {
  /* push buttons */
  color: ButtonText;
  background-color: ButtonFace;
  border-color: ButtonBorder;
}

.Selected {
  /* selected items */
  color: SelectedItemText;
  background-color: SelectedItem;
}

::selection {
  /* Text of selected text */
  color: HighlightText;
  /* Background of selected text, for example from : :selection */
  background-color: Highlight;
}

/* NOTE: Remove the 'some' below! 
#someID {*/
a:link {
  /* non-active, non-visited links */
  color: LinkText;
}
a:visited {
  /* visited links */
  color: VisitedText;
}

/* NOTE: Doesn't exist at https://www.w3.org/TR/css-color-4/#css-system-colors
  a:hover {
    /* hovered links *
    color: FocusText; /* Focused links color *
  }
 

a:focus {
  /* focused links *
  color: ActiveText; /* BUG: no special color?*
} */
a:active {
  /* active links */
  color: ActiveText;
}

.Disabled {
  /* disabled text */
  color: GrayText;
}

/***************************************************************************************
 * Specific class names for each system color
 **/
.system-Canvas {
  /* Background of application content or documents */
  background-color: Canvas;
}

.system-CanvasText {
  /* Text in application content or documents */
  color: CanvasText;
}

/*********************************
 * Input elements
 */

.system-AccentColor {
  /* Background of accented user interface controls */
  background-color: AccentColor;
}

.system-AccentColorText {
  /* Text of accented user interface controls */
  color: AccentColorText;
}

.system-Field {
  /* Background of input fields */
  background-color: Field;
}

.system-FieldText {
  /* Text in input fields */
  color: FieldText;
}

/*********************************
 * Button elements
 */
.system-ButtonBorder {
  /* The base border color for push buttons */
  color: ButtonBorder;
}

.system-ButtonFace {
  /* The face background color for push buttons */
  background-color: ButtonFace;
}

.system-ButtonText {
  /* Text on push buttons */
  color: ButtonText;
}

/*********************************
 * Links
 */

.system-LinkText {
  /* Text in non-active, non-visited links. For light backgrounds, traditionally blue */
  color: LinkText;
}

.system-ActiveText {
  /* Text in active links. For light backgrounds, traditionally red */
  color: ActiveText;
}

.system-VisitedText {
  /* Text in visited links. For light backgrounds, traditionally purple */
  color: VisitedText;
}

/*********************************
 * Other miscellaneous
 */

.system-GrayText {
  /* Disabled text (Often, but not necessarily, gray) */
  color: GrayText;
}

.system-Mark {
  /* Background of text that has been specially marked (such as by the HTML mark element) */
  background-color: Mark;
}

.system-MarkText {
  /* Text that has been specially marked (such as by the HTML mark element) */
  color: MarkText;
}

::selection {
  /* Text of selected text */
  color: HighlightText;
  /* Background of selected text, for example from : :selection */
  background-color: Highlight;
}

.system-SelectedItem {
  /* Background of selected items, for example a selected checkbox */
  background-color: SelectedItem;
}

.system-SelectedItemText {
  /* Text of selected items */
  color: SelectedItemText;
}