onno

Responsive style props for building themed design systems.

yarn add onno

Features

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

Principles

• Predictable
• Extensible
• Versatile

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: "red", color: "white" }
<Box bgc="red" tc="white" />

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

Author

Matthew Wagerfield

License

MIT