0.3.0 • Published 1 year ago
@pawel-gnat/design-tokens v0.3.0
@pawel-gnat/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 @pawel-gnat/design-tokensUsage
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/@pawel-gnat/design-tokens/dist/css/tokens.css';Or in JavaScript, if you use a bundler that supports CSS imports:
import '@pawel-gnat/design-tokens/dist/css/tokens.css'JS/TS
import { ButtonTextColor } from '@pawel-gnat/design-tokens'