[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_283":284,"_285":286},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":25,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",27,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","docs/adr/0001-no-build-styling-architecture.md","latestPath","fileId","bcbd4aa0-6b46-11f1-9db1-1607ee4eb77e","name","0001-no-build-styling-architecture.md","fileType","content","# No-build styling architecture\n\nKylä UI targets Val Town, which has no build step or bundler. Cloudflare Kumo — our model — achieves visual consistency with Tailwind v4 semantic tokens compiled at build time, which we cannot use. We therefore deliver consistency at runtime: **semantic design values are defined as CSS custom properties** (a token stylesheet served by the `kyla-ui` val, using `light-dark()` for automatic dark mode), and **components apply them via runtime Twind arbitrary-value utilities** (e.g. `bg-[var(--kyla-base)]`). Styles are delivered with a deliberate split (confirmed by the `kyla-ui-spike`): the **Twind script lives in the HTML shell** (it must load before first paint or utilities FOUC, so it cannot be React-injected), while the **token stylesheet is injected by the Provider at runtime** (idempotently). The Starter ships the shell tag; the Provider guarantees the tokens — so \"styles are present\" is a guarantee, not a setup checklist (a manual two-tag `` setup is the documented escape hatch).\n\n## Considered Options\n\n- **Tailwind v4 + build step (the Kumo way)** — rejected: requires a bundler/PostCSS, which Val Town does not provide.\n- **Twind with a named-token theme config** (`bg-kyla-base`) — rejected: every consumer app would have to load an identical Twind runtime config or components render wrong; that coupling is a sharp, silent failure mode.\n- **Pure CSS component classes** (`.kyla-button`) — rejected: self-contained but abandons Tailwind/Twind ergonomics and composable variants, and strays from the Val Town idiom.\n\n## Consequences\n\n- Arbitrary-value Twind syntax is noisier, but it lives inside library source; consumers only write `

Diff · v27