Install
yarn add @tedconf/monterey
npx installPeerdeps @tedconf/montereyIn 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
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>
)
};