v0.15.0-beta.1
Pre-releaseCirth 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@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.1Breaking 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-inkis new: the page's text colour under a name no
component can rebind.--cirth-coloris 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-colornow
defaults to--cirth-ink, so nothing computes differently.--cirth-typography-spacing-verticalderives 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
h1–h6resolve from the type scale rather than from literals. --cirth-container-gutterand--cirth-modal-max-widthare 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-focusableno 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