fertig 2.0.0 → 3.1.0

package/CHANGELOG.md

@@ -6,6 +6,113 @@ is the token names, the class names (the seven, plus the layout utilities),
 and the ARIA attributes the component layer reads — changes to any of those
 are breaking.
 
+## Unreleased
+
+### Changed
+
+- **The 72rem default is now a page shell, not a prose measure.**
+  `.max-w-prose` keeps long-form copy at 38rem, while `.wide` provides an 80rem
+  application column. The documentation and customiser now use the same
+  defaults and terminology as the stylesheet.
+- **The documentation toolbar stays compact on phones.** Its primary controls
+  occupy the first row and its links scroll horizontally on the second instead
+  of wrapping into a tall stack. The Components page is now present in the
+  shared navigation.
+
+### Fixed
+
+- **The minified build preserves descendant selectors.** The old punctuation
+  regex changed selectors such as `nav :is(…)` into `nav:is(…)`, silently
+  breaking row controls and popover menus. The minifier now understands CSS
+  strings and comments, with focused regression tests for both failure modes.
+- **Reduced-transparency preferences reach framework wrappers.** A toolbar
+  inside `#root`, `#app`, `#__next` or `[data-fertig]` now drops its backdrop
+  blur just like a toolbar that is a direct child of `body`.
+
+## [3.0.0] — 2026-08-31
+
+The breaking change is one mechanical line: **every public token now carries a
+`--fertig-` prefix, and the old names are gone** — no aliases, no shims. The
+classes, the layout utilities and the ARIA attributes the component layer reads
+are all untouched. The sheet does exactly what it did; the migration is a
+rename.
+
+`--fertig-a1` / `--fertig-a2` already carried the prefix for the reason the rest
+receive it now: a short, unprefixed custom property is a bet you only lose
+once. `--ac` collided with your own `--ac`; the prefix makes every token yours
+to override, and no future rename is ever needed again.
+
+**To migrate:** prefix whatever you override. `--w` → `--fertig-w`,
+`--ac` / `--on-ac` → `--fertig-ac` / `--fertig-on-ac`, the radii
+`--r` / `--rs` / `--rw` → `--fertig-*`, the surfaces (`--bg`, `--el`, `--face`,
+`--fg`, `--mut`, `--bd`, `--tb`, `--nw`), the depth tokens (`--up`, `--up2`,
+`--dn`, `--sh`, `--sh1`, `--sh2`, and the `@property` alphas `--a1` / `--a2`),
+the motion tokens (`--ease`, `--ease-in`, `--ease-out`, `--dur-1`, `--dur-2`),
+`--caps`, and the colour ramps (`--stone-*`, `--sage-*`, `--sky-*`, `--clay-*`,
+`--plum-*`, `--gold-*`). The rule is one line: **any `--name` you set becomes
+`--fertig-name`.** Nothing changed meaning.
+
+### Changed
+
+- **The palette moves to a cooler voice.** Neutrals are a cool graphite
+  (hue ≈ 258) with a faint violet cast, replacing the warm stone; the accent is
+  a violet-blue (hue 266), replacing indigo. Measured: the accent clears 6.21:1
+  as link text on paper and 6.39:1 for a white label on the fill in light,
+  8.62:1 in dark — both sit inside sRGB. The
+  `@supports not (color: light-dark(…))` flat-sRGB fallback is restated to match,
+  and every pair still clears WCAG AA in both schemes.
+- **Buttons are fully rounded.** The shared button rule takes a new
+  `--fertig-rp` (pill) token instead of the control radius. It matches the
+  badge, the switch and the progress bar, which were already pills. Set
+  `--fertig-rp: var(--fertig-r)` for square-shouldered buttons.
+- **One radius, and the rest derived from it.** `--fertig-r` (12px) is the base;
+  `--fertig-rs` is `calc(var(--fertig-r) * .5)` and `--fertig-rw` is
+  `calc(var(--fertig-r) * 1.33)`, so setting the base on `:root` rescales the
+  whole sheet instead of desynchronising it. Windows — cards, dialogs, popover
+  menus, the select picker, `pre`, `details`, `fieldset`, `aside`, toasts —
+  now take `--fertig-rw` rather than the control radius, and full-bleed card
+  media follows the card it bleeds into.
+- **Badges are uppercase.** They already used the caps *size*; they never got
+  the transform that `h5`, `h6` and `th` get.
+- **The dialog lost its banded rules.** No hairline under the header or over
+  the footer by default; the separation is spacing. The rule now arrives as
+  scroll state — a scroll-driven animation fades it in under the header once the
+  body has scrolled and out of the footer at the end — so a dialog that fits
+  shows no rules at all. Title takes `--fertig-f`, the interface face, at
+  600/1.1rem: a monospaced heading font reads as a terminal on a dialog.
+- **The `err` tone is red, not clay.** `[data-tone=err]` borrowed
+  `--fertig-clay-700`, which at 50% lightness reads brown on a destructive
+  button. Now `oklch(52% .16 27)` / `oklch(74% .13 25)` — 5.97:1 with the white
+  label, and `--fertig-on-ac` still derives correctly in both themes.
+- **The select picker animates open and closed**, with `display` and `overlay`
+  transitioned discretely so the close is not a pop.
+
+### Fixed
+
+- **`accent-color` and `caret-color` ignored every local accent.** Both were
+  declared once on `:root`. They are inherited properties, so they resolved
+  there against the root accent and every descendant inherited that *computed
+  colour* — a `[data-accent]` or `[data-tone]` subtree repainted its buttons and
+  links but left its checkboxes, radios, ranges and caret on the root's tint.
+  Both are now re-declared on the elements that consume them.
+- **The segmented control showed a vertical scrollbar.** `overflow-x: auto`
+  makes `overflow-y` compute to `auto` as well, and Safari paints a scrollbar
+  for a sub-pixel of overflow. The block axis is now clipped (`overflow: auto
+  clip`), and group children take their focus ring inside the edge
+  (`outline-offset: -3px`) so the clip cannot slice it.
+- **The `<select>` marker was a different shape per engine.** Engines without
+  `appearance: base-select` fell back to a solid filled triangle while the
+  styleable picker drew a thin chevron. The fallback now draws the same
+  stroked chevron.
+- **The docs site is built with Eleventy.** The pages moved out of hand-edited
+  HTML at the repo root into `src/` templates that build to `dist/`, with the
+  version flowing from `package.json` as the single source of truth. This is how
+  the sheet's own site is maintained; it is not part of the npm package, which
+  ships the two CSS files plus the README and licence.
+- **The demo template pages are gone.** `app.html`, `app-invoice.html` and the
+  whole `templates/` set (`dashboard`, `article`, `pricing`, `signin`) are
+  removed from the site and repo; the docs no longer point at them.
+
 ## [2.0.0] — 2026-08-31
 
 ### Breaking

