onno

Responsive style props for building themed design systems.

yarn add onno

Features

• Framework agnostic
• Zero dependencies
• First class support for themes and design tokens
• Compatible with most CSS in JS libraries including styled-components and emotion
• Written in TypeScript with comprehensive type definitions and interfaces
• Rigorously tested with 100% code coverage

Usage

import styled from "styled-components"
import { colorSet, spaceSet } from "onno"

const Box = styled.div(colorSet, spaceSet)

// [{ padding: "16px" }]
<Box p={4} />

// [{ margin: "-32px" }]
<Box m={-5} />

// [{ marginLeft: "8px", marginRight: "8px" }, { paddingBottom: "4px" }]
<Box mx={3} pb={2} />

// [{ backgroundColor: "tomato" }, { color: "ivory" }]
<Box backgroundColor="tomato" color="ivory" />

// [{ background: "url(onno.png) center" }]
<Box bg="url(onno.png) center" />

Documentation

• Features
• Render Functions
• API
• Utils

Credits

Onno is an iteration of Styled System rewritten in TypeScript from the ground up. A lot of the ideas are owed to the brilliant work of Brent Jackson and the numerous contributors to this library. Credit is also due to Emotion's facepaint for the original ideas behind responsive prop values.

Author

Matthew Wagerfield

License

MIT