Loading page…
Loading page…
Theme Studio can now regenerate a complete token family from one meaningful seed. The formulas are exported from @coldharbor/ui/studio, so product tooling can produce the same values without copying Studio code.
The defaults exactly reproduce the established ColdHarbor scales. Move one seed in Theme Studio and the family updates live; every expanded token remains independently editable afterward.
| Family | Default seed | Generated range | Fixed recipe |
|---|---|---|---|
| Type scale | 16px | 2xs → 5xl | md is the anchor |
| Radii | 6px | sm → soft-lg | 0px restores the sharp family |
| Spacing | 4px | space-1 → space-9 | 1 / 2 / 3 / 4 / 6 / 8 / 12 / 16 / 24 |
| Tracking | 0.08em | tight → coordinates | −¼ / 0 / 1 / 2 |
| Motion | 240ms | instant → glacial | ⅓ / ⅔ / 1 / 1¾ / 3⅓ |
import { generateStudioNumericScale } from "@coldharbor/ui/studio";
const typeTokens = generateStudioNumericScale("type-scale", 16);
const spacingTokens = generateStudioNumericScale("spacing", 4);
const motionTokens = generateStudioNumericScale("motion", 240);Canvas, ink, brand, material, lines, status, and data-viz each accept one hex seed. The generator derives elevations, contrast ink, alpha washes, semantic harmonies, and chart series; the existing contrast badges remain the final audit.
import { generateStudioColorScale } from "@coldharbor/ui/studio";
const brandTokens = generateStudioColorScale("brand", "#99140f");
const statusTokens = generateStudioColorScale("status", "#e0211b");
const chartTokens = generateStudioColorScale("data-viz", "#c99a43");Seeds are an authoring input, not a new runtime dependency. Theme Studio expands them into the ordinary --ch-* override map, preserving the current export, local-storage restoration, and per-token refinement behavior.
// One seed in; ordinary portable token values out.
{
"vars": { "font-size-md": "1rem", "font-size-5xl": "4rem" },
"colors": { "primary": "#99140f", "primary-fg": "#ffffff" }
}