package/README.md

@@ -7,7 +7,7 @@ switched off.
 
 Link it, write ordinary HTML, and the page is finished.
 
-**32.7 KB raw · 8.4 KB gzipped · no build step · no dependencies · no JavaScript.**
+**36.9 KB raw · 8.8 KB gzipped · no build step · no dependencies · no JavaScript.**
 
 ### What makes it different
 
@@ -32,7 +32,7 @@ Surveyed across the eleven most-used classless stylesheets on 2026-08-31
 It is *not* the smallest — Concrete.css is 1.2 KB gzipped, and most of the
 field is a fraction of this because it styles elements and stops there. Against
 the two classless sheets that also ship a component layer, fertig is the
-lightest: 8.4 KB against matcha's 8.6 KB and Pico classless at 10.2 KB, and the
+lightest: 8.8 KB against matcha's 8.8 KB and Pico classless at 10.2 KB, and the
 only one of the three whose components work without JavaScript. Size is a
 constraint here, not the pitch.
 
@@ -56,17 +56,40 @@ attributes. The snippet is in the docs.
 That is the whole integration. Write semantic HTML; it looks finished.
 Open `index.html` for the full demo.
 
-## Upgrading from 1.x
+## Upgrading from 2.x
 
-One rename: `--a1` / `--a2` are now `--fertig-a1` / `--fertig-a2`. They are
-`@property` registrations, and a registration is global — a two-character name
-was silently retyping a `--a1` of your own. If you set them, rename them; the
-values mean the same thing. If you did not, there is nothing to do.
+3.0 is breaking for one reason: **every public token now carries a `--fertig-`
+prefix**, and the old names are gone — no aliases. The classes, the ARIA
+attributes the components read, and the layout utilities are all unchanged.
+The sheet's behaviour is the same; the migration is a rename.
 
