@pantograph/design-tokens

Design tokens exported from Figma for the Pantograph project.

• use fine-grained Git token
• use npm bypass token
• use TokensBrücke Figma extension by belo configs:

{
  "repo": "pantograph-design-tokens",
  "owner": "mahdaad-group",
  "path": "src/designTokens.json",
  "file": "main",
  "commit": "figma-token-update"
}

Installation

npm install @pantograph/design-tokens

Usage

// Import design tokens
import { designTokens } from '@pantograph/design-tokens';

// Import types
import { type Langs, type Themes, type GrayScales } from '@pantograph/design-tokens';

// Or import everything
import { designTokens, type Langs, type Themes, type GrayScales } from '@pantograph/design-tokens';

Available Exports

Design Tokens

• designTokens: Complete design tokens JSON object

Constants

• langs: Available languages ['fa', 'en']
• themes: Available themes ['oktuple', 'claytap', 'agility', 'pantograph', 'primeplanet']
• grayScales: Available gray scales ['arsenic', 'cool', 'warm', 'neutral']

Types (Union Types)

• Langs: 'fa' | 'en'
• Themes: 'oktuple' | 'claytap' | 'agility' | 'pantograph' | 'primeplanet'
• GrayScales: 'arsenic' | 'cool' | 'warm' | 'neutral'

Build

The package includes a build system that automatically generates TypeScript types from the design tokens JSON file. To rebuild after updating designTokens.json:

npm run build

Author

sedmedgh - [email protected]

License

This project is licensed under the MIT License.

Direct JSON Access

You can also access the raw JSON file directly:

import { designTokens } from '@pantograph/design-tokens';