@dinefy/theme-web

CSS variable contracts for vanilla-extract components.

Purpose

This package provides the vars contract that allows vanilla-extract components to reference CSS variables in a type-safe way.

Usage

import { vars } from "@dinefy/theme-web";

const myStyle = style({
  color: vars.colors.brand,
  fontSize: vars.typography.fontSize.md,
  padding: vars.spacing.md,
});

Migration Note

The CSS presets have been removed from this package.

Instead of importing CSS from theme-web:

// ❌ Old way (deprecated)
import "@dinefy/theme-web/presets/default.css";

Use the new tokens CSS directly:

// ✅ New way
import "@dinefy/tokens-default/tokens.css";

What this package provides

• vars: Type-safe CSS variable contracts
• TypeScript definitions for all design tokens
• Utility functions for CSS variable generation

What this package does NOT provide

• ❌ CSS files or presets
• ❌ Actual CSS variable values
• ❌ Theme implementations

For actual CSS variables, use @dinefy/tokens-default/tokens.css.