@kadal/theme-crayon 0.0.0-stage → 0.4.0

package/README.md

@@ -1,3 +1,66 @@
-# Temporary Holding Version
+# @kadal/theme-crayon
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Crayon**, a theme for [Kadal Deck](https://deck.kadal.cc). A playful pastel theme for workshops and classrooms. Fredoka for headings, Nunito for text, Fira Code for code; cream paper and plum ink, six pastels, chunky ink outlines and offset shadows that look like paper cut-outs. Callouts are stickers, a blockquote is a speech bubble, list bullets are coloured dots, a section title is a big sticker and a fact sits in a round one. The shadows are solid offsets, never blurred, so print and PDF look like the screen.
+
+![Crayon: the cover, a content slide, code and the theme's own layout](./screenshot.jpg)
+
+## Use it
+
+```bash
+npm install @kadal/theme-crayon
+```
+
+```yaml
+---
+theme: crayon
+themeConfig:            # all optional
+  tilt: true
+  accent: "#c62f6b"
+  accentDark: "#ff9cc2"
+---
+```
+
+The deck plugin brings the stylesheet and the module in; nothing to import. The prebuilt shell (the hosted builder, published decks) bundles this theme already. Schemes: light and dark. Fonts: Fredoka (headings), Nunito (text), Fira Code (code), loaded through the theme's `config.fonts`. Code colours: Shiki's catppuccin-latte / catppuccin-macchiato. To show it beside other themes in the theme menu (<kbd>T</kbd>), list it: `themes: [crayon, minimal]`.
+
+## themeConfig
+
+Every key arrives on the deck root as a CSS variable (`accentDark` → `--theme-accent-dark`); the theme reads them with fallbacks, so set only what you change.
+
+| key | type | default | what it does |
+| --- | --- | --- | --- |
+| `tilt` | boolean | `true` | `false` straightens every sticker. |
+| `accent` | colour | `#c62f6b` | The light scheme's accent (berry). |
+| `accentDark` | colour | `#ff9cc2` | The dark scheme's. Without it, a set `accent` is lifted towards white. |
+
+## Layouts
+
+Every built-in layout is styled (`default`, `center`, `cover`, `intro`, `section`, `end`, `fact`, `quote`, `statement`, `full`, `two-cols`, `two-cols-header`, `image`, `image-left`, `image-right`, `iframe`, `iframe-left`, `iframe-right`), and the theme adds:
+
+| layout | what |
+| --- | --- |
+| `activity` | An exercise: a tag (`label:`, default "Activity"), a time chip (`time: 10 min`) and the slide's numbered list as step stickers (`columns:`, default 3). |
+| `cards` | The slide's bullet list as a grid of pastel cards (`columns:`, default 3); a **bold** opening is the card's title. |
+
+## Components
+
+| component | what |
+| --- | --- |
+| `<Sticker tone tilt>` | Words on a pastel cut-out: `tone` pink · mint · sky · butter · lilac · peach (default butter), `tilt` in degrees (default -2). |
+| `<Bubble from side>` | A speech bubble; `from` names the speaker, `side="right"` answers. |
+
+## Preview
+
+`preview/deck.mdx` walks through every layout and component (`theme: ../`). In this repository:
+
+```bash
+bun run --filter @kadal/theme-crayon dev       # the preview deck, live
+node tools/theme-shots.mjs crayon               # screenshots in light and dark, contrast and overflow checks
+```
+
+## Accessibility and print
+
+Body and muted text meet WCAG AA (4.5:1) on the page and on cards in every scheme the theme draws (checked by `tools/theme-shots.mjs`). Anything that moves stands still under `prefers-reduced-motion` and on a still copy; printed pages and exports drop shadows and glows.
+
+## Licence
+
+AGPL-3.0-or-later, like the engine (see LICENSE); a commercial licence is available — see [LICENSING](https://github.com/kadalcc/deck/blob/main/LICENSING.md).

package/index.tsx

@@ -0,0 +1,98 @@
+import type { CSSProperties, ReactNode } from "react";
+
+import type { LayoutProps } from "@kadal/deck";
+
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Crayon's module: two classroom layouts and two cut-outs.
+ *
+ *   layout: activity   an exercise: a tag (`label:`, default "Activity"), a time chip
+ *                      (`time: 10 min`), and the slide's numbered list as step stickers
+ *                      (`columns:` how many to a row, default 3)
+ *   layout: cards      the slide's bullet list as a grid of pastel cards (`columns:`, default 3);
+ *                      a **bold** opening becomes the card's title
+ *   <Sticker tone tilt>     words on a pastel cut-out: tone pink · mint · sky · butter · lilac ·
+ *                           peach (default butter), tilt in degrees (default -2)
+ *   <Bubble from side>      a speech bubble; `from` names the speaker, `side="right"` answers
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+const str = (v: unknown) => (typeof v === "string" && v.trim() ? v.trim() : null);
+const num = (v: unknown) =>
+  typeof v === "number" ? v : typeof v === "string" && /^\d+$/.test(v.trim()) ? Number(v) : null;
+
+function Activity({ children, frontmatter }: LayoutProps) {
+  const time = str(frontmatter.time);
+  const cols = num(frontmatter.columns);
+  return (
+    <div
+      className="deck-layout deck-layout-activity"
+      style={cols ? ({ "--crayon-steps": cols } as CSSProperties) : undefined}
+    >
+      <div className="crayon-activity-head">
+        <span className="crayon-activity-tag">{str(frontmatter.label) ?? "Activity"}</span>
+        {time ? (
+          <span className="crayon-activity-time">
+            <span aria-hidden="true">{"⏱"}</span> {time}
+          </span>
+        ) : null}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function Cards({ children, frontmatter }: LayoutProps) {
+  const cols = num(frontmatter.columns);
+  return (
+    <div
+      className="deck-layout deck-layout-cards"
+      style={cols ? ({ "--crayon-cols": cols } as CSSProperties) : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+const TONES = new Set(["pink", "mint", "sky", "butter", "lilac", "peach"]);
+
+function Sticker({
+  tone = "butter",
+  tilt = -2,
+  children,
+}: {
+  tone?: string;
+  tilt?: number;
+  children?: ReactNode;
+}) {
+  return (
+    <span
+      className={`crayon-sticker tone-${TONES.has(tone) ? tone : "butter"}`}
+      style={{ "--crayon-turn": Number(tilt) || 0 } as CSSProperties}
+    >
+      {children}
+    </span>
+  );
+}
+
+function Bubble({
+  from,
+  side = "left",
+  children,
+}: {
+  from?: string;
+  side?: "left" | "right";
+  children?: ReactNode;
+}) {
+  return (
+    <div className={`crayon-bubble${side === "right" ? " is-right" : ""}`}>
+      {children}
+      {from ? <span className="crayon-bubble-from">{from}</span> : null}
+    </div>
+  );
+}
+
+export default {
+  layouts: { activity: Activity, cards: Cards },
+  components: { Sticker, Bubble },
+};

package/package.json

@@ -1,6 +1,103 @@
 {
   "name": "@kadal/theme-crayon",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.0",
+  "description": "Crayon, a theme for Kadal Deck (@kadal/deck). A playful pastel theme for workshops and classrooms: rounded shapes, a friendly display face, and sticker-like callouts.",
+  "keywords": [
+    "kadal-theme",
+    "kadal-deck",
+    "presentation",
+    "slides",
+    "theme",
+    "playful",
+    "pastel",
+    "workshop",
+    "classroom"
+  ],
+  "homepage": "https://deck.kadal.cc/docs/",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/pmithunish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kadalcc/deck.git",
+    "directory": "packages/theme-crayon"
+  },
+  "bugs": {
+    "url": "https://github.com/kadalcc/deck/issues"
+  },
+  "license": "AGPL-3.0-or-later",
+  "author": "Mithunish Prabhakaran <pmithunish@gmail.com>",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "style.css",
+    "index.tsx",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./index.tsx",
+    "./style.css": "./style.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "kadal": {
+    "theme": {
+      "name": "crayon",
+      "title": "Crayon",
+      "description": "A playful pastel theme for workshops and classrooms: rounded shapes, a friendly display face, and sticker-like callouts.",
+      "colorScheme": "both",
+      "config": {
+        "transition": "slide",
+        "fonts": {
+          "heading": "Fredoka",
+          "sans": "Nunito",
+          "mono": "Fira Code",
+          "weights": "400,500,600,700"
+        }
+      },
+      "themeConfig": {
+        "tilt": true
+      },
+      "shiki": {
+        "light": "catppuccin-latte",
+        "dark": "catppuccin-macchiato"
+      },
+      "defaults": {},
+      "layouts": [
+        "activity",
+        "cards"
+      ],
+      "components": [
+        "Sticker",
+        "Bubble"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "kadal-deck dev -C preview",
+    "check": "kadal-deck check -C preview",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
+  },
+  "peerDependencies": {
+    "@kadal/deck": "^0.4.0",
+    "react": "^19.2.0"
+  },
+  "devDependencies": {
+    "@kadal/deck": "workspace:*",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  }
+}