@neoaxis/nectar-tokens

Design tokens for the Nectar Design System, built with Style Dictionary.

Tokens are distributed in multiple formats so they can be consumed by any platform.

Installation

npm install @neoaxis/nectar-tokens

Usage

CSS custom properties

@import "@neoaxis/nectar-tokens/css/brands/baselie/_tokens.css";

.my-element {
  color: var(--color-brand-primary);
  font-size: var(--typography-body-size);
}

JavaScript / TypeScript

import tokens from "@neoaxis/nectar-tokens/js";

console.log(tokens.ColorBrandPrimary); // "#..."

TypeScript types

import type { Tokens } from "@neoaxis/nectar-tokens/ts/tokens";

JSON

import tokens from "@neoaxis/nectar-tokens/json/tokens.json" assert { type: "json" };

Exports

| Path | Format | |---|---| | @neoaxis/nectar-tokens/css/* | CSS custom properties | | @neoaxis/nectar-tokens/js/* | ES module (JS) | | @neoaxis/nectar-tokens/ts/* | TypeScript types | | @neoaxis/nectar-tokens/json/* | Raw JSON |

Token categories

• Colors — brand, neutral, semantic (error, warning, success)
• Dimensions — spacing, sizing, border radius
• Typography — font family, size, weight, line height

Development

# Watch and rebuild on token file changes
yarn dev

# One-off build
yarn build