@sig-ui/dom

Browser runtime utilities for SigUI.

What this package is for

Use @sig-ui/dom for:

• runtime brand/theme variable updates
• CSS variable injection/removal
• breakpoint and device-context watchers
• adaptive token application based on environment
• token-aligned animation helpers

How it fits in SigUI

core -> theme -> dom

• Depends on @sig-ui/core and @sig-ui/theme.
• Peer layer with @sig-ui/components.
• Optional in static build-only setups.

Install

bun add @sig-ui/dom

Quick examples

import { applyBrandColor, removeBrandColor } from "@sig-ui/dom";

applyBrandColor("#0ea5e9");
// later
removeBrandColor();

import { watchBreakpoint } from "@sig-ui/dom";

const stop = watchBreakpoint((bp) => {
  document.documentElement.dataset.bp = bp;
});

import { animate } from "@sig-ui/dom/animate";

animate(".card", { y: [8, 0], opacity: [0, 1] }, { duration: "normal" });

Main entry points

• @sig-ui/dom
• @sig-ui/dom/animate
• @sig-ui/dom/spacing
• @sig-ui/dom/manager
• @sig-ui/dom/viz
• @sig-ui/dom/inspector

Full docs

• docs/ARCHITECTURE_OVERVIEW.md
• docs/DOM.md
• docs/THEME.md (upstream)
• docs/COMPONENTS.md (peer layer)