@finedine/tokens

Farben, Radien, Schriften und Abstände für alle Fine-Dine-Apps.

Tailwind v3

// tailwind.config.ts
import finedinePreset from "@finedine/tokens/tailwind";

export default {
  presets: [finedinePreset],
  content: ["./src/**/*.{ts,tsx}", "./node_modules/@finedine/ui/dist/**/*.js"],
};

/* globals.css — lokale Kopie als Rückfall */
@import "@finedine/tokens/tokens.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind v4

@import "@finedine/tokens/theme.css";

Was dabei passiert

Das Preset ersetzt Tailwinds Palette. bg-blue-500 existiert danach nicht mehr und kompiliert zu nichts — markenfremde Farben sind unmöglich statt verboten.

Die Werte im Preset sind keine Hex-Codes, sondern Verweise auf CSS-Variablen: bg-fd-primary wird zu rgb(var(--fd-color-primary) / 1). Den Wert liefert zur Laufzeit cdn.app.fine-dine.de/v1/tokens.css, die AppShell aus @finedine/ui selbst einbindet. Eine Farbänderung braucht deshalb keinen Rebuild.

Verfügbare Farben

bg, surface, surface-muted, overlay, border, border-strong, fg, fg-muted, fg-subtle, fg-inverse, primary, secondary, success, warning, danger, info (jeweils mit -hover, -subtle, -fg, soweit sinnvoll) und focus.

Alphawerte funktionieren: bg-fd-primary/60.

Ändern

src/tokens.ts anpassen, pnpm build, mergen, Paket veröffentlichen (siehe docs/RUNBOOK-PAKETE.md). Ein automatischer CDN-Deploy ist noch nicht eingerichtet — bis dahin greift der lokale Fallback (tokens.css im Paket).