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

Last updated 2 years ago

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.