@customyai/tokens

Customy design tokens without React: the DTCG source, ready-made CSS variables, a Tailwind v4 theme and a React Native module. Version 0.1.0 is a pre-release published under the next dist-tag (0.x: any minor may break).

Licence: pending. See LICENSE. Package names and scope are a proposal until confirmed.

Install

npm install @customyai/tokens@next

Use

/* Web: CSS custom properties (HSL, light and dark) */
@import "@customyai/tokens/theme.css";
/* Tailwind v4: @theme mapping of the same tokens */
@import "@customyai/tokens/tailwind-theme.css";

// React Native / Expo / any JS runtime: plain objects (dp numbers, #rrggbb colours)
import { tokens, nativeTheme } from "@customyai/tokens/native";

tokens.light.colors.surface.primary; // "#fafafa"
nativeTheme("dark");

// DTCG source (2025.10), e.g. for Style Dictionary or Tokens Studio
import core from "@customyai/tokens/dtcg/core.tokens.json" with { type: "json" };

Files

• theme.css, tailwind-theme.css: generated CSS.
• native.js and native.d.ts: React Native module and its types (ESM).
• dtcg/*.tokens.json, dtcg/customy.resolver.json, dtcg/contrast.pairs.json: DTCG source and resolver (primitive, core, semantic and component layers, light and dark).

The files are generated from the Customy monorepo; do not edit them. Renaming or removing a token is a major change, adding one is a minor change.