v0.17.0-beta.1

Cirth v0.17.0-beta.1

The first beta of a new default look. The markup you already write keeps
working, and no class or selector is renamed, but almost every page repaints:
a magenta accent on near-grey neutrals, a near-white or near-black page with
surfaces that read as levels, type set by role, quieter controls with one
focus ring, and space between elements decided by what the elements are to
each other. Try it to see what your pages look like under it, and tell us
where it fights them.

This is a beta

Visual defaults may still change during the beta series. The point of
publishing it is to get the new defaults in front of real pages before they
are settled.

npm install @cirthcss/cirth@beta

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

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

The Upgrading page has a
table for each area below, with the override that brings back the v0.16
value where one exists.

Breaking changes

The playroom preset is removed, with no alias. material takes its
place as the preset that overrides broadly; it is Material Design 3's
baseline scheme, not a recolouring of playroom.

<!-- before -->
<link rel="stylesheet" href="dist/presets/playroom.min.css">

<!-- after -->
<link rel="stylesheet" href="dist/presets/material.min.css">

Eleven custom properties are removed, because the roles that replaced
them work differently:

Removed	Instead
--cirth-opacity-disabled, --cirth-form-element-disabled-opacity	Disabled is a state, not a transparency: --cirth-disabled-surface and --cirth-disabled-color
--cirth-form-element-active-background-color	Focus no longer changes a field's fill
--cirth-form-element-active-border-color, --cirth-form-element-valid-active-border-color, --cirth-form-element-invalid-active-border-color	An edge keeps its colour on focus; the ring, --cirth-form-element-focus-color, carries it
--cirth-group-box-shadow-focus-with-button, --cirth-group-box-shadow-focus-with-input	A group draws one outline ring round the row
--cirth-letter-spacing-tight, --cirth-letter-spacing-snug	--cirth-tracking-optical, one relation of size; 0 turns it off
--cirth-typography-spacing-top	margin-block-start on the heading, or --cirth-flow-section and --cirth-flow-group

--cirth-form-element-background-color and --cirth-letter-spacing are no
longer declared by Cirth, but still apply when you set them.

Layouts that leaned on old defaults may need a line of CSS:

If you	Then
Relied on full-width submit buttons	A submit button sizes to its label; add width: 100%, or place it in a .grid
Zeroed margin-bottom on a Cirth element to remove its space	Zero margin-block-start on the element after it
Built a flex or grid row out of Cirth blocks	Give the row gap and its children margin: 0
Styled a focus ring through box-shadow	Focus is an outline, held --cirth-outline-offset off the control
Laid out a checkbox or radio label with display: flex or grid	Set padding-inline-start: 0 and text-indent: 0 on the label

What looks different

Colour. The default accent is magenta (#b431c1 in light, #c638d4 in
dark), the neutrals and both canvases are near-grey at hue 132°, and
success, warning and error take new hues. A --cirth-primary you set is
kept, and every accent role derives from it, under increased contrast too.

Surfaces. The page is near white (L 0.978) or near black (L 0.165).
Code sits on a recessed level, a card on a raised one, and a dialog,
popover or dropdown on the overlay. A field paints the surface it sits on.
Overlays share one shadow, the modal included, and a card casts a faint
contact shadow.

Type. Headings are 600 at 28, 24, 20, 18, 16 and 14px from h1 to
h6, at every viewport width; they no longer grow on wide screens. A
field's label is 14px, a legend outranks it, and column heads, captions
and help text are 13px metadata in the muted ink. A field's value never
renders under 16px.

Controls. The primary is always the heaviest action: .secondary is a
tonal wash with no border. Focus is one opaque ring 2px off every control.
A disabled control is a neutral wash with a quiet label, never a faded
accent. A pressed button moves down 1px when motion is allowed. Inline
code is text in the code face, without a chip.

Corners. Something you operate takes the control radius, now 6px;
something that holds content takes the container radius, 9px. The search
field and the search group lose their pill.

Space. No element carries an outer margin of its own. The second of two
siblings takes a step of a flow scale (8, 16, 32, 48 and 80px at the
default --cirth-spacing) chosen by their relation, and containers own the
space inside them. Stacked fields are 16px apart in a grid or out of one.

Checkbox and radio. The 24px box stays the target, and the mark drawn
in it is 20px. A checked radio is filled with the accent and carries a dot.

Motion and icons. Dialogs, popovers and dropdown lists open with a
short fade, and stay still under reduced motion. The interface icons are
compact filled shapes.

New and changed defaults

• Surfaces: --cirth-surface, --cirth-surface-recessed,
  --cirth-surface-raised, --cirth-surface-overlay.
• Type: --cirth-heading-font-weight, --cirth-title-font-weight,
  --cirth-display-font-size, --cirth-display-font-weight,
  --cirth-label-font-size, --cirth-meta-font-size,
  --cirth-ink-strong, --cirth-tracking-optical.
• Flow: --cirth-flow-line, --cirth-flow-element, --cirth-flow-group,
  --cirth-flow-section, --cirth-flow-chapter.
• Controls: --cirth-outline-offset, --cirth-disabled-surface,
  --cirth-disabled-color, --cirth-control-press-offset,
  --cirth-danger-on-surface.
• The modal: --cirth-modal-background-color, --cirth-modal-box-shadow.
• --cirth-border-radius defaults to 6px, and the container radius derived
  from it to 9px.

API

• Two presets: material and metro, a cobalt accent on achromatic
  neutrals with square corners, no shadows and Segoe in light weights.
• A nav inside a details disclosure stacks: block rows, the current
  entry marked on its inline-start edge, and focus rings drawn inside the
  row. A nav in any other container is unchanged.

Fixed

• A long breadcrumb wraps instead of overflowing a narrow viewport.
• Floating panels stand off the near-black canvas as clearly as off the
  light one.
• A one-character nav link, such as a page number, is a 24px target.
• Increased contrast applies under a root data-theme="dark".
• A custom accent keeps its hue under prefers-contrast: more.
• A focused field with aria-invalid keeps its validation colour.
• A modal footer has the same space above and below its buttons.
• [aria-current] on a file input's button compiles to a valid selector.
• An outline button's hover wash keeps the accent's hue.

Known issues

• When Cirth is loaded inside a shadow root, data-theme="dark" on the
  shadow host leaves the tokens undefined. Put the attribute on an element
  inside the shadow root instead: the .cirth element in a scoped build.
  This also affects v0.16.0.
• 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 the palette,
the type ladder and the spacing between elements, which changed most.
Please open an issue with a screenshot and the page it is on:
https://github.com/cirthcss/cirth/issues.

What's Changed

• Technical language system: foundations, palette, marks, docs and tooling by @ricpastori in #154
• build(deps): resolve the Dependabot alerts in the development tree by @ricpastori in #155
• docs, fix: changelog, upgrade guide and spec status for the next release, and four fixes by @ricpastori in #156
• docs: archive the v0.16 documentation line, start v0.17, and settle the pre leading by @ricpastori in #157
• Integrate develop into master for 0.17.0 by @ricpastori in #158
• Release v0.17.0-beta.1 by @ricpastori in #159

Full Changelog: visual-baselines...v0.17.0-beta.1