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>
    </>
  );
}