@luna-oss/tokens
v6.0.0
Published
Moon Design System V6 design tokens. W3C DTCG 2025.10-compliant single source of truth with P3 wide-gamut and OKLCH color support, compiled to CSS, JS/TS, JSON, Figma Variables, Tailwind v4 preset, and Panda CSS preset.
Readme
@luna-oss/tokens
Moon Design System V5 — design tokens, single source of truth.
This package is the spinal cord of Moon V5. It defines design tokens in W3C Design Tokens Format Module (DTCG) JSON and compiles them with Style Dictionary v4 into multiple consumer formats:
- CSS custom properties (
@layer tokens, with theme + density data attributes) - Typed JS / TypeScript constants (
as constnested object) - Flat JSON for external tooling
- Figma Variables REST API import payload
- Tailwind v4 preset
- Panda CSS preset
Layers
Tokens are organised in three tiers, each resolving into the previous one:
- Core — primitive, raw values (
color.brand.500,space.4,radius.md). - Semantic — intent (
surface.primary,content.danger,border.focus). References core via DTCG{path.to.token}aliases. - Component — bindings to specific UI parts
(
button.primary.background). References semantic tokens.
Themes
light (default), dark, hi-contrast, and aaa themes are emitted as
[data-moon-theme="..."] selectors in the compiled CSS.
Density
Spacing has three density profiles emitted as
[data-moon-density="comfortable" | "compact" | "spacious"]. Default is
comfortable.
Build
yarn buildOutputs to ./dist/.