-Every other token, class and attribute is unchanged. The default look does
-change visibly though — larger radii, no filled strip behind card headers, an
-indigo accent — so read it as a redesign, not a drop-in bump. Pin `fertig@1`
-if you need the old appearance.
+If you override tokens, prefix what you set. The common ones:
+
+| 2.x | 3.0 |
+|---|---|
+| `--ac` | `--fertig-ac` |
+| `--on-ac` | `--fertig-on-ac` |
+| `--w` | `--fertig-w` |
+| `--r` / `--rs` / `--rw` | `--fertig-r` / `--fertig-rs` / `--fertig-rw` |
+| `--bg` / `--el` / `--face` / `--fg` / `--mut` / `--bd` / `--tb` | `--fertig-*` (same short name) |
+| `--up` / `--up2` / `--dn` / `--sh` / `--sh1` / `--sh2` | `--fertig-up` / `--fertig-up2` / `--fertig-dn` / `--fertig-sh` / `--fertig-sh1` / `--fertig-sh2` |
+| fonts `--f` / `--fm`, measure `--w`, caps `--caps`, `--nw` | `--fertig-*` |
+| color ramps `--stone-*` / `--sage-*` / `--sky-*` / `--clay-*` / `--plum-*` / `--gold-*` | `--fertig-*` (same stop) |
+
+The rule is simple: **any `--name` you set becomes `--fertig-name`.** Nothing
+changed meaning; the prefix exists so the sheet never collides with a custom
+property of yours (it is the same reason `--fertig-a1` / `--fertig-a2` were
+already prefixed — those are `@property` registrations, which are global).
+
+Two defaults change visually, so pin `fertig@2` if you want the old look:
+
+- **Palette.** Accents and neutrals moved to a cooler voice — graphite
+  neutrals and a violet-blue accent — replacing the older indigo/warm scheme.
+- **Buttons.** Fully rounded (`border-radius: 999px`) instead of the moderate
+  radius.
+
+The docs site was also rebuilt and the two demo pages (`app.html` /
+`app-invoice.html`) are gone. None of that touches the sheet.
 
 ## Install
 
@@ -76,7 +99,7 @@ npm install fertig
 
 ```html
 <!-- or from a CDN, pinned -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fertig@2/fertig.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fertig@3/fertig.min.css">
 ```
 
 ```css
@@ -86,14 +109,16 @@ npm install fertig
 
 ## What it is
 
-Opinions, so you don't have to have them: system type, one accent, one
-measure, a window on a desktop. The structure is classic — a title bar, sunken
+Opinions, so you don't have to have them: system type, one accent, one page
+width, a window on a desktop. The structure is classic — a title bar, sunken
 fields, raised buttons — and the finish is macOS: vibrancy, hairlines, soft
-radii, the blue focus ring. None of it is a period costume, and none of it is
-a picture of an OS: it is all CSS that every current engine already ships.
+radii, a violet-blue focus ring over cool graphite neutrals. None of it is a
+period costume, and none of it is a picture of an OS: it is all CSS that every
+current engine already ships.
 
-- **System type, set properly** — 16px on a 1.65 line height across roughly
-  seventy characters. Code keeps a monospace face, where it earns its place.
+- **System type, set properly** — 16px on a 1.65 line height. Long-form copy
+  gets a roughly seventy-character measure with `.max-w-prose`. Code keeps a
+  monospace face, where it earns its place.
 - **A window on a desktop.** `<nav>` becomes a full-bleed toolbar with a
   vibrancy blur; `header`/`main`/`footer` are the paper.
 - **Depth from hairlines and soft shadows.** Buttons and cards sit above the
@@ -109,13 +134,17 @@ Direct children of `<body>` are the containers:
 
 ```html
 <body>
