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
• Works with any CSS in JS library that supports object styles like 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: "coral" }, { color: "ivory" }]
<Box backgroundColor="coral" 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 written in TypeScript from the ground up. The core ideas are indebted to the brilliant work of Brent Jackson and the numerous contributors to this library. Facepaint also deserves credit for the original idea behind responsive style values.

Onno started life as a rewrite of Styled System in TypeScript following a discussion on GitHub. However, during the course of this rewrite, a number of new ideas, features and refinements to Styled System's API were introduced that eventually warranted another library.

The additional features introduced by onno are presented in detail here.

Author

Matthew Wagerfield

License

MIT