`@apollion-dsi/tokens`

The framework-agnostic design tokens package of the Apollion DS. Emits CSS, JSON (DTCG), and TypeScript from a brand config — no React in the path. @apollion-dsi/core consumes tokens at runtime via the theme; Vue/Flutter apps (or any stack) read dist/json directly.

Status: GA since 4.2.0. Version aligned with @apollion-dsi/core (same number on both packages).

When to use

Scenario	Package
React app with `ApollionProvider`	`@apollion-dsi/core` (tokens come in as `optionalDependencies`)
Brand build / CSS variables / DTCG JSON	`@apollion-dsi/tokens` + `apollion-tokens build` CLI
Consumer without React (Vue, Flutter, native)	only the `dist/json/*.json` generated by the CLI

Versioned API

The single stable public entry:

import { TOKENS_RUNTIME_API_VERSION } from '@apollion-dsi/tokens/runtime/v1';

Major surface changes go to runtime/v2, runtime/v3, … — v1 remains available.

Scope

OKLch palette derivation
Dimension axis (compact / normal / spacious)
Foundation / Surface builders
Atomic emission of CSS / JSON / TS variants
Config-First loader (apollion.config.mjs + zod schema)

Out

React components → @apollion-dsi/core
Framework adapters → the consumer reads the JSON

Coupling with `@apollion-dsi/core`

core declares tokens in optionalDependencies (not in dependencies).
An app that doesn't turn on output.runtime: true in the config does not install tokens.
The two packages' versions stay aligned (same number).

Map of this section

Page	Content
Build CLI	`apollion-tokens build`, config, variant matrix
Output (CSS / JSON / TS)	Format of each artifact
Brand examples	Fast food + fashion retail

@apollion-dsi/tokens