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.

Primary

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

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

Secondary

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

You can define the variation by appending -[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.

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.

Danger

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

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