Skip to content

v0.10.0

Choose a tag to compare

@github-actions github-actions released this 21 Aug 22:41
· 231 commits to master since this release

Cirth v0.10.0

Cirth v0.10.0 teaches the library three things it had no answer for: how
to print, what to do when a reader asks for more contrast, and how to
render <meter>. It also fixes the customization path the documentation
has always described but the stylesheet never honored.

A minor, not a patch: nothing was removed or renamed, but each of the four
changes below alters how pages that already exist will render — one of
them by finally applying overrides that used to be ignored.

Before you upgrade

  • A :root override of a color token now works. It never did before:
    every color is declared on the scheme roots, which outweighed a plain
    :root rule no matter how late it was loaded. If your stylesheet
    contains such an override — written, found to do nothing, and left in —
    it takes effect on upgrade. Two consequences worth checking: a bare
    :root override applies to both color schemes, and overrides written
    against the workaround shape (:root:not([data-theme="dark"]),
    [data-theme="dark"]) are more specific and keep winning. See
    Customization.
  • <meter> is styled now. If you use the element, it stops rendering
    as the browser's own control and takes Cirth's track, border, and value
    colors. Its width is 100%, like <progress> and the form controls, so
    give it a width of its own where it sits inline.
  • Printing looks different, deliberately. Any page printed while the
    dark scheme was active used to come out near-white on white; it now
    prints as ink on paper. If you already ship your own @media print
    rules they still win — Cirth's are plain, unprefixed rules with no
    !important anywhere.
  • Readers who ask for more contrast get a different palette. Nothing
    changes for anyone else: the pass is entirely inside
    @media (prefers-contrast: more).

Added

  • A print pass (gh#32): surfaces flatten and lose their shadows, links
    print as ink plus their underline with external URLs spelled out after
    them, controls print as outlined labels rather than white-on-nothing,
    table headers repeat across pages, <pre> wraps instead of being cut at
    the fold, and an open <dialog> prints in the flow. Color that is
    content — <mark>, <progress>, <meter>, checked boxes — opts back
    in with print-color-adjust: exact. Three tokens retune the whole pass.
    Nothing is hidden and no @page rule is set: which parts of a layout
    are chrome, and what the margins should be, are the document's call.
  • prefers-contrast: more support (gh#34): the softer complement to
    the existing forced-colors handling. Text reaches WCAG AAA against the
    surface it sits on, secondary inks climb from just over the AA floor to
    8.7:1 or better, hairlines and field borders clear the 3:1 non-text
    floor by a margin, link underlines drop their half-alpha tint, and focus
    rings turn opaque. Geometry is deliberately untouched: control height is
    computed from --cirth-border-width, so thickening borders would resize
    every control. Both presets carry their own version of the pass.
  • <meter> is styled (gh#59): progress's semantic sibling borrows its
    frame — same track, same border tokens, so re-theming one re-themes the
    other — and paints the value in one of three colors depending on which
    region low/high/optimum put it in. Green, amber, red, with the hue
    backed by weight so the signal survives a reader who cannot separate the
    hues, and all three clearing 3:1 against the track in both schemes.

Fixed

  • A :root override now actually changes a color token (gh#92): the
    scheme roots weighed (0,2,0) against a plain :root's (0,1,0), so the
    documented customization path lost on specificity and no loading order
    could save it — while --cirth-spacing and --cirth-border-radius
    worked, which is what made the gap so easy to miss. The parts of those
    selectors that only choose a scheme now sit inside :where(), leaving
    the roots at the weight of a plain root so source order decides again.

See the Changelog
for the complete, itemized list.

Full Changelog: v0.9.0...v0.10.0