Skip to content

Releases: cirthcss/cirth

v0.15.0

Choose a tag to compare

@github-actions github-actions released this 19 Sep 11:19
7007d31

Cirth v0.15.0

Cirth 0.15.0 completes the native-baseline theme introduced through the beta
series: a warmer canvas, copper accent and graphite neutral, simpler native
controls, and a smaller vocabulary of semantic decisions for an application
to make. Existing pages repaint without markup changes. Themes that override
downstream accent tokens need the rename below.

Breaking changes

The primary, secondary and contrast token families now name the thing
they paint before the state they are in. Values and relationships are
unchanged, but downstream custom-property overrides must use the new names:

Before After
--cirth-secondary, --cirth-contrast --cirth-secondary-text, --cirth-contrast-text
*-background *-surface
*-hover *-active
*-hover-background *-surface-active
*-hover-border *-border-active
*-hover-underline *-underline-active
*-inverse *-on-surface

--cirth-primary itself, the .secondary and .contrast classes, package
entry points and markup are unchanged. A theme that only sets
--cirth-primary needs no migration. *-on-surface remains an explicit
light-or-dark ink: rename an existing override, but continue choosing its
value deliberately for the accent beneath it.

What looks different

  • The default accent is copper, the neutral family is cool graphite, the
    light canvas is warm mineral paper, and dark mode uses the same graphite
    rather than near-black.
  • Buttons are flat; fields read as recessed and receive an immediate focus
    ring; disclosures use a dividing rule instead of a card treatment; and
    navigation stays neutral until active.
  • <mark> derives from the accent instead of the warning family. Syntax
    highlighting, captions and top-level section hierarchy were retuned for the
    new palette.
  • Dialogs settle by half a rem instead of entering by their full height. The
    dark range thumb is clearer against its track and sits on the shared 44px
    target floor.

New and changed defaults

  • --cirth-ink names the document's text colour without being rebound by a
    component. --cirth-color continues to default to it.
  • --cirth-container-gutter separates fluid container gutters from global
    spacing, and --cirth-modal-max-width provides one runtime modal cap.
  • --cirth-primary-text is the derived text role for the primary family.
  • --cirth-typography-spacing-vertical now derives from --cirth-spacing, so
    changing the root rhythm also changes prose rhythm unless the typography
    token is overridden directly.
  • Reduced-motion mode neutralizes --cirth-transition, reaching native range
    pseudo-elements as well as authored transitions that use the token.

API

.danger is a destructive button modifier in class-enabled builds. It derives
from the error family, adds no custom property, and composes with .outline
and .ghost:

<button class="danger">Delete project</button>
<button class="danger outline">Delete project</button>

Classless builds do not infer destructive intent from text or form position.

Fixed

  • Ordered navigation lists now receive the same layout and breadcrumb
    separators as unordered lists.
  • Summary markers centre at any type size; vertical navigation paints inside
    its container; ordinary lists in an <aside> keep their markers; and the
    VoiceOver list-semantics workaround stays out of every layout flow.
  • .sr-only-focusable reveals without moving the document.
  • Description lists and table captions receive complete native defaults.
  • Readonly number inputs no longer expose an unusable stepper. Editable number
    inputs retain their native controls and keyboard behaviour.

Known issues

The project logo, README presentation and documentation homepage are still
being revised separately. That work does not change the CSS or public API
published in this release.

Tables continue to scroll horizontally rather than reflow on narrow screens.

What's Changed

  • fix(deps): take fast-uri to 3.1.7, closing four host-confusion advisories by @ricpastori in #103
  • Native baseline aesthetic rework, and the release process for 0.15.0-beta.1 by @ricpastori in #104
  • chore(release): prepare v0.15.0-beta.1 by @ricpastori in #105
  • fix(ci): fetch a browser before the release tooling checks by @ricpastori in #118
  • ci: close the two gaps the release found, and three dev advisories by @ricpastori in #119
  • feat: the copper identity and the native baseline by @ricpastori in #120
  • chore(release): prepare v0.15.0-beta.2 by @ricpastori in #121
  • fix: scope visual baselines and readonly number controls by @ricpastori in #122
  • docs: adopt written specs with an evidence ledger by @ricpastori in #128
  • feat(theme)!: name accent tokens by role by @ricpastori in #123
  • chore(release): prepare v0.15.0 by @ricpastori in #129

