whey.party
experimental web port of the Union style engine + adapters
styling
theming
css
solidjs
react
union
kde
CSS Input Support#
Union Web's CSS input format follows the same syntax as Union's CSS input. For the full specification, see the Union CSS documentation.
This page documents the subset of Union's CSS input that Union Web supports and any deviations.
Overall Parity#
| Feature | Native Union | Union Web |
|---|---|---|
Nesting with & |
Yes | Yes |
@import |
Yes | Yes |
:root variables |
Yes | Yes |
@property syntax |
Yes | No |
calc() |
Yes | No |
| Units (px) | Yes (others limited) | px only (parseLength only handles px and unitless numbers) |
Color Functions#
Native Union's CSS functions are fully supported:
| Function | Status | Notes |
|---|---|---|
var(--name, fallback) |
Full | |
custom-color(...) |
Full | Format: custom-color("kcolorscheme", "<group>", "<colorSet>", "<roleType>", "<role>") |
modify-color(...) |
Full | Operations: set-alpha, shade, lighten, darken, tint |
mix(...) |
Full | Uses KHCY color space interpolation (same as KDE KColorUtils::mix) |
Property Groups#
All property groups from Union are supported. See the Union CSS property reference for detailed descriptions.
| Group | Status | Notes |
|---|---|---|
| Layout | Full | width, height, spacing, padding, inset, margin, alignment |
| Text | Full | color, font, alignment, wrap, elide |
| Icon | Full | name, source, size, color, alignment |
| Background | Full | color, image, mask |
| Border | Full | per-side, radius |
| Outline | Full | per-side (simulated via box-shadow) |
| Shadow | Full | offset, blur, spread, color |
Selectors#
| Selector | Native Union | Union Web | Notes |
|---|---|---|---|
type |
Yes | Yes | Case-insensitive |
#id |
Yes | Yes | |
.hint |
Yes | Yes | Mapped to element hints |
:hovered |
Yes | Yes | State pseudo-class |
:pressed |
Yes | Yes | |
:checked |
Yes | Yes | |
:disabled |
Yes | Yes | |
:visual-focus |
Yes | Yes | |
:active-focus |
Yes | Yes | |
:highlighted |
Yes | Yes | |
:focus |
No | Yes (mapped to state) | Union Web divergence — treated as state |
:enabled |
No | Yes (mapped to state) | Union Web divergence |
:selected |
No | Yes (mapped to state) | Union Web divergence |
:editing |
No | Yes (mapped to state) | Union Web divergence |
:expanded |
No | Yes (mapped to state) | Union Web divergence |
:current |
No | Yes (mapped to state) | Union Web divergence |
:root |
Yes | Yes | Variables only, no element matching |
::pseudo-element |
No | Yes (parsed, no-op match) | Union Web divergence — accepted by parser, always matches in engine, but unused in theme CSS |
[attribute] |
Yes | Yes | |
[attribute=value] |
Yes | Yes | |
[attribute~=value] |
Yes | Yes | |
* (universal) |
Yes | Yes | |
Descendant ancestor descendant |
Yes | Yes | |
Child parent > child |
Yes | Yes | |
Adjacent sibling + |
No | No, treated as descendant | Divergence — should error not silently convert |
General sibling ~ |
No | No, treated as descendant | Divergence — should error not silently convert |
:first-child / :last-child |
No | No | |
@media queries |
No | No | |
| Unknown pseudo-classes | — | Treated as hints | Any :name not in the known state list becomes a hint |