@pantograph/tokens

The single source of truth for Pantograph design tokens. Provides CSS custom properties (--pt-*), brand themes, gray scales, and runtime theme management APIs.

Installation

npm i @pantograph/tokens

Quick Usage

CSS & LESS Import

/* Import design tokens CSS */
@import '@pantograph/tokens/tokens.css';

/* Import font definitions */
@import '@pantograph/tokens/style/index.css';

/* In LESS stylesheets */
@import (reference) '@pantograph/tokens/style/typography.less';

.my-component {
  .pantograph-title();
  background-color: var(--pt-primary-fill);
  color: var(--pt-primary-fg);
  padding: var(--pt-space-400);
  border-radius: var(--pt-roundness-md);
}

JS/TS Runtime API

import { init, defineTheme, getThemeInfo, getCoreHexColor } from '@pantograph/tokens'

// Initialize theme on app container
init({
  element: '#app',
  dark: false,
  theme: 'pantograph',
  grayScale: 'neutral',
})

// Toggle dark mode or switch theme dynamically
defineTheme({
  element: '#app',
  dark: true,
  theme: 'oktuple',
  grayScale: 'arsenic',
})

Key Features

• Standardized Prefix: All CSS custom properties map to --pt-*
• 15 Primitive Color Families: 10 shades each (red, blue, amber, etc.)
• Semantic Mapping: Brand tokens (primary, surface, danger) for consistent UI roles
• Theme & Gray Scale Classes: Class-based theme control (pantograph-light / pantograph-dark, oktuple-theme, pantograph-neutral)

Documentation & Resources

• Monorepo Architecture Layout
• Engineering Guidelines
• AI Navigation Map