@mlola-ui/engine

Generated CSS and machine-readable metadata for Mlola UI. Framework-free: it emits plain CSS and JSON, so it runs with React, plain HTML, Rails, Go, or a static file, and has no runtime dependency.

The engine is the reason a model cannot hallucinate this library. Its contract.json is derived from the stylesheet itself and lists every class and the data-* / aria-* attributes the CSS reacts to, and agents.md is generated from the same source. An assistant reading them cannot invent a class that does not exist.

Install

npm install @mlola-ui/engine

Use

@import "@mlola-ui/engine";

<html data-theme="atelier" data-mode="light">
  <button class="ml-button" data-variant="primary">Save</button>
</html>

Exports

| Path | What it is | | --- | --- | | @mlola-ui/engine | the ordered cascade: tokens, foundations, materials, recipes, motion | | @mlola-ui/engine/tokens.css | theme + semantic tokens, light and dark | | @mlola-ui/engine/recipes.css | component recipes | | @mlola-ui/engine/motion.css | keyframes, spring easings, reduced-motion collapse | | @mlola-ui/engine/contract.json | every class and the attributes it reacts to | | @mlola-ui/engine/tokens.json | DTCG token document |

Build

The engine is generated by a Node 20 script, so the output is reproducible:

node build.mjs
node build.mjs --check   # fails when generated output is stale

MIT licensed. Part of Mlola UI.