@sig-ui/core

Foundation package for SigUI. This package contains pure primitives and no browser/runtime side effects.

What this package is for

Use @sig-ui/core for:

• perceptual color operations and palette generation
• APCA/WCAG contrast checks
• spacing, typography, elevation, and motion calculations
• accessibility heuristics and interaction state machines
• DTCG-compatible token export helpers

How it fits in SigUI

core -> theme -> (dom, components)

• @sig-ui/theme depends on this package.
• @sig-ui/dom and @sig-ui/components rely on values derived from this layer.
• @sig-ui/cli uses this package for generation and validation workflows.

Install

bun add @sig-ui/core

Quick examples

import { generatePalette } from "@sig-ui/core/palette";

const palette = generatePalette("#6366f1", { background: "#ffffff" });
console.log(palette.formatted[500]);

import { apcaContrast } from "@sig-ui/core/contrast";

const lc = Math.abs(apcaContrast("#312e81", "#ffffff"));
if (lc < 60) throw new Error("Not enough body-text contrast");

Main entry points

• @sig-ui/core
• @sig-ui/core/color
• @sig-ui/core/contrast
• @sig-ui/core/palette
• @sig-ui/core/tokens
• @sig-ui/core/typography
• @sig-ui/core/spacing
• @sig-ui/core/motion
• @sig-ui/core/elevation
• @sig-ui/core/accessibility
• @sig-ui/core/machines

LLM instructions

When generating code with @sig-ui/core:

• Use this package for pure calculations only; do not import DOM, component registration, or browser runtime APIs from it.
• Prefer the documented package root and subpath exports above. Do not import from @sig-ui/core/src/....
• Use @sig-ui/theme or @sig-ui/cli when the task is to resolve a full theme or emit CSS files instead of assembling token CSS by hand.
• Validate color and contrast decisions with the exported color, palette, and contrast helpers rather than hard-coding assumed accessible pairs.
• Keep examples framework-agnostic unless the user explicitly asks for a framework integration.

Full docs

• docs/ARCHITECTURE_OVERVIEW.md
• docs/CORE.md
• docs/THEME.md (next layer)