@cirthcss/cirth 0.3.0 → 0.4.0

package/README.md

@@ -1,20 +1,21 @@
 <p align="center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset=".github/logo-dark.svg">
-    <source media="(prefers-color-scheme: light)" srcset=".github/logo-light.svg">
-    <img alt="Cirth" src=".github/logo-light.svg" width="112" height="112">
+    <source media="(prefers-color-scheme: dark)" srcset="docs/public/logo_brand_app_dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="docs/public/logo_brand_app.svg">
+    <img alt="Cirth" src="docs/public/logo_brand_app.svg" width="120" height="120">
   </picture>
 </p>
 
 <h1 align="center">Cirth</h1>
 
 <p align="center">
-  <strong>Semantic by default. Classes only when needed.</strong>
+  <strong>Write HTML. It's already styled.</strong>
 </p>
 
 <p align="center">
-  Semantic-first CSS for production-ready interfaces with clean HTML,
-  modern CSS, and minimal class noise.
+  Semantic-first CSS where standard elements carry the styling: nav,
+  article, button, table. Classes exist only for the few things HTML can't
+  say.
 </p>
 
 <p align="center">
@@ -22,15 +23,17 @@
   ·
   <a href="#builds">Builds</a>
   ·
+  <a href="#presets">Presets</a>
+  ·
   <a href="#customization">Customization</a>
   ·
   <a href="#documentation">Documentation</a>
   ·
+  <a href="#contributing">Contributing</a>
+  ·
   <a href="#browser-support">Browser support</a>
   ·
   <a href="#philosophy">Philosophy</a>
-  ·
-  <a href="#comparison">Comparison</a>
 </p>
 
 <p align="center">
@@ -49,7 +52,7 @@
 Include one stylesheet and write ordinary semantic HTML.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.3.0/dist/cirth.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.4.0/dist/cirth.min.css">
 ```
 
 ```html
@@ -101,10 +104,9 @@ The main generated stylesheets are:
 | `dist/cirth.scoped.min.css` | Scoped build for embedding Cirth under `.cirth`. |
 | `dist/cirth.classless.scoped.min.css` | Scoped classless build. |
 
