@edux-design/tokens

Source of truth for the Edux design tokens. The package ships raw CSS + Tailwind-ready artifacts so every package/app can pull the exact same variables.

Exports:

• @edux-design/tokens/styles → compiled styles.css (utility classes, base styles).
• @edux-design/tokens/theme → theme-tailwind.css (Tailwind @theme file with custom properties).
• src/theme.css (source) defines the typography scale, spacing, radii, shadows, focus rings, motion primitives, and shared motion recipes.

Installation

pnpm add @edux-design/tokens
# or
npm install @edux-design/tokens

Once installed you can import whichever artifact you need:

/* Global CSS entry */
@import "@edux-design/tokens/styles";

/* Tailwind v4 */
@import "@edux-design/tokens/theme";

Using With Tailwind

1. Import the theme file at the top of your global stylesheet:

   @import "@edux-design/tokens/theme";
   @import "tailwindcss";

2. The custom properties (--color-…, --spacing-…, etc.) become available to Tailwind’s new @theme syntax, so utilities like bg-bg-primary-base map straight to the token values.

3. When you change a token inside src/theme.css, rebuild this package and bump the version so downstream packages pick up the new CSS.

Motion

This package also owns shared motion primitives and reusable motion recipes.

Current shared recipes include:

• .eds-motion-overlay for menus, popovers, and other floating surfaces
• .eds-motion-row-emphasis for row-level hover and focus emphasis with edge indicators
• .menu-enter and .menu-exit as compatibility utilities for existing consumers

Motion semantics, naming rules, reduced-motion requirements, and agent guidance live in MOTION.md.

Scripts

pnpm --filter @edux-design/tokens build
pnpm --filter @edux-design/tokens dev   # tsup watch + tailwind watch
pnpm --filter @edux-design/tokens lint
pnpm --filter @edux-design/tokens check-types

The build pipeline runs:

1. tsup for any JS helpers in src.
2. tailwindcss to generate dist/styles.css.
3. Copies src/theme.css into dist/theme.css (and the Tailwind-specific file).

Contributing Guidelines

• Prefer additive changes; renaming/removing tokens is a breaking change for every consumer.
• Keep naming consistent with the existing scale (e.g., --color-info-500, --spacing-16).
• When introducing a new semantic token, add at least one example usage in a package (buttons, cards, etc.) so it doesn’t go stale.
• When introducing reusable motion, add it to src/theme.css and document it in MOTION.md.