https://github.com/tone-row/tonami

CSS-in-JS library with a familiar API that uses CSS custom properties under the hood
https://github.com/tone-row/tonami

css-in-js css-in-react react styled-components

Last synced: 29 days ago
JSON representation

CSS-in-JS library with a familiar API that uses CSS custom properties under the hood

• Host: GitHub
• URL: https://github.com/tone-row/tonami
• Owner: tone-row
• Created: 2021-06-17T18:57:48.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-30T13:35:16.000Z (about 3 years ago)
• Last Synced: 2024-04-13T21:47:26.812Z (7 months ago)
• Topics: css-in-js, css-in-react, react, styled-components
• Language: TypeScript
• Homepage: https://tonami.dev
• Size: 854 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        


# Tonami

CSS-in-JS library with a familiar API that uses CSS custom properties under the hood

[![version][version-badge]][package]

![downloads per month][downloads]

![gzipped size][size]

![test coverage][coverage]



> 🚨 **Warning**

>

> Until we reach v1.0.0 the API still may change.

## Get Started

```bash

yarn add tonami

```

## Documentation

https://tonami.dev

## Example

```jsx

import { createTokens, styled, createGlobalStyle } from "tonami";

const theme = createTokens({

  fontFamily: "Helvetica",

  borderRadius: "3px",

});

const Global = createGlobalStyle({

  html: {

    fontFamily: theme.fontFamily,

  },

});

const Banner = styled.div({

  borderRadius: theme.borderRadius,

  backgroundColor: ({ $color }) => $color,

});

const { Tokens } = theme;

function App() {

  return (

    <>

      

      

      Welcome!

    >

  );

}

```

## Issues

Please file an issue for bugs or unexpected behavior.

## Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍.

## Publishing while < 1.0.0

- If on main, run `npm version 0.5.5`, otherwise run `npm version 0.5.5-beta.1`

- **Don't forget** to run `yarn build`

- If on main, run `git push && git push origin v0.5.5`, otherwise just push to your branch

- If on main, run `npm publish`, otherwise run `npm publish --tag beta`

## License

MIT

[version-badge]: https://img.shields.io/npm/v/tonami?style=flat-square

[package]: https://www.npmjs.com/package/tonami

[downloads]: https://img.shields.io/npm/dm/tonami?style=flat-square

[size]: https://img.shields.io/bundlephobia/minzip/tonami?style=flat-square

[coverage]: https://img.shields.io/codecov/c/github/tone-row/tonami?style=flat-square