Skip to content
WARLOCKEnter the desktopSearch

CSS architecture

Elm owns semantic state; CSS owns its visual presentation.

Token tiers

Reference tokens contain palette and numeric primitives. Semantic tokens assign roles for Night, Dawn and High contrast. Component aliases bind those roles to components. Theme-dependent aliases are redeclared in nested theme specimens.

Cascade layers

The shared order is legacy, reset, tokens, base, layouts, components, states, effects, accessibility. Import shipped legacy CSS into its layer once; an unlayered duplicate would outrank layered rules.

Elm semantic hooks

Elm emits elements, classes, ARIA and admitted data attributes. CSS reads those hooks. Adapters transport observations and completion; they do not maintain a competing selection, preference or operation policy.

Scope and compatibility

Scope runtime selectors to html[data-warlock-design="v1"] and the actual surface mode. Do not infer state from labels, generated IDs, element order or hover. WebKitGTK and Chromium retain the same semantic markup and sRGB tokens.

Presentation only

Animation completion removes decoration only. A validated target, animation name and cycle plus a bounded watchdog prevent stale completion from altering a newer effect. Unsupported masks fall back to reduced effects.

Local example

@layer components {
  .surface-popup[data-mode="settings"] {
    color: var(--wl-sys-color-text);
    background: var(--wl-sys-color-surface);
  }
}

Use shared CSS tokens for values.