Nuptial Predicament Mediation

    tonami
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.4 • Public • Published

    Tonami

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

    version downloads per month gzipped size test coverage

    🚨 Warning

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

    Get Started

    yarn add tonami

    Documentation

    https://tonami.dev

    Example

    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 (
        <>
          <Tokens />
          <Global />
          <Banner $color="lightgreen">Welcome!</Banner>
        </>
      );
    }

    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 👍.

    License

    MIT

    Install

    npm i tonami

    DownloadsWeekly Downloads

    84

    Version

    0.4.4

    License

    MIT

    Unpacked Size

    173 kB

    Total Files

    35

    Last publish

    Collaborators

    • rob-gordon