@polygonschmied/stellar-tokens

Design tokens (CSS custom properties) and base component styles for Stellar DS — the foundation every other stellar-* package depends on.

Install

pnpm add @polygonschmied/stellar-tokens

Use

Import the CSS once at the root of your app:

import "@polygonschmied/stellar-tokens/styles.css";

This loads both the token layer (CSS variables) and the base component CSS that stellar-core, stellar-charts, stellar-canvas, stellar-nodes and stellar-three expect to find at runtime.

If you only want the raw token layer (no component CSS), import @polygonschmied/stellar-tokens/tokens.css directly. Since v0.3.0 the tokens are also available as focused sub-exports:

import "@polygonschmied/stellar-tokens/tokens/colors.css";
import "@polygonschmied/stellar-tokens/tokens/typography.css";
import "@polygonschmied/stellar-tokens/tokens/spacing.css";
import "@polygonschmied/stellar-tokens/tokens/motion.css";

Machine-readable tokens

tokens.json ships alongside the CSS for design tools, Figma plugins, or custom pipelines that need the token map without parsing TypeScript:

import tokens from "@polygonschmied/stellar-tokens/tokens.json" with { type: "json" };
// or in Node:
import { readFileSync } from "node:fs";
const tokens = JSON.parse(
  readFileSync(require.resolve("@polygonschmied/stellar-tokens/tokens.json"), "utf8"),
);

The shape matches the typed tokens map exported from the JS entry — each leaf is the var(--name) reference, so the JSON is the single source of truth for which CSS custom properties exist.

License

MIT — see the repo README for the wider picture.