@woolf1717/design-tokens
v2.3.0
Published
Design tokens collection for Woolf1717 Design System
Downloads
227
Readme
@woolf1717/design-tokens
Design Tokens are the smallest pieces of the design system — such as colors, typography, spacing, and more. They are used in place of hard-coded values to maintain a scalable and consistent visual system for UI development.
Installation
npm install @woolf1717/design-tokens
Usage
We provide tokens in three formats: CSS, JS and TS. You can import them in your project as needed.
CSS
To use the CSS Custom Properties from our package, add the following import to the main CSS file or to the <head>
of your HTML page:
@import 'path_to_node_modules/@woolf1717/design-tokens/dist/css/tokens.css';
Or in JavaScript, if you use a bundler that supports CSS imports:
import '@woolf1717/design-tokens/dist/css/tokens.css';
JS/TS
import { ButtonTextColor } from '@woolf1717/design-tokens';