Union Web (Experimental)#
Experimental web implementation of Union, KDE's style engine. Reuses Union's CSS input format and matching semantics but replaces Union's C++ core and Qt output plugins with TypeScript packages for web applications.
Documentation: docs/index.md
Development Status#
This project uses a ratcheting development style — only one output runtime is actively maintained at a time. Currently that is the SolidJS plugin. See docs/index.md for details.
Packages#
| Package | Description |
|---|---|
@union-web/core |
CSS parser, selector matching, property resolution, UnionStyleProps output, KColorScheme resolver, variable resolver |
@union-web/vite-plugin |
Vite plugin for build-time CSS parsing, variable resolution, and virtual:union-ir module |
@union-web/solid-plugin |
SolidJS hooks (useUnion) and context (UnionIRProvider) for runtime style resolution via StyledRect — currently active |
@union-web/react-plugin |
React hooks (useUnion) and context (UnionIRProvider) for runtime style resolution via inline styles — may lag behind |
@union-web/positioner-sandbox |
Port of Union's PositionerLayout engine — study/sandbox tool with CLI and browser dev modes. npm run dev:pos |
Quick Start#
npm install
npm run build # compile TypeScript packages
npm run dev:solid # start Vite dev server (solid-demo)
npm run dev:pos # start Vite dev server (positioner-sandbox)
npm run dev # start Vite dev server (react-demo)
Input Structure#
input/
themes/ -- union CSS theme files (e.g. breeze/)
colors/ -- KDE .colors files (e.g. BreezeLight.colors)
defaults/ -- base default CSS