css-is-awesome 1.10.2 → 1.10.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.10.3](https://github.com/Jerry2d3d/css-is-awesome/compare/v1.10.2...v1.10.3) (2026-09-07)
+
+
+### Bug Fixes
+
+* **site:** recipe .md cross-links render as web routes, not 404s ([7c9ac3b](https://github.com/Jerry2d3d/css-is-awesome/commit/7c9ac3b1480a606020611c0ba946d4c0775bf16e)), closes [#hash](https://github.com/Jerry2d3d/css-is-awesome/issues/hash) [#hash](https://github.com/Jerry2d3d/css-is-awesome/issues/hash)
+
 ## [1.10.2](https://github.com/Jerry2d3d/css-is-awesome/compare/v1.10.1...v1.10.2) (2026-09-07)
 
 

package/README.md

@@ -202,7 +202,7 @@ Missing font files don't error, so a silent tofu box is the failure mode. If you
 
 cia ships **no component library** — deliberately. Interactive patterns arrive as *recipes*: portable markdown files at [`scss/recipes/`](./scss/recipes/) that give you the correct HTML, the `cia.X` mixin calls to style it, and an a11y checklist graded against WCAG 2.2 AA. Copy the pattern into your own framework; you own the component, cia owns the styling and the accessibility homework.
 
-**Shipped:** `dialog`, `combobox`, `print-to-pdf`, `mobile-nav`, `bottom-nav`. Queued next: `datepicker`, `data-table`, `command-palette`.
+**Shipped:** `dialog`, `combobox`, `print-to-pdf`, `print-spec`, `mobile-nav`, `bottom-nav`. Queued next: `datepicker`, `data-table`, `command-palette`.
 
 **Layout doctrine: Grid is the skeleton, Flex is the quick moves.** The page shell is CSS Grid with landmark-named areas (`nav / main / footer` — the map reads like the page); any control-dense region inside gets its own named-area grid whose `gap` carries all vertical rhythm; flex lives at the leaves for one-command flips (`cia.flex($direction: column)`). `cia.page-layout()` and `cia.layout()` own the maps — mobile is a different area map, never margin overrides.
 
@@ -250,7 +250,9 @@ Print support is a pure-CSS layer — the browser's native **Print → Save as P
 
 `print-base` also collapses animations to zero duration and pins them to their final frame, so a page snapshotted mid-entrance-fade doesn't print as invisible text. It deliberately does **not** force `opacity: 1` or `transform: none` — that would fix the fade while flattening every intentional use of the same properties (a 0.15 watermark, a 0.4 disabled control, a stamp rotated `-4deg`). Elements that were never animating are left untouched. Read `--is-print` (`0` on screen, `1` on paper) for custom effects.
 
-Inside `@media print`, `print-base` always forces `color-scheme: light`, so paired `light-dark()` themes print their light branch for free. Four opt-in flags (all default off) take it further: `$legible` darkens the body-text tokens so dark-only themes (Terminal) stay readable as ink on white; `$link-urls` prints every link's destination via `attr(href)`; `$link-origin` prepends an origin so internal `/…` links resolve to full URLs on paper; `$page-numbers` numbers the sheets in the `@page` footer. The docs site and the theme editor at `/themes` turn those flags on to print themselves as paginated spec documents. Full walkthroughs: the [`print-to-pdf`](./scss/recipes/print-to-pdf.md) and [`print-spec`](./scss/recipes/print-spec.md) recipes.
+Inside `@media print`, `print-base` always forces `color-scheme: light`, so paired `light-dark()` themes print their light branch for free. Four opt-in flags (all default off) take it further: `$legible` darkens the body-text tokens so dark-only themes (Terminal) stay readable as ink on white; `$link-urls` prints every link's destination via `attr(href)`; `$link-origin` prepends an origin so internal `/…` links resolve to full URLs on paper; `$page-numbers` numbers the sheets in the `@page` footer. The docs site and the theme editor at `/themes` turn those flags on to print themselves as paginated spec documents.
+
+**See it work.** Two live demonstrations back the walkthroughs. The [`print-spec`](./scss/recipes/print-spec.md) recipe paginates a page into a spec document (cover + table index, one page per section, honest sheet numbers). And [`/examples/print-to-pdf`](https://cssisawesome.com/examples/print-to-pdf/) is a real invoice you `Ctrl+P`: on paper the site chrome and the button vanish, the invoice fills the whole sheet, its links print as full followable URLs (`$link-urls` + `$link-origin`), a sheet number appears, and a **print-only QR code** — generated at build time as inline SVG, zero browser JS, no image fetch — links the paper back to the live [invoice-online](https://cssisawesome.com/examples/print-to-pdf/online) page. Full walkthroughs: the [`print-to-pdf`](./scss/recipes/print-to-pdf.md) and [`print-spec`](./scss/recipes/print-spec.md) recipes.
 
 ### Why the print mixins use `!important`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-is-awesome",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "description": "A token-driven SCSS design system with light/dark theming, semantic color tokens, and a 800+ LOC mixin API.",
   "homepage": "https://github.com/Jerry2d3d/css-is-awesome#readme",
   "bugs": {

package/scss/recipes/print-spec.md

@@ -376,6 +376,23 @@ Pass the size through `print-base` at the root, and set orientation on `@page`:
 
 When a section legitimately spans several pages, drop the page-number column and print the harvested index as plain bullets — an honest "here's what's in this document" without a number that would be a guess. This is what the cia docs do for article prose.
 
+### A print-only QR back to the web (build-time SVG)
+
+A spec printed on paper is a dead end — a reader can't click anything. Close the loop with a QR code that appears **only** on the printed page and encodes the page's own online URL, so a scan jumps straight back to the live document. The cia `/examples/print-to-pdf` showcase does exactly this on an invoice.
+
+Two moves, both already in this recipe's toolkit:
+
+1. **Make the QR paper-only.** Wrap it in `cia.print-only` — hidden on screen, revealed in print — the same helper the cover/index uses.
+
+   ```scss
+   // Paper-only, like the cover/index — no new machinery.
+   .qr { @include cia.print-only; }
+   ```
+
+2. **Generate the QR at build time, as inline SVG.** cia ships no QR generator — that stays the consumer's choice. A build- or server-side library (for example the `qrcode` npm package, called in a server component or a build step) can emit an inline `<svg>` string you drop into the markup. Because the SVG is inlined at build time, **nothing runs in the browser and no image is fetched** — it stays true to cia's zero-JS-on-paper promise. Encode an **absolute** URL (`https://your-site.example/spec/online`) so a scan resolves anywhere, and mark the block `aria-hidden` when an adjacent link or caption already names the destination for a screen reader.
+
+Pair it with an ordinary internal `<a href="/spec/online">` (or your framework's link) inside the printed content: with `$link-urls` + `$link-origin` on (see Styling above), that link prints its **full followable URL** on paper, and the QR gives a phone a one-scan path to the same place. Same destination, two ways onto it — one for a human reading, one for a phone camera.
+
 ## Pitfalls
 
 - **`print-base` must be root/global.** It emits a `:root` block plus `@page`; inside a `.module.scss` that is a hard build error under Next.js CSS Modules pure mode, and wrapping it in a selector double-nests the `:root` it already writes. It belongs at the top level of a single global stylesheet, included once.