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 > Component Style Props > Styles API

Naming of CSS classes

We follow the BEM conventions 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 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