@slidev-react/theme-paper 0.2.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 slidev-react contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/PaperBadge.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function PaperBadge({ children }: { children: ReactNode }) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-[rgba(146,64,14,0.2)] bg-[rgba(255,247,237,0.95)] px-3 py-1 text-[0.8em] font-semibold uppercase tracking-[0.14em] text-amber-800 shadow-[0_8px_18px_rgba(146,64,14,0.08)]">
+      {children}
+    </span>
+  );
+}

package/index.ts

@@ -0,0 +1,18 @@
+import { defineTheme } from "@slidev-react/core/theme";
+import { PaperCoverLayout } from "./layouts/CoverLayout";
+import { PaperBadge } from "./components/PaperBadge";
+
+export default defineTheme({
+  id: "paper",
+  label: "Paper",
+  colorScheme: "light",
+  rootAttributes: {
+    "data-slide-theme": "paper",
+  },
+  layouts: {
+    cover: PaperCoverLayout,
+  },
+  mdxComponents: {
+    Badge: PaperBadge,
+  },
+});

package/layouts/CoverLayout.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+
+export function PaperCoverLayout({ children }: { children: ReactNode }) {
+  return (
+    <section className="slide-layout-cover grid size-full place-content-center">
+      <div className="paper-cover-shell mx-auto w-full max-w-[1500px] rounded-[32px] border border-[rgba(146,64,14,0.18)] bg-[rgba(255,251,235,0.84)] px-18 py-16 shadow-[0_30px_100px_rgba(146,64,14,0.12)]">
+        <div className="paper-cover-accent mb-8 h-2 w-28 rounded-full bg-[linear-gradient(90deg,#b45309_0%,#f59e0b_100%)]" />
+        {children}
+      </div>
+    </section>
+  );
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@slidev-react/theme-paper",
+  "version": "0.2.5",
+  "type": "module",
+  "main": "./index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./style.css": "./style.css"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "@slidev-react/core": "0.2.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/style.css

@@ -0,0 +1,34 @@
+:root[data-slide-theme="paper"] {
+  --font-sans:
+    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Source Han Serif SC", "Songti SC",
+    serif;
+  --slide-color-body: #3f2a1d;
+  --slide-color-heading: #2b1d12;
+  --slide-color-muted: #6b4f3a;
+  --slide-link-decoration-style: solid;
+  --slide-link-decoration-color: rgba(120, 53, 15, 0.26);
+  --slide-link-decoration-color-hover: rgba(120, 53, 15, 0.48);
+  --slide-list-bullet-bg: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
+  --slide-list-bullet-shadow: 0 0 0 2px rgba(245, 158, 11, 0.12), 0 4px 10px rgba(180, 83, 9, 0.18);
+  --slide-ol-badge-bg: rgba(245, 158, 11, 0.14);
+  --slide-ol-badge-color: #92400e;
+  --slide-blockquote-border-color: #d97706;
+  --slide-blockquote-bg: #fff7ed;
+  --slide-table-head-bg: rgba(146, 64, 14, 0.05);
+  --slide-inline-code-bg: rgba(120, 53, 15, 0.08);
+  --slide-badge-bg: #ffedd5;
+  --slide-badge-color: #9a3412;
+  --slide-badge-border: 1px solid rgba(146, 64, 14, 0.14);
+}
+
+:root[data-slide-theme="paper"] body {
+  background: linear-gradient(180deg, #f8f1e4 0%, #f5efe5 100%);
+}
+
+:root[data-slide-theme="paper"] .slide-prose a {
+  color: #9a3412;
+}
+
+:root[data-slide-theme="paper"] .slide-prose strong {
+  color: #2b1d12;
+}