tokens

@mordech/tokens

⚠️ This is a work in progress. Please don't use this package until this message is removed.

This is a library for sharing design tokens (colors, typography, breakpoints, etc.) between projects.

Why?

I have a few projects going on, and I want to have one source of truth for design tokens.

Getting started

yarn add @mordech/tokens

CSS

@import '@mordech/tokens/css';

This will load all the css files. If you want to load specific files, you can do the following:

@import '@mordech/tokens/css/tokens.css'; /* CSS vars */
@import '@mordech/tokens/css/reset.css'; /* Reset */
@import '@mordech/tokens/css/fonts.css'; /* Fonts */

to reduce bundle size you can import only the fonts you need:

@import '@mordech/tokens/css/fonts/mono.css';
@import '@mordech/tokens/css/fonts/sans.css';
@import '@mordech/tokens/css/fonts/serif.css';
@import '@mordech/tokens/css/fonts/ui.css';

Fonts are included locally in the package.

CSS in JS (Emotion/Styled Components)

import '@mordech/tokens/css'; // CSS vars

import { colors } from '@mordech/tokens';

Usage

const Component = () => <div style={{ backgroundColor: colors.primary }} />;

License