@mordech/tokens v0.37.0
@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
8 months ago
9 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago