Skip to content

v0.4.0

Choose a tag to compare

@github-actions github-actions released this 31 May 19:09
· 79 commits to main since this release
baeb2d5

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..6 ramp is now perceptually even (OKLCH). Steps 1–4 mix
    the accent toward the background in oklch instead of in srgb (ADR-0001
    step 8), so the ramp reads as evenly-spaced — better for charts / multi-state
    surfaces. scripts/gen-resolved.mjs learned to resolve color-mix(in oklch,…)
    → hex (bit-for-bit matching browser color-mix), so tokens/resolved.json,
    the DTCG export, and docs/reference.md all 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 using var(--accent-1..4) directly see the
    (intended) shift.
  • Framework bindings — @ponchia/ui/react + @ponchia/ui/solid. Optional,
    thin hooks over the SSR-safe init* behaviors (run on mount, clean up on
    unmount/dispose): useDialog, useTabs, useMenu, useCombobox,
    usePopover, useDisclosure, useFormValidation, useTableSort,
    useCarousel, useDismissible, useThemeToggle, useDotGlyph,
    useToast(), and the generic useBrontoBehavior(init, opts); cls/ui/cx
    re-exported for one-import DX. react / solid-js are 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-icon wrapper + 5
    circle-family glyphs.
    renderGlyph(name, { render: 'mask', size }) now
    returns a single .ui-icon element 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, default 1em) and inherits currentColor. New
    .ui-icon CSS 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 live var(--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 in tokens/charts.json for
    canvas/SVG/charting libs; typed ChartTokenName (./charts). Charts-only,
    never UI chrome
    (check:color-policy fails on var(--chart-*) in core CSS)
    and never in the default bundle (separate entrypoint). Sourced from
    tokens/charts.js (generated → drift-checked by check:charts).
  • Display colorways — @ponchia/ui/css/skins.css. Opt-in
    data-bronto-skin="amber-crt | phosphor-green | e-ink", a root-level
    choice like data-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 (see docs/contrast.md). Shipped as a separate
    entrypoint, never in the default dist/bronto.css
    — zero cost unless you
    import it. Sourced from tokens/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 --pulse floor), 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-W3 Lc column 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-policy gate (scripts/check-color-policy.mjs, wired into
    npm run check). Enforces the color constitution: every color-defining token
    (across global/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:skins gatecss/skins.css can't drift from tokens/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.