Colors
Colors are a key component of any design system. They are used to convey meaning, attract attention, and provide feedback. Mantle’s color system is designed to be accessible and flexible with dark and high contrast modes.
Tailwind
Mantle uses Tailwind under the hood for all its CSS styling. However, we differ from Tailwind when it comes to colors. Mantle provides a full color library that automatically provides a dark and high contrast modes. This is different from standard Tailwind usage that requires dark class variations. By simply specifying light colors provided by Mantle, you’ll get dark and high contrast modes for free. If you require additional customization, you can provide dark variant classes as an override.
Variables
Mantle’s colors are delivered as CSS variables via Tailwind’s API eg. .text-blue-500. They can be directly accessed via var(--blue-500) but do note that you’ll need to wrap everything in hsl() like so: hsl(var(--blue-500)). This allows for Tailwind operations like text-blue-500/25.
Overrides
Most colors should appropriately swap for sensible values in dark and high contrast modes. However, there are often cases where you’ll need to specify an override. The dark: variant is well-documented on Tailwind’s website. Mantle provides additional variants for high contrast and dark high contrast mode with high-contrast: and dark-high-contrast: respectively.
Functional Colors
Mantle generally limits its color choices to the following functional colors for primary actions, and various states like danger and warnings.
Neutral
Accent
Success
Danger
Warning
Extended Palette
Mantle also supports the entirety of Tailwind’s color palette in light, dark, and high contrast variants. These are to be used when there is no functional meaning behind the color choice. However, we’ve left out the extended collection of Tailwind’s grays eg. slate, zinc, etc. since we only want to use our own custom branded gray.