List of Manifold CSS Variables
Theme Colours
--manifold-theme--color--primaryA primary colour used throughout the widgets. Set this to your primary brand colour. Used in main CTAs/links.
--manifold-theme--color--secondaryA secondary colour used throughout the widgets. Set this to your secondary brand colour. Used in secondary CTAs/links.
--manifold-theme--color--successA success colour used throughout the widgets. Communicates that an action was completed without failure. Usually a shade of green.
--manifold-theme--color--errorAn error colour used throughout the widgets. Communicates information and/or issues of high severity. Usually a shade of red.
--manifold-theme--color--warningA warning colour used throughout the widgets. Communicates information and/or issues of medium severity. Usually a shade of orange or yellow.
--manifold-theme--color--infoAn informational colour used throughout the widgets. Communicates information and/or issues of low severity. Usually a shade of blue.
Text
--manifold-text--color--bodyThe 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--mutedThe text colour when an element is less emphasised, such as label text for inputs or the label of an unselected tab.
--manifold-text--color--disabledThe text colour for disabled or non-actionable items. It is separated from
mutedso that users have a distinction between “actionable/clickable” (muted) and “non-actionable/non-clickable” (disabled) text displays.--manifold-text--color--primaryThe 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--secondaryThe 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--bodyFont-family of the body text.
--manifold-text--font-family-headerFont-family of the header text.
--manifold-text--font-size--bodyFont size of the body text.
--manifold-text--font-size-headerFont size of the header text.
Border
--manifold-border--colorThe colour used for the borders on elements.
--manifold-border--widthThe width of the borders on elements.
--manifold-border--radiusThe border-radius used for the borders on elements.
--manifold-border--styleThe border-style used for the borders on elements.
Other
--manifold-page--color--backgroundThe colour used for the background of the page.
--manifold-element--color--backgroundThe colour used for the background of elements placed on a higher z-index on the page, such as card elements and popup menus.
Last updated