getColorClass()function

CSS class that applies color tinting to an element.

• Sets the key .tint-50 color for an element (e.g. --color-purple or --color-primary) based on color="purple" or color="primary"
• Full set of shades e.g. --tint-20 and --tint-95 are created for the selected color.
• Element can now compose these shades to style itself using the selected color.

The color variant prop moves the tint ladder anchor to a named palette colour — <Card color="red">, <Tag color="primary">. It's an override for one-off recolouring of a component in a page; for an app-wide look, override the palette variables below in a theme file instead.

getColorClass({ color }) returns getClass(TINT_CLASS, "<colour>") — it moves --tint-50 to the chosen colour and recomposes the ladder, so the whole subtree retints. See TINT_CLASS for how the ladder works.

Theme variables

The following :root variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app. Override a palette colour to re-aim every variant and status that maps to it.

Palette

Semantic

Brand