-Theme-specific builds are also generated, for example
-`dist/cirth.jade.min.css` and `dist/cirth.classless.slate.min.css`. Cirth
-ships three maintained themes — azure (default), jade, and slate — each with
-light and dark variants. See [Colors](docs/colors.md) for the full list.
+All four builds share Cirth's one official theme (amber), with light and
+dark variants. `cobalt` and `coral` are optional presets, not separate theme
+builds — see [Presets](#presets) below and [Colors](docs/colors.md).
 
 ### Classless
 
@@ -131,6 +133,34 @@ when embedding Cirth into an existing page, CMS, widget, or application shell.
 </div>
 ```
 
+## Presets
+
+`cobalt` and `coral` are optional presets: stylesheets that override an
+existing set of custom properties (color, shadow, type, spacing, motion) on
+top of the default theme. They're worked examples of restyling the system,
+not independently maintained themes — load one after the main stylesheet.
+
+- **`cobalt`** — corporate: deep navy primary, cool-toned neutrals, a flat
+  shadow, a business-like Arial/Helvetica font stack, denser spacing,
+  snappier motion, square corners.
+- **`coral`** — playful: vivid warm primary, warm-toned neutrals, a soft
+  coral-tinted glow shadow, a friendly Trebuchet MS font stack, looser
+  spacing, bouncy motion, extra-rounded corners.
+
+Like the default theme, presets stick to fonts that ship with every major
+OS — no `@import`, no webfont, zero network requests.
+
+```html
+<link rel="stylesheet" href="dist/cirth.min.css">
+<link rel="stylesheet" href="dist/presets/cobalt.min.css">
+```
+
+```js
+import "@cirthcss/cirth/presets/cobalt";
+```
+
+See [Colors](docs/colors.md) for what each preset changes.
+
 ## Customization
 
 Cirth is CSS-first. Override custom properties in your own stylesheet after
@@ -163,10 +193,12 @@ detail.
 
 ## Documentation
 
-The full documentation lives in [`docs/`](docs/) as a
-[VitePress](https://vitepress.dev) site with live examples. The site itself
-is styled with Cirth's own default build — the header, sidebar, prose, and
-every demo are ordinary semantic HTML dogfooding the framework.
+The full documentation is published at
+[cirthcss.github.io/cirth](https://cirthcss.github.io/cirth/), built from
+[`docs/`](docs/) as a [VitePress](https://vitepress.dev) site with live
+examples. The site itself is styled with Cirth's own default build — the
+header, sidebar, prose, and every demo are ordinary semantic HTML dogfooding
+the framework.
 
 Run it locally:
 
@@ -218,18 +250,48 @@ npm run docs:dev
   [Accessibility](docs/utilities/accessibility.md) ·
   [Reduce motion](docs/utilities/reduce-motion.md)
 - **Project** —
-  [Build tooling](docs/build-tooling.md) ·
-  [Contributing](.github/CONTRIBUTING.md) ·
+  [Examples](docs/examples.md) ·
+  [Contributions](docs/contributions.md) ·
+  [Brand](docs/brand.md) ·
   [Changelog](CHANGELOG.md)
 
+## Contributing
+
+Start with [Contributions](docs/contributions.md). It explains the local
+setup, the source layout, the package exports, and the project constraints
+that matter most when changing Cirth.
+
+For pull requests, issue triage, and the exact collaboration workflow, read
+[`.github/CONTRIBUTING.md`](.github/CONTRIBUTING.md). If your change touches
+the visual identity, check [Brand](docs/brand.md) first; if it changes the
+public package surface, update [CHANGELOG.md](CHANGELOG.md) in the same
+branch.
+
+Useful local checks before opening a PR:
+
+```sh
+npm run build
+npm run docs:build
+npm pack --dry-run
+```
+
 ## Browser Support
 
 Cirth is designed and tested for the latest stable Chrome, Edge, Firefox,
 and Safari releases. The compiled CSS is processed with Lightning CSS
-against the Browserslist [`defaults`](https://browsersl.ist/#q=defaults)
-query (roughly: the last two versions of each major browser, everything
-above 0.5% global usage, and Firefox ESR). No version of Internet Explorer
-is supported.
+against this Browserslist target:
+
+```json
+[
+  "Chrome >= 111",
+  "Edge >= 111",
+  "Firefox >= 113",
+  "Safari >= 15.4",
+  "iOS >= 15.4"
+]
+```
+
+No version of Internet Explorer is supported.
 
 ## Philosophy
 
@@ -244,66 +306,6 @@ Core principles:
 - Avoid utility-first class soup and broad component catalogs.
 - Keep customization based on CSS custom properties.
 
-## Comparison
-
-Cirth, Pico CSS, and Tailwind CSS solve the same broad problem — styling
-HTML — with different trade-offs. This is directional, not a benchmark;
-actual bundle size depends on the utilities or components you end up using
-in every case.
-
-| | Cirth | Pico CSS | Tailwind CSS |
-| --- | --- | --- | --- |
-| Styling model | Semantic HTML first; classes only where semantics run out | Semantic HTML first; classes only where semantics run out | Utility-first; classes on nearly every element |
-| Typical markup | `<button>`, `<article>`, `<nav>` — no `.btn`, `.card` | Same | `<button class="rounded bg-blue-600 px-4 py-2 ...">` |
-| Customization | CSS custom properties, override after loading | CSS custom properties, override after loading | Config file (`tailwind.config.js`) plus utility classes |
-| Build step | None to use the default build; only needed to pick a theme | None to use the default build | Required for any production bundle (JIT/content scanning) |
-| Themes | 3 maintained (azure, jade, slate), light/dark each | ~20 accent colors, light/dark each | None built in; arbitrary via config |
-| Default build, gzip | ~13KB | ~11.5KB | No single default — depends entirely on utilities used |
-| Public Sass API | No — CSS only | Yes | N/A |
-
-**"Classless" Tailwind** setups — writing `@apply` rules against bare
-elements (`h1`, `button`, `article`) instead of adding utility classes to
-markup — get close to Cirth's authoring experience, but that layer is
-something you assemble yourself against Tailwind's utility values. It still
-needs the full Tailwind build pipeline (PostCSS, content scanning, JIT) and
-isn't a published, versioned stylesheet you can link directly. Cirth and
-Pico ship that layer already built, tuned, and versioned.
-
-Cirth is a fork of Pico CSS; the practical difference today is scope. Pico
-maintains a broader theme and utility surface and a public Sass API. Cirth
-trims both in exchange for a smaller, more curated build — see
-[Differences From Pico CSS](#differences-from-pico-css) below for specifics.
-
-## Differences From Pico CSS
-
-Cirth began as a fork of Pico CSS, but it should be treated as an independent
-framework rather than a promise of permanent drop-in compatibility.
-
-The most important user-facing differences are:
-
-- Cirth uses the `@cirthcss/cirth` package name and the `--cirth-` CSS custom
-  property prefix.
-- The published package is CSS-only; SCSS is repository source, not a public
-  Sass API.
-- The active build set is focused on default, classless, scoped, and scoped
-  classless CSS.
-- Scoped builds target a `.cirth` wrapper, including custom properties,
-  document styles, color schemes, and modal states.
-- Standalone color utility builds and fluid classless builds are not part of
-  the public build surface.
-- The inherited 20-accent theme set has been reduced to three maintained
-  themes: azure (default), jade, and slate.
-
-## Roadmap
-
-Cirth is under active development, working toward a stable 1.0. The main
-public priorities are:
-
-- stabilize the CSS custom property surface;
-- audit inherited Pico CSS bugs and keep the fixes relevant to Cirth;
-- refine layout primitives and decide which utilities should remain;
-- document the supported build variants and migration notes from Pico CSS.
-
 ## License
 
 Licensed under the [MIT License](LICENSE.md).