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.

--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.

--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 and popup menus.

Last updated 2 years ago

Was this helpful?