@createnew/tokens

Design tokens for the CreateNew Design System.

Installation

npm install @createnew/tokens

Usage

CSS Custom Properties

Import the CSS file to get all tokens as CSS custom properties:

@import "@createnew/tokens/tokens.css";

Or in your HTML:

<link rel="stylesheet" href="node_modules/@createnew/tokens/dist/tokens.css">

TypeScript

Import tokens as TypeScript objects:

import { tokens, semanticTokens, textStyles } from "@createnew/tokens";

const primaryColor = tokens.semantic.color.brand.primary;

Token Structure

• Core Tokens: Raw values (colors, spacing, radii, shadows, typography)
• Semantic Tokens: Component-agnostic semantic values (surface, text, brand, border)
• Text Styles: Composite typographic styles (body, caption, title, display)

Building

npm run build

This generates:

• dist/tokens.js - TypeScript exports
• dist/tokens.css - CSS custom properties (generated by Style Dictionary)

Token Source

Tokens are defined in JSON format in the tokens/ directory:

• tokens/core.json - Core design tokens (colors, spacing, typography, etc.)
• tokens/semantic.json - Semantic tokens (references core tokens)
• tokens/text-styles.json - Composite text styles

Style Dictionary transforms these JSON files into CSS custom properties and TypeScript exports.

Documentation

For comprehensive documentation, architecture details, and complete examples, see the main README.