web_ui: add print styles, migration order

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzxdWXTUM9dpnCS2wtFkx4

web_ui/TODO-astro-port.md

@@ -70,4 +70,11 @@ update and there must be no console errors.
   - foss-audit: v0.4.0
 - Astro docs: "Publish to NPM" (shipping `.astro`), and `reference/container-reference`.
 
+## order
+Migration order across kuhy's repos:
+1. `web_ui` first (this file), because every other repo waits for its tag.
+2. Content sites next (public sites, e.g. teatr-pw's Astro version).
+3. Small apps after.
+4. `control-panel` and `steam-backlog-enforcer` last, after every other repo.
+
 REMOVE ME AFTER FINISH

web_ui/dist/tokens.css

@@ -162,3 +162,59 @@ body {
   outline: 2px solid var(--focus-ring);
   outline-offset: 1px;
 }
+
+/* Print default (brennenputh.me/blog/printable-websites). Colour tokens are
+ * dropped for paper: black on white, links spelled out, code boxed. Elements
+ * marked .noPrint (nav, header, controls) vanish; .onlyPrint is the inverse
+ * and is hidden on screen by the rule below the block. */
+@media print {
+  .noPrint,
+  nav.noPrint,
+  header.noPrint {
+    display: none;
+  }
+
+  body {
+    background: white;
+    color: black;
+    font-size: 12pt;
+  }
+
+  h1 {
+    font-size: 16pt;
+  }
+
+  h2 {
+    font-size: 14pt;
+  }
+
+  h3 {
+    font-size: 13pt;
+  }
+
+  pre,
+  code {
+    border: 1px solid black;
+    font-size: 11pt;
+    break-inside: avoid;
+  }
+
+  figure,
+  img {
+    break-inside: avoid;
+  }
+
+  a {
+    color: black;
+  }
+
+  a[href^="http"]::after {
+    content: " (" attr(href) ")";
+  }
+}
+
+@media screen {
+  .onlyPrint {
+    display: none;
+  }
+}

web_ui/src/tokens.css

@@ -162,3 +162,59 @@ body {
   outline: 2px solid var(--focus-ring);
   outline-offset: 1px;
 }
+
+/* Print default (brennenputh.me/blog/printable-websites). Colour tokens are
+ * dropped for paper: black on white, links spelled out, code boxed. Elements
+ * marked .noPrint (nav, header, controls) vanish; .onlyPrint is the inverse
+ * and is hidden on screen by the rule below the block. */
+@media print {
+  .noPrint,
+  nav.noPrint,
+  header.noPrint {
+    display: none;
+  }
+
+  body {
+    background: white;
+    color: black;
+    font-size: 12pt;
+  }
+
+  h1 {
+    font-size: 16pt;
+  }
+
+  h2 {
+    font-size: 14pt;
+  }
+
+  h3 {
+    font-size: 13pt;
+  }
+
+  pre,
+  code {
+    border: 1px solid black;
+    font-size: 11pt;
+    break-inside: avoid;
+  }
+
+  figure,
+  img {
+    break-inside: avoid;
+  }
+
+  a {
+    color: black;
+  }
+
+  a[href^="http"]::after {
+    content: " (" attr(href) ")";
+  }
+}
+
+@media screen {
+  .onlyPrint {
+    display: none;
+  }
+}

web_ui/src/tokens.test.ts

@@ -139,4 +139,13 @@ describe("tokens.css", () => {
     // Shadows are ink-tinted rgba; neutrals are never pure.
     expect(css).not.toMatch(/#fff\b|#ffffff\b|#000\b|#000000\b|rgba\(0,\s*0,\s*0/i);
   });
+
+  it("ships a print block that hides .noPrint and boxes code", () => {
+    const print = css.slice(css.indexOf("@media print"));
+    expect(print).toContain(".noPrint");
+    expect(print).toMatch(/font-size:\s*12pt/);
+    expect(print).toMatch(/pre,\s*code\s*{[^}]*1px solid black[^}]*11pt[^}]*break-inside:\s*avoid/);
+    expect(print).toContain('a[href^="http"]::after');
+    expect(css).toMatch(/@media screen\s*{\s*\.onlyPrint\s*{\s*display:\s*none/);
+  });
 });