v0.15.0-beta.2
Pre-release
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@betanpm 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.2Breaking 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
