[!WARNING] CortexUI has been renamed to DOMglyph.

@cortexui/tokens is no longer maintained. All future development, bug fixes, and releases happen under the new package:

➜ @domglyph/tokens — starting at v2.0.0

Please migrate at your earliest convenience:

npm uninstall @cortexui/tokens
npm install @domglyph/tokens

Then update all imports from '@cortexui/tokens' to '@domglyph/tokens'.

@cortexui/tokens (deprecated)

Design tokens for CortexUI — colors, spacing, typography, and more.

Overview

@cortexui/tokens is the single source of truth for CortexUI's visual design. All components and primitives consume these tokens. By centralising design values here, visual changes propagate automatically across the entire system.

The package exports tokens as typed JavaScript objects, which means they are usable in TypeScript without a build step and tree-shakeable in modern bundlers.

Installation

npm install @cortexui/tokens

Usage

Color tokens

import { colorTokens } from '@cortexui/tokens';

// colorTokens.name === "color"
// colorTokens.values is a record of color names to hex values

console.log(colorTokens.values.surface);  // "#ffffff"
console.log(colorTokens.values.accent);   // "#111827"

Use color tokens in component styles to stay consistent with the design system:

import { colorTokens } from '@cortexui/tokens';

const styles = {
  background: colorTokens.values.surface,
  color: colorTokens.values.accent,
};

TypeScript type

All token scales share the DesignTokenScale type:

import type { DesignTokenScale } from '@cortexui/tokens';

// DesignTokenScale = {
//   readonly name: string;
//   readonly values: Readonly<Record<string, string>>;
// }

This type is consistent across all token categories, so utilities can accept any token scale generically:

import type { DesignTokenScale } from '@cortexui/tokens';

function listTokenValues(scale: DesignTokenScale): string[] {
  return Object.entries(scale.values).map(([name, value]) => `${name}: ${value}`);
}

Available Tokens

| Export | Token Scale | Description | |---|---|---| | colorTokens | "color" | Surface and accent colors | | DesignTokenScale | — | TypeScript type for all token scales |

CSS Custom Properties

If you are using @cortexui/primitives, the primitiveTheme object exposes tokens as CSS custom property definitions, letting you inject them into your app's :root with a single call:

import { primitiveTheme } from '@cortexui/primitives';

// primitiveTheme contains CSS custom property maps derived from @cortexui/tokens
// Inject via your preferred CSS-in-JS solution or a <style> tag

This approach lets you consume tokens in plain CSS or any styling system that supports CSS custom properties.

Part of CortexUI

@cortexui/tokens is part of the CortexUI design system.

• Main repository
• Documentation
• Contributing