@munifort/theme

Design tokens and the Tailwind theme CSS for Munifort web surfaces, per [WEB-03] (docs/WEB_TOPOLOGY.md in munifort-platform). Framework-agnostic: every surface consumes it, Nuxt or not.

The contract is the token set; the values are per-consumer. A consumer carrying its own brand diverges on token values, never on token structure.

Contents

• tokens/primitive/: raw scales (color, typography, radius, shadow, z-index, motion) in DTCG format. Build into the Tailwind v4 @theme block, so they generate utilities.
• tokens/semantic/: light and dark surface/text/border variables. Build into :root and .dark under @layer base.
• assets/css/tokens.css: the generated CSS (committed; rebuild with npm run build, never edit by hand).
• assets/css/tailwind.css: the theme entry point. Imports Tailwind, the Inter variable font, and the generated tokens; declares the class-based dark variant and base styles.

See tokens/README.md for the token naming and build details.

Usage

In the consuming app's CSS entry point:

@import "@munifort/theme/css";

Non-Nuxt or non-Tailwind consumers that only want the variables can import the generated tokens directly:

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

Mandatory @source rule. Tailwind only scans the consuming app's own sources. Every consumer must add @source directives for the component sources it renders, including the @munifort/ui layer:

@source "../node_modules/@munifort/ui/components";

Without it, classes used only inside consumed layer components are silently dropped (the symptom looks like a dark-mode bug).