Styled system ()

While we strive to provide you as a developer with a wide range of standalone components, the final end product will always be a collection of pages. These pages consist of patterns, which in turn are built out of our components.

These patterns and pages are compositions, where there is a certain relationship between the components. A spatial relationship needs to be established to result in a user-friendly browsing experience.

This calls for a system that is built upon our design system, that allows all components a certain degree of extensibility. Our implementation is based on styled-system which promises it "lets you quickly build custom UI components with constraint-based style props based on scales defined in your theme".

Our implementation allows you to extend a component's styling with a certain set of properties. These properties are different per component (e.g. we won't allow you to change the padding on a Button, but you can freely alter padding on a Paper).

Every component will display its System Props under its Propstable, so you can quickly check what is allowed and what properties are withheld.

All system props also fall in certain categories, and whitelisted properties from the same category will always be allowed as a whole.

BackgroundProps

BorderProps

BorderRadiusProps

ColorProps

DisplayProps

FlexProps

FlexParentProps

FloatProps

HeightProps

MarginProps

PaddingProps

PositioningProps

TextProps

WidthProps