Skip to main content

Learn by Comparison

A brief overview of tonami for people familiar with styled-components, emotion, or goober.

tonami has two familiar API's

and one unfamiliar one

styled#

Uses objects#

In styled-components, emotion, or goober

const Typography = styled.span`  font-family: cursive;`;

In tonami

const Typography = styled.span({ fontFamily: "cursive" });

Expects $ prefixed props#

In styled-components, emotion, or goober

const Typography = styled.span`  font-family: ${({ fam }) => fam};`;

In tonami

const Typography = styled.span({ fontFamily: ({ $fam }) => $fam });

Learn More

Accepts multiple, conditional arguments#

In styled-components, emotion, or goober

const Typography = styled.span`  font-family: cursive;  ${({ isAlert }) => (isAlert ? `color: red; font-weight: bold;` : ``)}`;

In tonami

const Typography = styled.span(  { fontFamily: "cursive" },  {    color: "red",    fontWeight: "bold",    condition: ({ $isAlert }) => $isAlert,  });

Supports selectors#

In styled-components, emotion, or goober

const Typography = styled.span`  font-family: cursive;
  @media (min-width: 800px) {    font-size: 3em;  }`;

In tonami

const Typography = styled.span({  fontFamily: "cursive",  selectors: {    "@media (min-width: 800px) { & {} }": {      fontSize: "3em",    },  },});

Supports implicit attribute styling#

In styled-components, emotion, or goober

const Input = styled.input`  &:disabled {    opacity: 0.5;  }`;
function App({ isLoading }) {  return <Input disabled={isLoading} />;}

In tonami

const Input = styled.input({  opacity: 0.5,  condition: ({ $isLoading }) => $isLoading,  apply: { disabled: true },});
function App({ isLoading }) {  return <Input $isLoading={isLoading} />;}

createGlobalStyle#

Uses objects, expects $-prefixed props#

In styled-components, emotion, or goober

const Global = createGlobalStyle`  html {    font-family: monospace;  }  a {    color: ${({ color }) => color};  }`;

In tonami

const Global = createGlobalStyle({  html: {    fontFamily: "monospace",  },  a: {    color: ({ $color }) => $color,  },});
  • Expects prefixed props

createTokens#

View the documentation