Design System

Visual Style

Components

Patterns

Resources

Style props

Nulogy's components use styled-system to apply groups of style props to different types of components. These props correspond to their css equivalents and allow individual manipulation of a component's style.

Prop Categories

CategoryProps

space

margin, marginTop, marginRight, marginBottom, marginLeft, marginX, marginY, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingX, paddingY, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py,

layout

width, height, minWidth, minHeight, maxWidth, maxHeight, display, verticalAlign, size

typography

fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, fontStyle, textAlign

colour

color, backgroundColor, bg

border

border, borderWidth, borderStyle, borderColor, borderRadius, borderTop, borderRight, borderBottom, borderLeft, borderX, borderY,

position

position, zIndex, top, right, bottom, left

For more information on each of these props, see the styled-system docs.

Usage

To see which props each component includes, see that component's documentation. But in general, the following rules apply:

  • Block-level components (Alerts, Buttons, Cards, etc.) have access to space props.
  • Text components (Text, Headings, Link) also have access to typography and colour props.
  • The Box component has access to layout props and can be used to add borders, colours, and boxShadows around anything.

Theme

Styled-system will check the theme and use that if a key matches, e.g setting a textColor to blue will display Nulogy's #216beb, instead of the html default. If a key can't be found, it will be processed as a CSS value.