@helixui/tokens

Design tokens for the HELiX component library — a structured set of CSS custom properties, JavaScript constants, and Lit CSS utilities that power the @helixui/library components.

Installation

npm install @helixui/tokens

Note: This package is automatically installed as a dependency of @helixui/library. You only need to install it directly if you are consuming tokens without the component library.

Usage

JavaScript / TypeScript (token constants)

import { tokens } from '@helixui/tokens';

console.log(tokens.colorPrimary); // '#0057b8'

Lit CSS utilities (for Lit component authors)

import { css } from 'lit';
import { colorPrimary, spacingMd } from '@helixui/tokens/lit';

const styles = css`
  :host {
    color: ${colorPrimary};
    padding: ${spacingMd};
  }
`;

CSS custom properties (global stylesheet)

import '@helixui/tokens/css';

Or in CSS:

@import '@helixui/tokens/tokens.css';

.my-element {
  color: var(--hx-color-primary);
  padding: var(--hx-spacing-md);
}

JSON token source

import tokens from '@helixui/tokens/tokens.json';

Useful for build tooling, style dictionaries, or design tool integrations.

Utility helpers

import { toCssVar, resolveToken } from '@helixui/tokens/utils';

toCssVar('color-primary'); // 'var(--hx-color-primary)'

Export Paths

Token Categories

All CSS custom properties use the --hx- prefix:

• Color — --hx-color-primary, --hx-color-neutral-*, --hx-color-error, etc.
• Spacing — --hx-spacing-xs through --hx-spacing-2xl
• Typography — --hx-font-family-base, --hx-font-size-*, --hx-font-weight-*
• Border — --hx-border-radius-*, --hx-border-width-*
• Shadow — --hx-shadow-sm, --hx-shadow-md, --hx-shadow-lg
• Motion — --hx-duration-fast, --hx-easing-standard
• Z-index — --hx-z-dropdown, --hx-z-modal, --hx-z-toast

Theming

Override semantic tokens at the :root level to apply a custom theme across all HELiX components:

:root {
  --hx-color-primary: #005eb8;
  --hx-color-primary-hover: #004f9f;
  --hx-font-family-base: 'Roboto', sans-serif;
}

Documentation

Full token reference and theming guide:

Docs site coming soon

License

MIT