@kadal/theme-swiss 0.0.0-stage → 0.4.2

package/README.md

@@ -1,3 +1,66 @@
-# Temporary Holding Version
+# @kadal/theme-swiss
 
-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.
+**Swiss**, a theme for [Kadal Deck](https://deck.kadal.cc). The International Typographic Style for design talks. Huge Inter Tight headings set tight and flush left on a twelve-column grid, heavy black rules, and one signal colour used sparingly. Facts, statements and quotes sit flush left, not centred; a section is the signal colour edge to edge; a running header carries the deck's title, the current section and the page.
+
+![Swiss: the cover, a content slide, code and the theme's own layout](./screenshot.jpg)
+
+## Use it
+
+```bash
+npm install @kadal/theme-swiss
+```
+
+```yaml
+---
+theme: swiss
+themeConfig:            # all optional
+  header: true
+  signal: "#d70017"
+  signalDark: "#ff3b2f"
+---
+```
+
+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: Inter Tight (headings), Inter (text), JetBrains Mono (code), loaded through the theme's `config.fonts`. Code colours: Shiki's min-light / vesper. To show it beside other themes in the theme menu (<kbd>T</kbd>), list it: `themes: [swiss, 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 |
+| --- | --- | --- | --- |
+| `header` | boolean | `true` | The running header on content slides. `false` turns it off; `header: false` in a slide's frontmatter hides it on that slide. |
+| `signal` | colour | `#d70017` | The one colour (light scheme), and the section slides' ground. |
+| `signalDark` | colour | `#ff3b2f` | The signal on the dark page. Without it, a set `signal` 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 |
+| --- | --- |
+| `poster` | One word or number as large as the slide allows (`size: 15em`, `signal: true` for the signal colour); `::meta::` is small print in the top right. |
+| `index` | The slide's list as a grid of numbered cells (`columns:`, default 3). A **bold** opening is the cell's title. |
+| `grid` | A header across, then each named slot a column under a heavy rule; the columns follow the number of slots (2 to 5), or `columns:`. |
+
+## Components
+
+| component | what |
+| --- | --- |
+| `<Rule label right signal />` | A heavy rule with a label on the left and one on the right; `signal` colours it. |
+
+## Preview
+
+`preview/deck.mdx` walks through every layout and component (`theme: ../`). In this repository:
+
+```bash
+bun run --filter @kadal/theme-swiss dev       # the preview deck, live
+node tools/theme-shots.mjs swiss               # 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,114 @@
+import type { CSSProperties } from "react";
+
+import { type LayerProps, type LayoutProps, useDeck } from "@kadal/deck";
+
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Swiss's module: a running header, three grid layouts and a rule.
+ *
+ *   the header       a slide-top layer on content slides: the deck's title, the current
+ *                    section (the last `layout: section` slide's heading) and the page, under a
+ *                    heavy rule. `themeConfig.header: false` turns it off; `header: false` in a
+ *                    slide's frontmatter hides it there.
+ *   layout: poster   one word or number as large as the slide allows (`size: 15em`,
+ *                    `signal: true` for the signal colour); `::meta::` is small print top right
+ *   layout: index    the slide's list as a grid of numbered cells (`columns: 3`)
+ *   layout: grid     a header across, then each `::slot::` a column under a heavy rule
+ *                    (`columns:` defaults to the number of slots)
+ *   <Rule>           a heavy rule with a label on the left and one on the right
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+const HEADER_LAYOUTS = new Set([
+  "default",
+  "center",
+  "two-cols",
+  "two-cols-header",
+  "index",
+  "grid",
+]);
+
+function Header({ slide, page, total, layout, frontmatter }: LayerProps) {
+  const deck = useDeck();
+  if (deck.config.themeConfig.header === false || frontmatter.header === false) return null;
+  if (!HEADER_LAYOUTS.has(layout)) return null;
+  const index = slide?.index ?? 0;
+  const section = [...deck.manifest.slides]
+    .reverse()
+    .find((s) => s.index <= index && s.frontmatter.layout === "section");
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return (
+    <div className="swiss-header" aria-hidden="true">
+      <span className="swiss-header-title">{deck.config.title}</span>
+      <span className="swiss-header-section">{section?.title ?? ""}</span>
+      <span className="swiss-header-page">
+        <b>{pad(page)}</b> / {pad(total)}
+      </span>
+    </div>
+  );
+}
+
+const num = (v: unknown) =>
+  typeof v === "number" ? v : typeof v === "string" && /^\d+$/.test(v.trim()) ? Number(v) : null;
+const str = (v: unknown) => (typeof v === "string" && v.trim() ? v.trim() : null);
+
+function Poster({ children, frontmatter }: LayoutProps) {
+  const size =
+    str(frontmatter.size) ?? (num(frontmatter.size) ? `${num(frontmatter.size)}em` : null);
+  return (
+    <div
+      className={`deck-layout deck-layout-poster${frontmatter.signal ? " is-signal" : ""}`}
+      style={size ? ({ "--swiss-poster-size": size } as CSSProperties) : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Index({ children, frontmatter }: LayoutProps) {
+  const cols = num(frontmatter.columns);
+  return (
+    <div
+      className="deck-layout deck-layout-index"
+      style={cols ? ({ "--swiss-index-cols": cols } as CSSProperties) : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Grid({ children, frontmatter }: LayoutProps) {
+  // Without `columns:`, style.css counts the slots (two to five) with :has().
+  const cols = num(frontmatter.columns);
+  return (
+    <div
+      className="deck-layout deck-layout-grid"
+      style={cols ? ({ "--swiss-grid-cols": cols } as CSSProperties) : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Rule({
+  label,
+  right,
+  signal = false,
+}: {
+  label?: string;
+  right?: string;
+  signal?: boolean;
+}) {
+  return (
+    <div className={`swiss-rule${signal ? " is-signal" : ""}`} role="separator">
+      {label ? <span>{label}</span> : null}
+      {right ? <span>{right}</span> : null}
+    </div>
+  );
+}
+
+export default {
+  layouts: { poster: Poster, index: Index, grid: Grid },
+  components: { Rule },
+  layers: { "slide-top": Header },
+};

package/package.json

@@ -1,6 +1,103 @@
 {
   "name": "@kadal/theme-swiss",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.2",
+  "description": "Swiss, a theme for Kadal Deck (@kadal/deck). A bold International-style theme for design talks: huge grotesk headings on a strict twelve-column grid, one signal colour.",
+  "keywords": [
+    "kadal-theme",
+    "kadal-deck",
+    "presentation",
+    "slides",
+    "theme",
+    "swiss",
+    "grid",
+    "design",
+    "grotesk"
+  ],
+  "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-swiss"
+  },
+  "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": "swiss",
+      "title": "Swiss",
+      "description": "A bold International-style theme for design talks: huge grotesk headings on a strict twelve-column grid, one signal colour.",
+      "colorScheme": "both",
+      "config": {
+        "transition": "fade",
+        "fonts": {
+          "heading": "Inter Tight",
+          "sans": "Inter",
+          "mono": "JetBrains Mono",
+          "weights": "400,500,700,800"
+        }
+      },
+      "themeConfig": {
+        "header": true
+      },
+      "shiki": {
+        "light": "min-light",
+        "dark": "vesper"
+      },
+      "defaults": {},
+      "layouts": [
+        "poster",
+        "index",
+        "grid"
+      ],
+      "components": [
+        "Rule"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "kadal-deck dev -C preview",
+    "check": "kadal-deck check -C preview",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
+  },
+  "peerDependencies": {
+    "@kadal/deck": "^0.4.2",
+    "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"
+  }
+}