-  <nav>…</nav>       <!-- toolbar: full-bleed, contents on the measure -->
+  <nav>…</nav>       <!-- toolbar: full-bleed, contents on the page column -->
   <header>…</header>
   <main>…</main>
   <footer>…</footer>
 </body>
 ```
 
+The default page shell is `72rem`, roomy enough for application layouts and
+documentation. Add `.max-w-prose` to long-form content for a readable `38rem`
+line length, or `.wide` to a shell that genuinely needs the `80rem` column.
+
 One wrapper is fine. React, Vue, Svelte and Next render into a mount node, so
 the shell matches `body`'s children *or* the children of a single `#root`,
 `#app`, `#__next`, or `[data-fertig]` wrapper:
@@ -203,30 +232,47 @@ where `.max-w-2xl` works and `.max-w-3xl` silently does not is worse than no
 scale at all. They are `max-inline-size`, so they still mean "along the text"
 in a vertical writing mode, and they outrank the sheet's own measure on
 `body > *`, so they retarget a page container as readily as anything inside
-one. `.max-w-prose` is that measure, as a class.
+one. `.max-w-prose` is a fixed `38rem` reading measure, independent of the
+`72rem` page shell.
 
 ## Customising
 
-Override the four tokens you'd actually want to change:
+Override the tokens you'd actually want to change:
 
 ```css
 :root {
-  --ac: light-dark(#c2410c, #fb923c);  /* accent */
-  --w: 48rem;                          /* measure */
-  --r: 0px;                            /* control radius — go sharp */
-  --f: "Inter", system-ui, sans-serif; /* text font */
+  --fertig-ac: light-dark(oklch(50% .22 266), oklch(78% .13 266)); /* violet-blue accent */
+  --fertig-w: 48rem;                                              /* page shell width */
+  --fertig-r: 0px;                                                /* control radius — go sharp */
+  --fertig-f: "Inter", system-ui, sans-serif;                     /* text font */
 }
 ```
 
-If you change `--ac`, check `--on-ac` too — that is the text colour sitting on
-the accent, and a light accent needs dark text to stay legible.
-`--up` / `--up2` / `--dn` are the elevation scale, `--fertig-a1` /
-`--fertig-a2` the shadow alphas (these two are `@property` registrations, and
-a registration is global — hence the prefix), `--rw` the window radius, and `--nw` the column the toolbar's contents
-line up with. `--nw` follows `--w`, so nothing moves by default; `<nav
-class="wide">` re-points it at the wide column, which is what an app screen
-built on `.wide` wants so its wordmark doesn't float in the middle of the
-viewport.
+The accent is the only colour most people touch. In 3.0 the default is a
+violet-blue (`hue 266`) sitting on cool graphite neutrals (`hue 258`); the
+`data-accent` attribute retints a whole region without touching tokens:
+
+```html
+<section data-accent="sage">…</section>  <!-- or sky, clay, plum, gold, slate -->
+```
+
+Tones work the same way — `data-tone="ok|warn|err"` retints any component
+without a round trip through the tokens:
+
+```html
+<button data-tone="err">Delete</button>
+```
+
+If you change `--fertig-ac`, check `--fertig-on-ac` too — that is the text
+colour sitting on the accent, and a light accent needs dark text to stay
+legible. `--fertig-up` / `--fertig-up2` / `--fertig-dn` are the elevation
+scale, `--fertig-a1` / `--fertig-a2` the shadow alphas (these two are
+`@property` registrations, and a registration is global — hence the prefix),
+`--fertig-rw` the window radius, and `--fertig-nw` the column the toolbar's
+contents line up with. `--fertig-nw` follows `--fertig-w`, so nothing moves by
+default; `<nav class="wide">` re-points it at the wide column, which is what an
+app screen built on `.wide` wants so its wordmark doesn't float in the middle
+of the viewport.
 
 ## Also handled
 