New Contributors

Full Changelog: v0.14.1...v0.15.0

v0.15.0-beta.2

v0.15.0-beta.2 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 14 Sep 16:56
4b08b15

Cirth v0.15.0-beta.2

The second beta of the pass over the default theme, and the one where the
colour changes. Cirth's accent is now a copper on a cool graphite neutral,
and the light canvas is a warm mineral paper rather than white. Every page
repaints; nothing you wrote has to change. Try it to find out whether the new
defaults look right on your own pages — and, if you have set
--cirth-primary yourself, whether the surfaces underneath still suit the
colour you chose.

This is a beta

Visual defaults may still change during the beta series.

npm install @cirthcss/cirth@beta

npm install @cirthcss/cirth is unaffected and still resolves to v0.14.1.
Pin the exact version to stay on one beta:

npm install @cirthcss/cirth@0.15.0-beta.2

Breaking changes

None. The theme declares the same 241 custom properties it declared in
v0.15.0-beta.1 — none removed, none renamed, none added — and no entry point
in the package changed. What changed is what those properties resolve to.

What looks different

The accent is copper. Buttons, links, focus rings, the marker on the page
you are on: all of it moves from amber to a copper at 44° in oklch. If you
override --cirth-primary, nothing here touches your colour.

The page is warmer and the ink is cooler. The light canvas is a mineral
paper instead of white, and the neutral family it is built from is a graphite
at 280° rather than a blue-grey. Dark mode is that same graphite rather than
near-black. The inversion is deliberate: a warm surface read with cool ink.

<mark> no longer looks like a warning. It used to borrow the warning
family, so highlighted text and a validation message were the same colour.
It now derives from the accent.

Code samples are retinted. The syntax colours were rebuilt against the
new neutral, so a <pre> block sits on the page differently even where the
code is unchanged.

Focus rings appear instantly. They used to fade in over 200ms, which
meant that at speed you saw a thin, half-drawn ring rather than the 2px one
--cirth-outline-width specifies. The ring now arrives at full width the
moment focus lands, and still fades out.

Dialogs settle instead of sliding in. A <dialog>'s content used to
enter by its own full height. It now moves a few pixels.

The range slider is legible in dark mode. The thumb was at 2.37:1
against its track; it is now at 5.70:1, and the control sits on the same
44px target floor as every other one.

Headings and captions under a top-level <main> section have hierarchy
they did not have before, as do the two caption roles.

New and changed defaults

No custom property was added, removed or renamed. The values of the colour
tokens changed throughout — accent, neutral, surface and status families were
rebuilt around the new hues rather than adapted to them.

prefers-reduced-motion: reduce now also neutralizes --cirth-transition
itself. This matters if you have written your own transitions with that
token: they will now collapse under the preference without your doing
anything. It is also what makes the preference reach inside native controls —
the range track and thumb are engine pseudo-elements, which a selector list
cannot address, and they had gone on animating after the control that owns
them had stopped.

API

.danger, a destructive button modifier (class-enabled builds). HTML has
no destructive button type, and a primary and a destructive action routinely
share a decision surface, where reusing the primary fill makes their
difference depend on the wording alone. It composes with .outline and
.ghost, and adds no new custom property — it derives from the error family
you already have.

<button class="danger">Delete project</button>
<button class="danger outline">Delete project</button>

Classless builds do not guess destructive intent from an element's text or
its position in a form.

Known issues

The two shipped presets, plain and playroom, do not demonstrate a dense
layout: one changes very little and the other is more generous than the
default. If you are building an internal tool and want tighter defaults, the
token recipe in Customization
is the current answer; a denser preset is planned but not in this beta.

