npm:@tedconf/monterey

Usage no npm install needed!

<script type="module">
  import tedconfMonterey from 'https://cdn.skypack.dev/@tedconf/monterey';
</script>

README

Install

yarn add @tedconf/monterey
npx installPeerdeps @tedconf/monterey

In your app root, wrap it in Monterey's theme provider, which gives all components inside of it access to the design tokens:

import { Monterey } from '@tedconf/monterey';

const App = () => <Monterey>{'…your app content'}</Monterey>;

Components

Tokens
Text
View

Notes

If you need them, you can access token values in other ways:

/** @jsx jsx */
import { jsx } from '@emotion/core';
import { sx, useTheme } from '@tedconf/monterey';

const CustomThing = () => {
  const theme = useTheme();
  return (
    <React.Fragment>
      {theme.colors.map(color) => (
        <FancyComponent css={sx({ padding: 1, fontSize: [2, 4] })}>
          {color[0]}
        </FancyComponent>
      )}
    </React.Fragment>
  )
};