Typography

Text Colours

These can be used for color or fill properties.

.colour {
  color: var(--col-text-primary);
  fill var(--col-text-secondary);
}

You can define the variation by appending -[variation] to the end of the variable name.

States

.colour {
  color: var(--col-text-success);
  fill var(--col-text-info);
}

Link Colours

These can be used for any link properties.

Default

a {
  color: var(--col-link-default);
  color: var(--col-link-default-active);
}

You can define the variation by using --col-text-[variation] to the end of the variable name.

Alternate

a {
  color: var(--col-link-alt);
  color: var(--col-link-alt-active);
}

You can define the variation by appending -[variation] to the end of the variable name.

Highlight

a {
  color: var(--col-link-highlight);
  color: var(--col-link-highlight-active);
}

You can define the variation by appending -[variation] to the end of the variable name.

Light

a {
  color: var(--col-link-light);
  color: var(--col-link-light-active);
}

You can define the variation by appending -[variation] to the end of the variable name.