Styling conventions

To maintain consistency across the codebase, we adhere to the following conventions.

Component Styles

This is the styling hierarchy for component styles, staying as close to native Mantine functionality as possible.

CSS modules (opens in a new tab) > Component Style Props (opens in a new tab) > Styles API (opens in a new tab)

Naming of CSS classes

We follow the BEM conventions (opens in a new tab) to ensure a consistent approach when naming the classes.

Colors

Colors should never be hardcoded anywhere in the codebase except for the Mantine theme config. Only colors from the Mantine Color palette (opens in a new tab) or self-defined color palettes should be used.

Margin & Padding

Default is md, but the spacing should be set according to the needs of the specific situation. Only thing important to keep in mind is to stick to the Mantine sizing scale xs --> xl to ensure consistent spacing values.

Radius

Default is sm.

Shadow

Default is sm, it provides a good compromise between flat design and giving some depth to the elements.

Font Weight

Default is 400/normal

Button Styles

Primary Buttons should be of the filled variant.

Secondary Buttons should be of the light variant.

Other buttons that need to be emphasized differently should be of the subtle variant.

Overview Migration Guide