whey.party / union-web
experimental web port of the Union style engine + adapters
styling theming css solidjs react union kde
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

TypeScript 67.7%
CSS 28.6%
JavaScript 0.3%
HTML 0.2%
Other 3.2%
34 1 0

Clone this repository

https://git.vm.fail/whey.party/union-web https://git.vm.fail/did:plc:2yawu2uh6h75fb6b2tbaigsk
ssh://git@knot1.tangled.sh:2222/whey.party/union-web ssh://git@knot1.tangled.sh:2222/did:plc:2yawu2uh6h75fb6b2tbaigsk

For self-hosted knots, clone URLs may differ based on your setup.


Download tar.gz Download .zip
README.md

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

screenshot

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