DNA Design Tokens

⚠️ Under Heavy Development — This package is actively being developed. Breaking changes may occur between minor versions during the 0.x release cycle.

Design tokens for the DNA Design System. This package follows W3C Design Tokens specification and uses Style Dictionary to transform tokens defined in JSON into multiple platform outputs.

• Design System
• Figma Specification

Features

• Consistent design tokens across platforms
• JavaScript/TypeScript support
• CSS/SCSS variables
• Semantic naming conventions
• Supports color, typography, sizing, and spacing tokens

Installation

npm install @dnanpm/design-tokens
# or
yarn add @dnanpm/design-tokens
# or
pnpm add @dnanpm/design-tokens

Usage

CSS Custom Properties

@import '@dnanpm/design-tokens/css';

SCSS Variables

@import '@dnanpm/design-tokens/scss';

JavaScript/TypeScript

Namespace and named imports (the javascript/es6 output uses named exports — there is no default export):

import * as tokens from '@dnanpm/design-tokens';
// tokens.ColorSemanticForegroundPrimaryStrong → '#da0070'

or with tree-shaking:

import {
    ColorSemanticForegroundPrimaryStrong,
    ColorSemanticForegroundDefault,
} from '@dnanpm/design-tokens';

CSS Variable Naming Convention

CSS custom properties follow the token path converted to kebab-case:

| Token path | CSS variable | | ----------------------------------- | ------------------------------------------ | | color.semantic.foreground.default | var(--color-semantic-foreground-default) | | spacing.ui.md | var(--spacing-ui-md) | | radius.semantic.full | var(--radius-semantic-full) |

Note: Primitive tokens are excluded from the generated output. Always use semantic tokens.

Contributing

• How to Contribute — contribution guide for design tokens