@@ -280,7 +326,7 @@ assistive technology reads.
 
 | Sheet | Raw | Gzip |
 |---|---:|---:|
-| **fertig** | **32.7 KB** | **8.4 KB** |
+| **fertig** | **36.9 KB** | **8.8 KB** |
 | Pico 2.1.1 classless | 69.4 KB | 10.1 KB |
 
 Measured with `gzip -9`, KB = 1024 bytes for every row. Most of the gap is Pico's full
@@ -364,19 +410,17 @@ and on the [docs site](https://moji2002.github.io/fertig/docs.html#support).
 ## Development
 
 ```sh
-npm run dev      # serve on :8899
-npm run build    # regenerate fertig.min.css and print sizes
+npm run build      # regenerate fertig.min.css and print sizes
+npm run site       # build the site into dist/ with Eleventy
+npm run site:serve # build + live-reload on :8080 (the Eleventy dev server)
+npm run sizes      # sync the size claims in README + site copy
 ```
 
 ## Builds
 
 | Build | Raw | Gzip | |
 |---|---:|---:|---|
-| `fertig.min.css` | 32.7 KB | 8.4 KB | everything |
-| `fertig.core.min.css` | 25.0 KB | 6.9 KB | without the ARIA component layer |
-
-Dropping the component layer saves 1.4 KB gzipped — worth knowing, rarely worth
-doing. The weight is in the element coverage and forms, not the components.
+| `fertig.min.css` | 36.9 KB | 8.8 KB | everything |
 
 ## Files
 
@@ -384,21 +428,19 @@ The sheet:
 
 - `fertig.css` — source, commented
 - `fertig.min.css` — minified, what you ship
-- `fertig.core.min.css` — the same without the ARIA component layer
 - `build.js` — minifier and size report
 
-The site:
+The site (Eleventy, output to `dist/`):
 
-- `index.html` — landing page, with a live customiser that writes the token
-  block for you
-- `docs.html` — documentation
-- `blocks.html` — ready-to-use markup blocks (16 of them); the code shown is
-  generated from the live preview, so it cannot drift
-- `app.html`, `app-invoice.html` — full product screens built with no page CSS
-  at all
-- `templates/` — four whole pages: `dashboard`, `article`, `pricing`, `signin`
+- `src/_includes/layout.njk` — shared head + nav
+- `src/_data/site.js` — version pulled from `package.json` (the one source of truth)
+- `src/{index,docs,blocks}.njk` — page templates, generated from the root
+  HTML by `tools/build-src.py`
+- `index.html`, `docs.html`, `blocks.html` — the authored source for each page
+  (the live customiser on the landing page writes the token block for you)
 - `site.css`, `site.js`, `icons.svg`, `favicon.svg` — the site's own chrome,
   none of it part of the sheet
+- `dist/` — the built site that GitHub Pages deploys
 
 Everything else:
 
@@ -406,6 +448,9 @@ Everything else:
 - `CHANGELOG.md` — what changed and why, per release
 - `docs/classless-css-research.md` — the research behind the decisions
 
+The sheet itself ships without the site — the npm package holds the two CSS
+files plus the README and licence, nothing else.
+
 ## License
 
 MIT © Mojtaba Beheshti