dmonphx

Joined on 2026-02-19

@phoenix-tekhne/tokens (0.3.0)

Published 2026-05-28 07:20:13 -07:00 by dmonphx

Set up this registry in your project .npmrc file:

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/

To install the package using npm, run the following command:

npm install @phoenix-tekhne/tokens@0.3.0

or add it to the package.json file:

"@phoenix-tekhne/tokens": "0.3.0"

For more information on the npm registry, see the documentation.

@phoenix-tekhne/tokens

Design tokens for the Phoenix Tekhne Design System.

Overview

Tokens provides the foundational design values used across all Phoenix Tekhne packages. Using Style Dictionary, we generate CSS variables and TypeScript tokens from a centralized source of truth.

Structure

src/
├── ref/          # Raw design values (colors, sizes, fonts)
│   ├── color/    # Color palette definitions
│   ├── size/     # Size scales (spacing, sizing)
│   └── font/     # Typography definitions
└── semantic/     # Contextual tokens (primary, success, etc.)
    ├── color/    # Semantic color mappings
    └── size/     # Semantic size mappings

Token Types

Reference Tokens (ref/)

Base design values that don't change between themes:

Colors: color-ref-{color}-{shade} (e.g., --color-ref-blue-500)
Sizes: size-ref-{scale}-{level} (e.g., --size-ref-spacing-md)
Fonts: font-ref-{property} (e.g., --font-ref-family-sans)

Semantic Tokens (semantic/)

Contextual values that reference refs:

Colors: color-{context} (e.g., --color-primary, --color-success)
Sizes: size-{context} (e.g., --size-spacing-md)

Build Process

npm run build

Generates:

dist/tokens.css - CSS custom properties
dist/tokens.js - JavaScript token object
dist/tokens.d.ts - TypeScript definitions

Usage

CSS

@import "@phoenix-tekhne/tokens/dist/tokens.css";

.my-component {
  color: var(--color-primary-500);
  padding: var(--size-spacing-md);
}

JavaScript/TypeScript

import { tokens } from "@phoenix-tekhne/tokens";

const primaryColor = tokens.color.primary[500];

Adding New Tokens

Add to appropriate src/ref/ or src/semantic/ file
Run npm run build to regenerate
Update consuming packages

For AI Agents: Quick Reference

When to Use This Package

Use Case	Import From
Need CSS variables	`@phoenix-tekhne/tokens/dist/tokens.css`
Need token values in JS/TS	`@phoenix-tekhne/tokens`
Creating new theme	Add to `src/ref/` then rebuild
Component styling	Use CSS variables, not hardcoded values

Token Naming Pattern

--color-{semantic}-{variant}     # Semantic colors
--color-ref-{color}-{shade}      # Reference colors
--size-{context}-{level}         # Spacing/sizing
--font-{property}                # Typography

Key Files

File	Purpose
`src/ref/color/`	Raw color definitions
`src/semantic/color/`	Theme-aware mappings
`build.mjs`	Style Dictionary config

Build Command

npm run build  # Generates dist/ from src/

Documentation

Style Dictionary: https://amzn.github.io/style-dictionary/
Design Tokens W3C: https://design-tokens.github.io/

License

MIT - Phoenix Inceptions Media LLC

Development Dependencies

ID	Version
style-dictionary	^3.9.0

Details

npm

2026-05-28 07:20:13 -07:00

UNLICENSED

latest

71 KiB

Assets (1)

tokens-0.3.0.tgz 71 KiB

Versions (1) View all

0.3.0

2026-05-28