@edux-design/tokens

@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, etc.

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

• Import the theme file at the top of your global stylesheet:

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

• 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.

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

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:

• tsup for any JS helpers in src.
• tailwindcss to generate dist/styles.css.
• 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.