Backgrounds

Primary Colour

.background {
  background: var(--col-bg-primary);
  background-color: var(--col-bg-primary-o-75);
}

You can define the alpha transparency by appending -o-[alpha] to the end of the variable name.

Secondary Colour

.background {
  background: var(--col-bg-secondary);
  background-color: var(--col-bg-secondary-o-75);
}

You can define the alpha transparency by appending -o-[alpha] to the end of the variable name.

Tertiary Colour

.background {
  background: var(--col-bg-teriary);
}

Alternate Colour

.background {
  background: var(--col-bg-alt);
  background-color: var(--col-bg-alt-75);
}

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

Highlight Colour

.background {
  background: var(--col-bg-highlight);
  background-color: var(--col-bg-highlight-75);
}

Frame Colour

.background {
  background: var(--col-bg-frame);
  background-color: var(--col-bg-frame-75);
}

Dark Colour

.background {
  background: var(--col-bg-dark);
  background-color: var(--col-bg-dark-o-75);
}

You can define the alpha transparency by appending -o-[alpha] to the end of the variable name.

Light Colour

.background {
  background: var(--col-bg-light);
  background-color: var(--col-bg-light-o-75);
}

You can define the alpha transparency by appending -o-[alpha] to the end of the variable name.

States

.background {
  background: var(--col-bg-success);
  background-color: var(--col-bg-info);
}