onn

onno

Responsive style props for building themed design systems

Showing:

Popularity

Downloads/wk

17

GitHub Stars

96

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Readme

onno

Code Coverage Bundle Size Build Status License

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

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.

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial