0.37.0 • Published 8 months ago

@mordech/tokens v0.37.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

@mordech/tokens

Published on npm

⚠️ 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

License: MPL 2.0

0.37.0

8 months ago

0.36.0

9 months ago

0.35.0

1 year ago

0.34.0

1 year ago

0.33.0

2 years ago

0.32.0

2 years ago

0.31.1

2 years ago

0.30.0

2 years ago

0.29.0

2 years ago

0.29.1

2 years ago

0.28.0

2 years ago

0.27.0

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.25.0

2 years ago

0.24.1

2 years ago

0.24.0

2 years ago

0.23.0

2 years ago

0.22.0

3 years ago

0.21.0

3 years ago

0.20.1

3 years ago

0.20.0

3 years ago

0.19.0

3 years ago

0.18.5

3 years ago

0.18.4

3 years ago