@kadal/theme-ocean 0.0.0-stage → 0.4.0

package/README.md

@@ -1,3 +1,65 @@
-# Temporary Holding Version
+# @kadal/theme-ocean
 
-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.
+**Ocean**, a theme for [Kadal Deck](https://deck.kadal.cc). Kadal's own theme. *Kadal* is Tamil for the sea, and the palette is the one [kadal.cc](https://kadal.cc) dives through: sunlit shallows in the light scheme (foam, sky and deep-sea ink), midnight water in the dark one (twilight blue, bioluminescent cyan, lure amber). Calm gradients for the page, Catamaran for type, Night Owl for code. Made to be a good default for a new deck.
+
+![Ocean: the cover, a content slide, code and the theme's own layout](./screenshot.jpg)
+
+## Use it
+
+```bash
+npm install @kadal/theme-ocean
+```
+
+```yaml
+---
+theme: ocean
+themeConfig:            # all optional
+  accent: "#1d63a8"
+  accentDark: "#5ff7ff"
+  waves: true
+---
+```
+
+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: Catamaran (text and headings), JetBrains Mono (code), loaded through the theme's `config.fonts`. Code colours: Shiki's night-owl-light / night-owl. To show it beside other themes in the theme menu (<kbd>T</kbd>), list it: `themes: [ocean, 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 |
+| --- | --- | --- | --- |
+| `accent` | colour | `#1d63a8` | The accent in the light scheme (links, bullets, the progress bar). |
+| `accentDark` | colour | `#5ff7ff` | The accent in the dark scheme. Without it, a set `accent` is lifted towards white. |
+| `waves` | boolean | `true` | `false` hides the swells along the cover's foot. |
+
+## 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 |
+| --- | --- |
+| `waves` | A cover with the sea moving along the bottom edge. `align: center` centres it. The swells stand still under `prefers-reduced-motion` and in print. |
+| `depth` | A section opener: its number (counted, or `n:`), a label (`depth: "200 m · twilight"`) and a sounding line down the side marking how far into the deck it is. |
+
+## Components
+
+| component | what |
+| --- | --- |
+| `<Wave />` | A single swell as a divider, in the accent colour; `flip` turns it over. |
+
+## Preview
+
+`preview/deck.mdx` walks through every layout and component (`theme: ../`). In this repository:
+
+```bash
+bun run --filter @kadal/theme-ocean dev       # the preview deck, live
+node tools/theme-shots.mjs ocean               # 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,113 @@
+import { type LayoutProps, useDeck, useSlideOptional } from "@kadal/deck";
+
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Ocean's module: two layouts and a divider. The stylesheet (style.css) styles every built-in
+ * layout; these add what a sea-themed deck reaches for.
+ *
+ *   layout: waves    a cover with the sea moving along the bottom edge (`align: center` centres
+ *                    it); the swells stand still under prefers-reduced-motion and in print
+ *   layout: depth    a section opener: its number, a label (`depth: "200 m · twilight"`), and a
+ *                    sounding line down the side marking how far into the deck it is
+ *   <Wave />         a single swell as a divider, in the accent colour
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+const str = (v: unknown) => (typeof v === "string" && v.trim() ? v.trim() : null);
+
+/**
+ * A swell as an SVG path: `periods` crests across 2880 units (twice the visible width, so a
+ * -50% drift loops without a seam), `amp` high, its mean line at `base` from the top of 320.
+ */
+function swell(periods: number, amp: number, base: number, phase = 0): string {
+  const w = 2880;
+  const step = w / (periods * 2);
+  let d = `M0 ${base + Math.sin(phase) * amp}`;
+  for (let i = 0; i < periods * 2; i++) {
+    const x0 = i * step;
+    const crest = i % 2 === 0 ? -amp : amp;
+    d += ` Q${x0 + step / 2} ${base + crest * 1.6 + Math.sin(phase) * amp * 0.2} ${x0 + step} ${base}`;
+  }
+  return `${d} L${w} 320 L0 320 Z`;
+}
+
+const SWELLS = [swell(4, 22, 120, 0.4), swell(6, 16, 175, 1.2), swell(8, 12, 235, 2.1)];
+
+function Waves({ children, frontmatter }: LayoutProps) {
+  const center = str(frontmatter.align) === "center";
+  return (
+    <div className={`deck-layout deck-layout-waves${center ? " is-center" : ""}`}>
+      <div className="ocean-waves-body">{children}</div>
+      {/* placed, not flowed (deck-absolute): the auto-fit does not count the swells as overflow */}
+      <div className="ocean-waves deck-absolute" aria-hidden="true">
+        <svg viewBox="0 0 2880 320" preserveAspectRatio="none">
+          {SWELLS.map((d, i) => (
+            <path key={i} className={`ocean-swell-${i + 1}`} d={d} />
+          ))}
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+/** Which depth opener this is (1-based), counting only `layout: depth` slides before it. */
+function useDepthNumber(): { n: number; at: number } {
+  const deck = useDeck();
+  const slide = useSlideOptional();
+  const index = slide?.meta.index ?? 0;
+  const slides = deck.manifest.slides;
+  const n = slides.filter((s) => s.index <= index && s.frontmatter.layout === "depth").length;
+  return { n: Math.max(1, n), at: slides.length > 1 ? index / (slides.length - 1) : 0 };
+}
+
+const TICKS = 21;
+
+function Depth({ children, frontmatter }: LayoutProps) {
+  const { n, at } = useDepthNumber();
+  const label = str(frontmatter.depth);
+  const given = frontmatter.n == null ? "" : String(frontmatter.n).trim();
+  const number = given || String(n).padStart(2, "0");
+  const here = Math.round(at * (TICKS - 1));
+  return (
+    <div className="deck-layout deck-layout-depth">
+      <div className="ocean-depth-number" aria-hidden="true">
+        {number}
+      </div>
+      <div className="ocean-depth-body">
+        {label ? <span className="ocean-depth-meta">{label}</span> : null}
+        {children}
+      </div>
+      <div className="ocean-depth-gauge" aria-hidden="true">
+        {Array.from({ length: TICKS }, (_, i) => (
+          <span key={i} className={i === here ? "is-here" : undefined} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** A divider: one swell across the column, in the accent colour (`flip` turns it over). */
+function Wave({ flip = false, className }: { flip?: boolean; className?: string }) {
+  return (
+    <svg
+      className={["ocean-wave", className].filter(Boolean).join(" ")}
+      viewBox="0 0 240 14"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+      style={flip ? { transform: "scaleY(-1)" } : undefined}
+    >
+      <path
+        d="M2 7 Q 17 -1 32 7 T 62 7 T 92 7 T 122 7 T 152 7 T 182 7 T 212 7 T 238 7"
+        fill="none"
+        strokeWidth="2.4"
+        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+}
+
+export default {
+  layouts: { waves: Waves, depth: Depth },
+  components: { Wave },
+};

package/package.json

@@ -1,6 +1,101 @@
 {
   "name": "@kadal/theme-ocean",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.0",
+  "description": "Ocean, a theme for Kadal Deck (@kadal/deck). Kadal's own theme: the sea's palette from sunlit shallows to midnight water, calm gradients and polished type.",
+  "keywords": [
+    "kadal-theme",
+    "kadal-deck",
+    "presentation",
+    "slides",
+    "theme",
+    "ocean",
+    "sea",
+    "kadal",
+    "gradient"
+  ],
+  "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-ocean"
+  },
+  "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": "ocean",
+      "title": "Ocean",
+      "description": "Kadal's own theme: the sea's palette from sunlit shallows to midnight water, calm gradients and polished type.",
+      "colorScheme": "both",
+      "config": {
+        "transition": "fade",
+        "fonts": {
+          "sans": "Catamaran",
+          "mono": "JetBrains Mono",
+          "weights": "400,500,600,700,800"
+        }
+      },
+      "themeConfig": {
+        "waves": true
+      },
+      "shiki": {
+        "light": "night-owl-light",
+        "dark": "night-owl"
+      },
+      "defaults": {},
+      "layouts": [
+        "waves",
+        "depth"
+      ],
+      "components": [
+        "Wave"
+      ]
+    }
+  },
+  "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"
+  }
+}