@emanuelmardsjo/design-tokens-v1

Publishable design-token package for JAG foundations.

Install

npm i @emanuelmardsjo/design-tokens-v1

JavaScript / TypeScript usage

import { tokens, themes, cssVariables, toCSSVariables, toTokenJSON } from "@emanuelmardsjo/design-tokens-v1";

console.log(tokens.color["Blue Light Mode"].background.default.default);
console.log(themes.defaultMode);
console.log(toCSSVariables(cssVariables));
console.log(toTokenJSON(tokens, { pretty: true }));

CommonJS usage

const { tokens, themes, cssVariables } = require("@emanuelmardsjo/design-tokens-v1");

console.log(tokens.color["Blue Light Mode"].background.default.default);
console.log(themes.defaultMode);
console.log(cssVariables["--ds-surface-base"]);

CSS usage

import "@emanuelmardsjo/design-tokens-v1/variables.css";
import "@emanuelmardsjo/design-tokens-v1/themes.css";

variables.css provides token custom properties and mode selectors (for example :root[data-color="Blue Light Mode"]).

themes.css provides semantic --ds-* aliases and theme selectors (for example [data-theme="blue-light-mode"] and .theme-blue-light-mode).

JSON artifacts for non-TS consumers

import tokensJson from "@emanuelmardsjo/design-tokens-v1/tokens.json";
import flatTokens from "@emanuelmardsjo/design-tokens-v1/tokens.flat.json";

You can also read package metadata from:

import pkg from "@emanuelmardsjo/design-tokens-v1/package.json";
console.log(pkg.version);

tokens.json schema:

• schemaVersion: number
• defaultModes: default mode per token collection
• collections: nested object by collection -> mode -> token path

tokens.flat.json schema:

• flat object map of collection.mode.path -> value
• color values are serialized to CSS-friendly color strings

If your runtime does not support JSON module imports directly, load these files as static assets from node_modules/@emanuelmardsjo/design-tokens-v1/dist.

Build and validate

npm run build
npm run validate

Publish

npm pack --dry-run
npm publish --access public

From the monorepo root you can run:

npm run -w @emanuelmardsjo/design-tokens-v1 build
npm run -w @emanuelmardsjo/design-tokens-v1 validate
cd packages/design-tokens
npm pack --dry-run