feat: add fixed editorial presentation canvas

2026-07-05 17:38:41 +07:00
parent 7749a1820d
commit 905a604a74
13 changed files with 456 additions and 30 deletions
@@ -0,0 +1,31 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@theme {
+  --font-editorial: "Newsreader Variable", Georgia, serif;
+  --font-interface: "Source Sans 3", sans-serif;
+  --font-evidence: "IBM Plex Mono", monospace;
+  --color-editorial-paper: oklch(0.975 0.012 82);
+  --color-editorial-ink: oklch(0.19 0.015 65);
+  --color-editorial-muted: oklch(0.48 0.025 65);
+  --color-intent: oklch(0.53 0.17 250);
+  --color-runtime: oklch(0.55 0.14 150);
+  --color-human: oklch(0.68 0.17 55);
+}
+
+.presentation-viewport {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background: oklch(0.13 0.01 65);
+}
+
+.presentation-canvas {
+  position: absolute;
+  transform-origin: top left;
+  overflow: hidden;
+  background: var(--color-editorial-paper);
+  color: var(--color-editorial-ink);
+  font-family: var(--font-interface);
+}
@@ -0,0 +1,17 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const css = readFileSync(
+  join(import.meta.dirname, "editorial.css"),
+  "utf8",
+);
+
+describe("editorial Tailwind integration", () => {
+  it("loads theme and utilities without Preflight", () => {
+    expect(css).toContain('tailwindcss/theme.css');
+    expect(css).toContain('tailwindcss/utilities.css');
+    expect(css).not.toContain('tailwindcss/preflight.css');
+    expect(css).not.toContain('@import "tailwindcss"');
+  });
+});