The brand identity in this release has not yet had its final review
(#78), so the mark and the
accent may still be adjusted before 0.15.0.

Feedback

Most useful to hear about: whether the copper reads as copper rather than as
brown or orange on your screen; whether the warm canvas works with your own
imagery and screenshots; and whether an accent you set yourself still looks
deliberate against the new graphite surfaces.

https://github.com/cirthcss/cirth/issues

What's Changed

  • fix(ci): fetch a browser before the release tooling checks by @ricpastori in #118
  • ci: close the two gaps the release found, and three dev advisories by @ricpastori in #119
  • feat: the copper identity and the native baseline by @ricpastori in #120
  • chore(release): prepare v0.15.0-beta.2 by @ricpastori in #121

Full Changelog: v0.15.0-beta.1...v0.15.0-beta.2

v0.15.0-beta.1

v0.15.0-beta.1 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 09 Sep 03:40
af142ec

Cirth v0.15.0-beta.1

The first beta of a pass over the default theme. Almost everything below
repaints an existing page without anyone editing it, which is the reason
this is a beta and not a release: the point of publishing it is to see the
new defaults on real sites before they are settled.

This is a beta

Visual defaults may still change during the beta series.

npm install @cirthcss/cirth@beta

npm install @cirthcss/cirth is unaffected and still resolves to v0.14.1.
Pin the exact version to stay on one beta:

npm install @cirthcss/cirth@0.15.0-beta.1

Breaking changes

None. No custom property was removed or renamed, and no markup that worked
in v0.14.1 stops working. What changes is how the defaults render.

What looks different

Buttons are flat. Every variant loses its gradient and shadow, and
carries colour and one border instead.

A disclosure is a rule, not a box. <details> no longer draws a card;
it is a summary line over a hairline, and an open one owns the gutter under
its last child.

Fields read as recessed, and focus adds a ring. A resting input is
recognisably inset on every surface it can sit on, and a focused one gets a
ring outside its border rather than only a colour change.

Navigation is neutral until it is active. Resting nav links no longer
take the accent; the active item is one registered edge — except inside a
navbar, and in a vertical nav it squares off against its rail. Controls in
a <nav> sit on a 40px band.

A visited link drains to a true grey, and a link wrapped around a card
keeps the card's ink, visited or not.

Card and table borders stay in the neutral family, mixed from the
canvas rather than tinted toward the accent, and
--cirth-card-border-radius now derives from --cirth-border-radius.

One canvas input drives the whole surface hierarchy at runtime: set
--cirth-canvas and the surfaces above it follow.

The shipped presets change the dialect, not just the palette. plain
and playroom now differ in shape as well as colour.

New and changed defaults

  • --cirth-ink is new: the page's text colour under a name no
    component can rebind. --cirth-color is a slot — a <button>, a link
    and an <input> each rebind it — so anything meaning "the ink this
    document is set in" had nowhere safe to point. --cirth-color now
    defaults to --cirth-ink, so nothing computes differently.
  • --cirth-typography-spacing-vertical derives from --cirth-spacing.
    Setting the spacing knob at the root now moves prose rhythm too, which is
    what it always claimed to do. Control padding and card padding remain
    deliberately off that knob: the first because the 44px WCAG 2.5.5 target
    size is computed from it, the second because a container's padding is
    pinned one step above its controls' on the space scale.
  • Buttons and one-line fields share one control-height formula, and
    h1h6 resolve from the type scale rather than from literals.
  • --cirth-container-gutter and --cirth-modal-max-width are new.

Fixed

  • A <nav> styles an <ol> like a <ul>. A breadcrumb is an ordered
    sequence, and <ol> was the element left out: it rendered the newlines
    between <li> elements as gaps and had no separators at all. This
    visibly changes every existing <ol> breadcrumb.
  • The <summary> marker is centred on its own line instead of sitting high
    by half the line height — 4px at the default scale, 10px at 24px type.
  • A vertical nav paints inside its own container, and a plain list inside
    an <aside> keeps its bullets.
  • .sr-only-focusable no longer moves the document when it takes focus,
    and the VoiceOver list-semantics workaround is out of flow everywhere.
  • <dl>, <dt>, <dd> and <caption> arrive finished rather than
    half-styled.

Known issues

  • Table rows scroll horizontally on a phone rather than reflowing.
  • The documentation site's own stylesheet is not part of the package and
    is not covered by these notes.

Feedback

The defaults are what this beta is asking about — particularly buttons,
fields, and navigation, which changed most. Please open an issue with a
screenshot and the surface it is on:
https://github.com/cirthcss/cirth/issues.

What's Changed

  • fix(deps): take fast-uri to 3.1.7, closing four host-confusion advisories by @ricpastori in #103
  • Native baseline aesthetic rework, and the release process for 0.15.0-beta.1 by @ricpastori in #104
  • chore(release): prepare v0.15.0-beta.1 by @ricpastori in #105

Full Changelog: v0.14.1...v0.15.0-beta.1

v0.14.1

Choose a tag to compare

@github-actions github-actions released this 27 Aug 20:59

Cirth v0.14.1

Cirth v0.14.1 closes the verification gaps left after the accessibility work
in v0.14.0. It adds automatic coverage for every maintained preset and for
the documentation pages that previously had no visual baseline.

Accessibility verification

  • Presets are discovered from src/presets/ instead of repeated in hard-coded
    lists across the build, documentation, interaction, contrast, and visual
    checks.
  • A numeric light/dark and normal/increased-contrast matrix now identifies the
    exact theme and semantic pair when an AA threshold regresses.
  • That matrix found one real defect: Playroom's light warning field border was
    2.54:1 against its surface. It now clears the 3:1 non-text floor.

Visual coverage

About, Customization, Get Started, Upgrading, and Contributions now have
desktop/mobile, light/dark baselines across Chromium, Firefox, and WebKit.
Every preset also renders representative colors, semantic states, buttons,
forms, and open modal and popover surfaces.

Release and repository hygiene

  • Package and npm publishing are explicitly dispatched against an existing
    vX.Y.Z tag, preventing delayed tag events from racing a manual release.
  • 508 ignored iCloud conflict copies were removed, and the contribution guide
    now documents safe cleanup and prevention.

Full Changelog: v0.14.0...v0.14.1

v0.14.0

Choose a tag to compare

@github-actions github-actions released this 27 Aug 16:29

Cirth v0.14.0

Cirth v0.14.0 removes a guarantee that only held for half the people using
it. aria-busy="true" used to switch off pointer events, so a busy button
could not be clicked — and could still be activated with Enter or Space.
One input method was guarded, the other was not, and nothing said which.

A minor with one breaking change, and the fix for it is one property on
your side.

Before you upgrade

  • aria-busy="true" no longer blocks interaction. If you relied on it
    to stop a submit running twice, add the button's disabled property
    while the action is pending and remove it when the action settles. For a
    custom control, use aria-disabled="true" and have its script ignore
    pointer and keyboard activation alike. aria-busy goes back to meaning
    what it says: this region is being updated.

The Upgrading page has the
before-and-after.

Nothing gets clipped to fit any more

Two rules were removing content rather than laying it out differently, and
both fail the same way for the people least able to work around it.

Dropdown items truncated with an ellipsis. At 200% text, or under the WCAG
text-spacing overrides, the part that got cut was routinely the part that
mattered, with no way to reach it. They wrap now.

code, kbd and samp widened the whole document when they held a long
URL or hash, which breaks reflow at 320 CSS pixels for everything else on
the page too. They stay inside the available width and break anywhere.
pre is untouched — it is the variant that is meant to scroll.

The dropdown says what it is

<details class="dropdown"> with a plain summary is styled like a select
and is not one. It owns no form value, no selected option, and none of a
listbox's keyboard conventions. The documentation used to offer it as a
"custom select" pattern; it now points at a native <select> for choosing
a value, and keeps the dropdown for links and actions.

Verification

Both presets, both colour schemes and prefers-contrast: more are now
audited together, and two contrast pairs moved to satisfy it: plain's
dark card surface and playroom's light hover accent. Reflow at 320 CSS
pixels, text resized to 200%, the WCAG text-spacing overrides, and pointer
versus Enter versus Space parity on every busy control, popover invoker and
dialog invoker are asserted per theme rather than checked by hand.

Full Changelog: v0.13.0...v0.14.0

v0.13.0

Choose a tag to compare

@github-actions github-actions released this 26 Aug 17:33

Cirth v0.13.0

Cirth v0.13.0 turns the palette into something you drive rather than
restate: set one token and the accent follows it everywhere. Print moves
out of the bundle, the presets are redesigned around who they are for, and
the customization guide is rewritten to explain the whole surface rather
than pointing at a compiled file.

A minor with four breaking changes, all of them one-line fixes. None of
them touches your markup.

Before you upgrade

  • Print is a separate stylesheet. A page that links only
    cirth.min.css now prints with no pass at all. Add
    <link rel="stylesheet" href="cirth.print.min.css" media="print"> after
    the main build. It moved because it is ~630 B gzipped that is never
    needed to paint the screen — as a separate sheet the browser fetches it
    at low priority instead of charging it to every visitor.
  • A :root override now reaches into forced-scheme subtrees. Colours
    used to be redeclared on every [data-theme] element, so an override
    written at :root stopped at the edge of one and the documentation told
    you to repeat it there. The scheme differences are stated once as
    light-dark() pairs now. To vary a token by scheme, write the pair:
    --cirth-primary: light-dark(#2563eb, #93c5fd).
  • The presets are renamed and redesigned. cobalt and coral are gone;
    plain and playroom replace them, named for their character rather
    than their hue. Neither is a recolouring of an old one.
  • .outline buttons have a surface. They paint the page colour instead
    of being transparent. If transparent was the point, that is the new
    .ghost.

The Upgrading page has the
before-and-after for each.

The palette is driven by inputs

--cirth-primary is an input now. Set it and the fill, the hover, the
focus ring and the underline tint follow — they are relationships the
browser evaluates, not values listed beside it. The ratios reproduce the
shipped amber ladder step for step, so introducing them changed no colour:
this is the same theme, stated differently.

The same applies to status: --cirth-error, --cirth-success and
--cirth-warning are new, and each drives four roles. They did not exist
before — the status palettes lived only inside the tokens that consumed
them, baked in by Sass, so a theme could not move them without rewriting
every consumer by hand.

--cirth-canvas is new too: the page surface as a value of its own,
because --cirth-background-color is a slot components paint through and
could not be relied on to mean the page.

Two presets, read from both ends

plain is the conventional application baseline — a familiar blue accent,
a plain white page, headings in the body face. It is four declarations,
all of them input tokens, and it exists partly to prove the point: a
coherent, accessible, light-and-dark theme in four lines.

playroom is the expressive end — a soft violet accent, tinted surfaces,
large radii, a rounded system face, generous spacing, springy motion. It
reaches across colour, geometry, typography, motion and depth, and
overrides two derived tokens on purpose so its hover lightens rather than
darkens.

Also in this release

  • A .ghost button variant in all three colour groups: no surface, no
    border, a hover that tints its own background. What an icon button in a
    header wants.
  • Form controls answer the pointer. input, select and textarea
    had no :hover at all.
  • The bundles are smaller. cirth.min.css 14,010 → 13,372 B gzipped,
    even after everything above, because print left and dead compatibility
    scaffolding went with it.
  • The customization guide is rewritten, 194 lines to 800: how the token
    system works, five runnable examples, the accessibility boundary in plain
    terms, and a reference covering all 247 tokens — generated from the
    source, so it cannot drift.

Fixed

  • A button label lost contrast under prefers-contrast: more in the dark
    scheme, reaching 4.2:1 — worse than with no preference expressed.
  • [type="reset"].outline came out with the secondary colours whether or
    not it asked for them.

Full Changelog: v0.12.0...v0.13.0

v0.12.0

Choose a tag to compare

@github-actions github-actions released this 22 Aug 18:02

Cirth v0.12.0

Cirth v0.12.0 makes the 44px touch target a property of the components
rather than an outcome of the type scale, gives textarea a default worth
having, and fixes three bugs shipped with the popover and modal work in
0.11.0.

A minor, not a patch: nothing was removed or renamed, and every change here
is the framework doing what it already claimed to do — but two of them
alter how markup that already exists will render, and the version number is
the only warning most people get.

Before you upgrade

  • A textarea without rows gets taller. Four rows instead of the
    browser's two — 122px where it used to be 70px at the default type scale.
    Pages with a comment box or a message field get longer. To keep the old
    height, say so in the markup: <textarea rows="2">. An explicit rows
    always wins, and always did.
  • Controls stop shrinking when you change their font size. Buttons,
    select and textarea now hold a 44px minimum height regardless of the
    type set on them, so a button styled at 0.875rem grows from 40.75px to
    44px. If you were relying on a smaller control, set min-block-size on
    it — or put it in a nav, where the floor is 24px by design.

Changed

  • A textarea opens four rows tall instead of two. Two rows shows a
    line and a half of a paragraph, so a control meant for prose opened as a
    box you immediately scroll inside. The four rows are measured in lh, so
    they stay four rows of that textarea's own text if you change its font
    size, rather than four rows of the default scale. An explicit rows
    attribute takes over completely: that is you declaring the height in the
    markup, and the default only fills in where you have not.

Fixed

  • The 44px target size is now a floor, not a coincidence. A control's
    height was padding plus line-height, which adds up to 44px at the default
    type scale and stops the moment anyone sets a different font-size — a
    button at 0.875rem came out at 40.75px, a select at 41px. Buttons,
    select and textarea each carry a min-block-size measured from
    --cirth-size-4 rather than from their own text, so the guarantee
    belongs to the component instead of to the type scale.

    Controls inside a nav opt down rather than out. A navigation row is
    compact by design, so it restates the floor at 24px — WCAG 2.5.8 Target
    Size (Minimum), the AA threshold — where 44px is 2.5.5's AAA one.

    [type="file"]::file-selector-button is exempt outright: it is a part of
    the input rather than a target of its own, and the input is already 44px
    tall.

  • A modal's close button is a 44px target instead of a 16px one. It is
    drawn as a 1rem icon and had 1rem of hit area to go with it, on the
    control people reach for in a hurry. The icon is unchanged and nothing
    around it moves — the box grows, background-size keeps the glyph at
    1rem, and negative margins take the extra back out of the layout.

  • An open, non-modal <dialog> no longer locks the page. The scroll
    lock added in 0.11.0 was keyed on html:has(dialog[open]), which is true
    of a dialog rendered inline as ordinary content — so a page showing one
    as an example could not be scrolled. It is now html:has(dialog:modal):
    only a dialog opened with showModal(), the one that actually covers the
    page, locks it.

  • A popover stays centred when your CSS touches its margins. The
    browser centres a popover with margin: auto on all four sides, so a
    rule like .container > :last-child { margin-bottom: 0 } left the other
    sides to absorb the free space and slid the panel to the bottom of the
    screen. The open panel declares inset: 0; margin: auto itself now.
    Anchor positioning still wins: position-area takes precedence, so
    nothing needs undoing first.

Full Changelog: v0.11.0...v0.12.0

v0.11.0

Choose a tag to compare

@github-actions github-actions released this 22 Aug 16:26

Cirth v0.11.0

Cirth v0.11.0 removes the CSS-only tooltip, takes the last JavaScript
dependencies out of the modal, and starts versioning the documentation so
that a release like this one can be read from either side of it.

Three things stop working the way they used to. All three are removals of
CSS that could not do its job, replaced by platform features that can, so
in each case there is less to write rather than more — but each needs a
look before you upgrade.

Before you upgrade

  • [data-tooltip] renders nothing. The attribute is gone. Markup that
    uses it keeps working as ordinary content, but the tooltip text — which
    lived inside the attribute — is not displayed at all. It could never be
    accessible: the message was drawn with content: attr() on a
    pseudo-element, invisible to assistive technology, unreachable by
    aria-describedby, absent entirely on replaced elements like <input>.
    Popover replaces
    it with a real element that a trigger can point at.
  • The modal's classes are gone: .modal-is-open, .modal-is-opening,
    .modal-is-closing and --cirth-scrollbar-width. A script that still
    toggles them keeps working — they do nothing now — so nothing breaks on
    upgrade, but that code can be deleted. The page stops scrolling on its
    own and the dialog animates itself in.
  • A :root override of a color token now applies. This one breaks by
    starting to work: overriding a color from :root used to lose to the
    scheme roots whatever the loading order, so an override written, found
    ineffective and left in the codebase takes effect now. Worth grepping
    your stylesheets for --cirth- first. A bare :root override applies to
    both schemes.
  • The browser floor moved to Chrome 123, Firefox 130, Safari 18.2 —
    about 78% of global usage. If you need Safari 17.x, stay on 0.10.0,
    which remains installable and whose documentation stays published.

Upgrading has the migration
in full, with before/after for each change.

Added

  • A popover surface (gh#51): popover is an attribute, not an element,
    so what is styled is the sheet it creates in the top layer and nothing
    about the content — the same surface serves a hint, a menu, a filter
    panel, or a disclosure that has to escape an ancestor's overflow. It
    fails closed, leaves popover="manual" and <dialog popover> alone, and
    fades in with @starting-style rather than with classes a script has to
    toggle.
  • A JavaScript-free modal (gh#64): html:has(dialog[open]) stops the
    page scrolling and scrollbar-gutter: stable keeps the layout from
    shifting when it does, replacing a class and a scrollbar measurement the
    component used to ask a script for. The docs now lead with
    command="show-modal", flagged as an enhancement since invoker commands
    are newer than the browser floor.
  • <meter> is styled (gh#59) as progress's matched pair, painting its
    value green, amber or red according to which region low/high/
    optimum put it in, with the hue backed by weight so the signal survives
    a reader who cannot separate the colors.
  • A print pass (gh#32) and prefers-contrast: more support
    (gh#34), both new in this line.
  • Versioned documentation. The site is archived at breaking changes
    rather than at releases, so the switcher in the header reads
    up to v0.10.0 / from v0.11.0. The 0.10 line is frozen and still
    published; develop is now previewed at /next/.

Fixed

  • A :root override now actually changes a color token (gh#92): the
    scheme roots outweighed a plain :root at (0,2,0) against (0,1,0), so
    the documented customization path lost on specificity 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().
  • :has() is guaranteed, so three shipped caveats about Firefox are
    gone along with the rules' apologies for themselves.

See the Changelog
for the complete, itemized list.

Full Changelog: v0.10.0...v0.11.0

v0.10.0

Choose a tag to compare

@github-actions github-actions released this 21 Aug 22:41

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

v0.9.0

Choose a tag to compare

@github-actions github-actions released this 16 Aug 21:02

Cirth v0.9.0

Cirth v0.9.0 gives visited links a color of their own, fixes three
long-standing rendering bugs (nested list spacing, buttons with unbreakable
labels, search fields inside generic groups), and puts a Subresource
Integrity hash on the documented CDN snippets.

A minor, not a patch: nothing was removed or renamed, but two of the
changes below alter how pages that already exist will render.

Before you upgrade

  • Visited links change color. Content links that the reader has already
    followed now paint in --cirth-link-visited-color, a neutral drawn from
    the same palette. Navigation, dropdown menus, and .secondary/.contrast
    links are left alone. To opt out entirely, point the token back at the
    accent: --cirth-link-visited-color: var(--cirth-primary);.
  • Nested lists sit tighter. A nested ul/ol/dl now gets a small top
    margin and no bottom margin, which is what the framework always intended
    and never applied. Pages with nested lists get slightly shorter.

Added

  • A color for visited links (gh#58): --cirth-link-visited-color, new
    in both color schemes and in the cobalt and coral presets, each value
    verified at 4.5:1 or better against its page and card backgrounds. The
    underline keeps its unvisited tint: browsers let :visited change color
    and little else, text-decoration-color included, so that a page cannot
    work out where the reader has been.
  • Subresource Integrity on the documented CDN snippets (gh#33): the
    jsDelivr <link> in the README and on Get Started now carries the
    sha384 hash of the exact file it pins, plus crossorigin="anonymous".
    A CDN response that isn't the published stylesheet is refused by the
    browser instead of applied.

Fixed

  • Nested lists no longer leave a gap before the next parent item
    (gh#76): the rule meant to clear their bottom margin was written with
    :where() on both compounds, so it had zero specificity and always lost
    to the dl, ol, ul type selectors.
  • Buttons with a long unbroken label stay inside their container
    (gh#75): button-like controls cap at max-width: 100%, so a URL, token,
    or hash wraps inside the button instead of carrying it past its
    container. Busy buttons wrap too.
  • Search fields inside a generic group match the group's corners
    (gh#69): [type="search"] keeps its pill radius on its own and inside a
    [role="search"] group, but inside a generic .group it now takes the
    radius the group is drawn with.

See the Changelog
for the complete, itemized list.

Full Changelog: v0.8.5...v0.9.0