v0.4.0
The color-system release — ADR-0001 steps 1–7.
A governed evolution beyond pure monochrome: the tier model is written down and
enforced (check:color-policy), and the "Nothing" look is proven to be a
skin, not the architecture — opt-in colorways (amber CRT · phosphor green ·
e-ink), a data-viz palette for dashboards (colourblind-safe, gated under
simulated protan/deutan/tritan vision), Tier-3 dot-matrix display tokens, OKLCH
authoring, and an APCA advisory contrast track all ship. Plus a reframed README
- a rendered docs site, and the curated CHANGELOG is now the GitHub Release body.
The default build is unchanged — the red accent, every retained token name,
and both theme palettes render identically; colorways and data-viz are opt-in
entrypoints, never in the default bundle. The only breaking change is the
removal of the orphan --orange token (undocumented, unused) — see below.
BREAKING (orphan token removed) — --orange / --orange-soft are
removed. They were defined in every token mirror (css/tokens.css,
tokens/index.js, tokens.dtcg.json, resolved.json, index.d.ts,
reference.md) but referenced by no component and documented nowhere, and
untiered under the new color model. As a provably-unreferenced token this is
removed in a single minor under the CONTRIBUTING.md deprecation-policy
exception (no working call-site to wind down). Removed rather than adopted; if
categorical color lands later it ships as a governed, opt-in data-viz module
(ADR-0001 tier 4), not a stray top-level token. Migration: if you referenced
--orange/--orange-soft, define it yourself in a consumer override.
Added
- The
--accent-1..6ramp is now perceptually even (OKLCH). Steps 1–4 mix
the accent toward the backgroundin oklchinstead ofin srgb(ADR-0001
step 8), so the ramp reads as evenly-spaced — better for charts / multi-state
surfaces.scripts/gen-resolved.mjslearned to resolvecolor-mix(in oklch,…)
→ hex (bit-for-bit matching browsercolor-mix), sotokens/resolved.json,
the DTCG export, anddocs/reference.mdall carry the new values. These are
token values (non-contractual under the 0.x policy) and the ramp is not
consumed by any shipped component, so there is no change to any component's
rendering — only consumers usingvar(--accent-1..4)directly see the
(intended) shift. - Framework bindings —
@ponchia/ui/react+@ponchia/ui/solid. Optional,
thin hooks over the SSR-safeinit*behaviors (run on mount, clean up on
unmount/dispose):useDialog,useTabs,useMenu,useCombobox,
usePopover,useDisclosure,useFormValidation,useTableSort,
useCarousel,useDismissible,useThemeToggle,useDotGlyph,
useToast(), and the genericuseBrontoBehavior(init, opts);cls/ui/cx
re-exported for one-import DX.react/solid-jsare optional peer
dependencies — the core stays zero-runtime-dependency. Thin adapters over
the canonical CSS/behaviors layer, not a component library (architecture ADR). - Glyphs: a one-node icon-at-scale render path + a
.ui-iconwrapper + 5
circle-family glyphs.renderGlyph(name, { render: 'mask', size })now
returns a single.ui-iconelement masked by the glyph bitmap (one DOM
node instead of 256 cells) — for an icon in every table row. It scales with
the text (--icon-size, default1em) and inheritscurrentColor. New
.ui-iconCSS primitive (cls.icon) drives it. Vocabulary grows to 48 with
circle,check-circle,x-circle,plus-circle,minus-circle. - Data-viz colour module —
@ponchia/ui/css/dataviz.css+@ponchia/ui/charts.json.
An opt-in Tier-4 chart palette for dashboards (ADR-0001 step 7). Hybrid
accent-led: series 1 is the livevar(--accent)(the brand stays series 1);
series 2–8 are the Okabe-Ito colourblind-safe set; plus a sequential ramp
(heatmaps) and a diverging ramp (gains/losses). Colour is never the sole
signal — each series ships a matching--chart-pattern-*dot-matrix fill
(WCAG 1.4.1). The categorical palette is gated for distinguishability under
normal + simulated protan/deutan/tritan vision (check:charts, OKLab ΔE),
not just eyeballed. Resolved hex per theme intokens/charts.jsonfor
canvas/SVG/charting libs; typedChartTokenName(./charts). Charts-only,
never UI chrome (check:color-policyfails onvar(--chart-*)in core CSS)
and never in the default bundle (separate entrypoint). Sourced from
tokens/charts.js(generated → drift-checked bycheck:charts). - Display colorways —
@ponchia/ui/css/skins.css. Opt-in
data-bronto-skin="amber-crt | phosphor-green | e-ink", a root-level
choice likedata-theme(apply on<html>). Each re-points the one accent
to a different single hue — the derived accent family, focus ring, dot-matrix
and glyphs follow automatically; status colours and the neutral canvas are
untouched. Authored in OKLCH, per-theme (a dark + light accent, like the
core red), and every skin accent is contrast-gated to the same WCAG AA /
3:1 floors as the core (seedocs/contrast.md). Shipped as a separate
entrypoint, never in the defaultdist/bronto.css— zero cost unless you
import it. Sourced fromtokens/skins.js(generated → drift-checked by
check:skins). - Tier-3 dot-matrix "display expression" tokens (
css/dots.css):
--dotmatrix-glow(phosphor bloom on lit cells),--dotmatrix-pulse-min
(the--pulsefloor), documented--dotmatrix-reveal-step(scan cadence).
All default to a no-op, so the default render is unchanged; the phosphor
colorways use the glow in dark. - APCA advisory contrast in
docs/contrast.md. Every pairing (core and
every colorway) now shows an APCA-W3Lccolumn beside the WCAG ratio — a
perceptual cross-check. Advisory only: WCAG 2.1 AA stays the hard gate
(check:contrast). Implemented dependency-free, alongside an OKLCH→sRGB
converter so OKLCH-authored values can be measured. check:color-policygate (scripts/check-color-policy.mjs, wired into
npm run check). Enforces the color constitution: every color-defining token
(acrossglobal/light/dark) must be classified into a tier (this is what
would have caught--orange); the--chart-*/--cat-*/--data-*
data-viz namespace is reserved; and component CSS may not use raw chromatic
color (only tiered tokens, with neutral grays /color-mix()endpoints).check:skinsgate —css/skins.csscan't drift fromtokens/skins.js,
every skin defines--accent, and colorways stay out of the default bundle.- ADR-0001 — Color system — the five-tier
color constitution and the backward-compatible roadmap. Steps 1–6 are
implemented in this release (gate + colorways + Tier-3 tokens + OKLCH for new
work + APCA advisory); the data-viz categorical module and any core-ramp
OKLCH migration are deliberately deferred.