tokens

@surf-kit/tokens

Design tokens for surf-kit — colors, spacing, typography as CSS, JSON, and TypeScript

Part of the surf-kit design system.

Install

npm install @surf-kit/tokens

Usage

CSS Custom Properties

// Light mode (default)
import '@surf-kit/tokens/css';

// Dark mode overrides
import '@surf-kit/tokens/css/dark';

// Brand mode (teal/gold theme)
import '@surf-kit/tokens/css/brand';

TypeScript

import tokens from '@surf-kit/tokens';
// tokens.color.primary, tokens.spacing.md, etc.

JSON

import tokens from '@surf-kit/tokens/json';

How It Works

Built with Style Dictionary v4 using the DTCG format. Source tokens live in the monorepo under src/ and are compiled to CSS, JSON, and TypeScript outputs.

Three CSS builds are generated:

• Light — :root custom properties
• Dark — :root overrides for dark mode
• Brand — [data-color-mode="brand"] overrides for the teal/gold brand theme

Docs

• Storybook
• Contributing

License

Apache-2.0