@designsystem_test/tokens

Design tokens for the design system (colors, typography, spacing)

📦 Installation

npm install @designsystem_test/tokens

🚀 Usage

Import Tokens

import { colors, typography, spacing } from '@designsystem_test/tokens';

// Use tokens
const primaryColor = colors.primary;
const headingFont = typography.display1;
const defaultSpacing = spacing.md;

Import CSS Variables

import '@designsystem_test/tokens/styles.css';

This provides CSS variables like:

• --color-primary
• --color-secondary
• --font-display1-size
• --spacing-md

📚 Available Tokens

Colors

• primary, secondary, tertiary
• neutral shades (50-950)
• success, warning, error, info

Typography

• Display styles: display1-display5 (60px-40px)
• Title styles: title1-title5 (36px-20px)
• Body styles: body1-body2 (18px-16px)
• Label styles: label1-label3 (14px-10px)

Spacing

• xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl

📄 License

MIT