@dinefy/tokens

Base design tokens for Dinefy. Framework-agnostic, fully typed primitives to build consistent UI across platforms.

Install

npm i @dinefy/tokens
# or
bun add @dinefy/tokens

Quick start

import * as tokens from "@dinefy/tokens";

const radius = tokens.radii.md;
const spacing = tokens.space[4];
const z = tokens.zIndex.modal;

• ESM and CJS builds.
• Full TypeScript types.
• Tree-shakable: import only what you need.

What’s included

• Space scale (space)
• Radii (radii)
• Typography scale (font, fontSize, lineHeight)
• Breakpoints (breakpoints)
• Z-index (zIndex)
• Shadows/Elevation (shadows, elevation)
• Other primitives used across Dinefy UIs

The exact shape is typed; check exported types for the current surface.

Usage examples

Vanilla Extract

// styles.css.ts
import { style } from "@vanilla-extract/css";
import * as tokens from "@dinefy/tokens";

export const card = style({
  padding: tokens.space[4],
  borderRadius: tokens.radii.md,
  boxShadow: tokens.shadows.md,
});

Tailwind mapping (optional)

Generate a Tailwind config scale from tokens:

import * as tokens from "@dinefy/tokens";

export const tailwindTheme = {
  theme: {
    spacing: tokens.space,
    borderRadius: tokens.radii,
    zIndex: tokens.zIndex,
  },
};

Consumption targets

• Works in Node and browsers.
• Compatible with bundlers (Vite, Webpack, esbuild) and Bun.

Versioning & changelog

Follows semver. Breaking changes only in major releases. See CHANGELOG in the repo for details.

Links

• Package: https://www.npmjs.com/package/@dinefy/tokens
• Repository: https://github.com/dinefy (monorepo)

License

MIT