# List of Manifold CSS Variables

## **Theme Colours**

* `--manifold-theme--color--primary`

  A primary colour used throughout the widgets. Set this to your primary brand colour. Used in main CTAs/links.
* `--manifold-theme--color--secondary`

  A secondary colour used throughout the widgets. Set this to your secondary brand colour. Used in secondary CTAs/links.
* `--manifold-theme--color--success`

  A success colour used throughout the widgets. Communicates that an action was completed without failure. Usually a shade of green.
* `--manifold-theme--color--error`

  An error colour used throughout the widgets. Communicates information and/or issues of high severity. Usually a shade of red.
* `--manifold-theme--color--warning`

  A warning colour used throughout the widgets. Communicates information and/or issues of medium severity. Usually a shade of orange or yellow.
* `--manifold-theme--color--info`

  An informational colour used throughout the widgets. Communicates information and/or issues of low severity. Usually a shade of blue.

## **Text**

* `--manifold-text--color--body`

  The default text colour for readable text. When choosing this colour, make sure it is readable on a background of colour `var(--manifold-page--color--background)`.
* `--manifold-text--color--muted`

  The text colour when an element is less emphasised, such as label text for inputs or the label of an unselected tab.
* `--manifold-text--color--disabled`

  The text colour for disabled or non-actionable items. It is separated from `muted` so that users have a distinction between “actionable/clickable” (`muted`) and “non-actionable/non-clickable” (`disabled`) text displays.
* `--manifold-text--color--primary`

  The default text colour for elements with the primary theme colour as background. When choosing this colour, make sure it is readable on a background of colour `var(--manifold-theme--color--primary)`.
* `--manifold-text--color--secondary`

  The colour used for text of secondary importance. When choosing this colour, make sure it is readable on a background of colour `var(--manifold-theme--color--secondary)`.
* `--manifold-text--font-family--body`

  Font-family of the body text.
* `--manifold-text--font-family-header`

  Font-family of the header text.
* `--manifold-text--font-size--body`

  Font size of the body text.
* `--manifold-text--font-size-header`

  Font size of the header text.

## **Border**

* `--manifold-border--color`

  The colour used for the borders on elements.
* `--manifold-border--width`

  The width of the borders on elements.
* `--manifold-border--radius`

  The border-radius used for the borders on elements.
* `--manifold-border--style`

  The border-style used for the borders on elements.

## **Other**

* `--manifold-page--color--background`

  The colour used for the background of the page.
* `--manifold-element--color--background`

  The colour used for the background of elements placed on a higher z-index on the page, such as [card elements](https://mui.com/material-ui/react-card/#main-content) and popup menus.